javascript - 更改视频源而不停止 HTML5 视频

Question

如何更改 HTML5 视频质量？这是我到目前为止的脚本。它有效，但视频从头开始。有没有办法像 YouTube 一样在不停止视频的情况下改变视频质量？

<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

Answer 1

解决方案是我们必须确保 720p 视频已准备好播放。

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");
    });
});

当浏览器可以开始播放指定的音频/视频时，会发生“canplay”事件。 请参阅:http://www.w3schools.com/tags/av_event_canplay.asp