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

Using event listening wait for readyState html5 video

本文关键字：readyState html5 视频 等待 事件      更新时间：2023-09-26

这是我关于加载视频的javascript。

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

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

确保在标签中设置了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>

相关文章：