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>

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

1 个答案: