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

小提琴：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

在不停止HTML5视频的情况下更改视频src

1 个答案: