javascript - 使用事件监听等待readyState html5视频

Question

这是我加载视频的 JavaScript。

var vid = $("#video");

$("#video").on("load",function() {
    if ( vid[0].ReadyState === 4 ) {
        console.log("loaded video!");
        console.log(vid);
        vid.fadeIn();
    }
});

我想在 .load() 运行后每次视频 div 刷新时播放我的视频。我如何循环这个直到readyState == 4？我尝试使用 on("canplaythrough") 但这从未被识别为函数...

Answer 1

确保您在标记中设置了 preload="auto" (并且不要使用 autoplay)，然后您就可以使用 canplay > 事件:

var vid = $("#video");

vid.on("canplay", function() {
  vid[0].play();
  vid.fadeIn(1000);
});

$("#change").on("click", function() {
  vid.hide();
  vid[0].src = "http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" width="500" height="280" preload="auto" style="display:none">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="change">Change source (mp4 only for this example)</button>