CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-video
M1X
M1X

Reputation: 5354

Change video src without stopping HTML5 video

How to change HTML5 video quality? This is my script up to now. It works but video starts from the beginning. Is there a way to change video quality like YouTube without stopping the video.?

<video src="videos/nesemdonti_1080p.mp4" id="video" autoplay></video>
<div id="720p" class="quality">720p</div>



$("#720p").click(function() {
    $('video').attr("src", "videos/nesemdonti_720p.mp4");
});

fiddle: http://jsfiddle.net/nz3eLrt2/3

Upvotes: 0

Views: 990

Answers (1)

jondinham
jondinham

Reputation: 8511

The solution is that we have to make sure the 720p video is ready to be played.

HTML5:

<video id="preload" style="display:none;">
</video>

<video src="videos/nesemdonti_1080p.mp4" id="video" autoplay>
</video>
<div id="720p" class="quality">720p</div>

JS:

$("#720p").click(function() {
    $("preload").attr("src", "videos/nesemdonti_720p.mp4");

    $("preload").on("canplay",function(){
        $('video').attr("src", "videos/nesemdonti_720p.mp4");
    });
});

The 'canplay' event occurs when the browser can start playing the specified audio/video. See: http://www.w3schools.com/tags/av_event_canplay.asp

Upvotes: 2

Related Questions