Solution 1 :

If it doesn’t work, try this

var videoDOM = '';
var curtime = '';
var source = '';
var vide0 = '';

var formats = {″,


    for (var format in formats) {
        $('.qualitypick').append($("<option value='" + format + "'>" + format + "</option>"));

    $('.qualitypick').change(function () {
        video = document.getElementById("videoplayer");
       curtime = video.currentTime;
        video.src = formats[$(this).val()];
        video.currentTime = curtime;;


This worked on my windows computer

Problem :

I have a simple video player now I would like to change the quality of the video as on youtube, after changing the video source it should start exactly like the current time, IT SHOULD NOT START FROM 0 (IPHONE PROBLEM).

Here I what I have so far


<div id="video-container">
    <video id="videoplayer" width="750" height="421" webkit-playsinline 

<select class="qualitypick" autocomplete="off"> </select>

Now on android, chrome, edge etc works fine as expected but when I open the demo on iPhone safari, I play the video after few seconds I change to low quality, but the video starts from the beginning instead of starting at the current time.

What is wrong with the code above? any help or suggestions will be appreciated


Leave a Reply

Your email address will not be published. Required fields are marked *