使用事件偵聽等待readyState html5視頻

這是我在加載視頻的JavaScript。使用事件偵聽等待readyState html5視頻

var vid = $("#video"); 

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

我想在播放後每次刷新視頻div時播放我的視頻。我如何循環直到readyState == 4？我試着用on("canplaythrough")，但是這是從來沒有公認的功能...

來源

2014-12-02 mpn

確保您設置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>

來源

2014-12-02 16:09:17 K3N

如果我正在更改頁面上的src屬性，這項工作是否可行？ – mpn 2014-12-02 16:13:38

@pwneth我這麼認爲，它應該會引發新的戲劇事件。 – K3N 2014-12-02 16:14:17

另外，當我在控制檯中查看對象時，canplay事件始終爲空......所以我猜測它永遠不會觸發。 – mpn 2014-12-02 16:15:21

使用事件偵聽等待readyState html5視頻

回答

相關問題