的addEventListener（「等待loadedmetadata」，有趣）不能正常運行，火狐錯過事件

我寫了一個網頁，發現的addEventListener（「等待loadedmetadata」，好玩）不會在Firefox的addEventListener（「等待loadedmetadata」，有趣）不能正常運行，火狐錯過事件

正確運行

我想修復舊軟件的bug。在加載視頻和頁面時，軟件試圖在頁面上繪製一些播放器控制器。它在Chrome和IE上運行良好，但未能在Firefox上繪製某些播放器控制器。我嘗試了調試日期直到我發現問題可以簡化這樣的：

<!DOCTYPE html> 
<html> 
<body> 

<video id="myVideo" width="320" height="176" controls> 
    <source src="video.mp4" type="video/mp4"> 

    Your browser does not support HTML5 video. 
</video> 

<script> 
var vid = document.getElementById("myVideo"); 
alert("The vid"); 
vid.addEventListener("loadedmetadata", getmetadata); 

function getmetadata() 
{ 
alert("Meta data for video loaded"); 
} 

</script> 

<p>test</p> 

</body> 
</html>

我預計火狐（41.0.1）與（以下簡稱「VID」）和（「用於加載視頻元數據」）兩次提醒，但它沒有。這些代碼可以在Chrome 45和IE11上正確運行。這些瀏覽器都會按照我的預期（「The vid」）和（「加載視頻的元數據」）兩次提醒。

它是一個Firefox的錯誤？我怎樣才能避免這個問題？

我只是累了vid.addEventListener("canplay", getmetadata);並得到了同樣的結果。看來問題是關於

視頻加載「的addEventListener」。我可以使用vid.play來播放它。我還使用console.log（vid）來查看DOM是否正確，並且是。

看來addEventListener跳過了「loadedmetadata」和「canplay」，我不知道爲什麼。

我只是想.oncanplay和.onloadedmetadata，發現它不是的addEventListener，但該事件造成這個問題。

雖然某些內容（例如alert（））干擾了加載，但Firefox無法獲取該事件。因此，如果視頻現在是「On Loadedmetadata」或「On Canplay」，那麼Firefox並沒有趕上它。之後，視頻被加載元數據或可以播放。這是屬性，而不是事件.Firefox錯過了事件，並向前衝。

來源

2015-10-14 Catscarlet

確保該視頻確實裝 – Saar

是，加載視頻。我可以使用vid.play來播放它。我還使用console.log（vid）來查看DOM是否正確，並且是。 – Catscarlet

我有同樣的問題，似乎「預加載」屬性無法正常工作。當我在播放之前調用$ video.trigger（「load」）時，問題消失 – wtorsi

最後我用console.log(vid.readyState)找到了解決辦法。

在加載頁面時，firefox非常快，以至於在Chrome瀏覽器中匆匆忙忙地等待着某個東西。

目前vid.addEventListener("loadedmetadata", getmetadata)，vid.readyState在firefox中的出現大於2，而在chrome和ie中，vid.readyState仍然是0。

readyState 0表示'沒有關於媒體資源的信息'。

readyState 2意味着'數據可用於當前播放位置，但不足以實際播放多個幀'，就像'loadedmetadata'一樣。它不是一個事件，而是一個屬性。

我改變了這樣的代碼來檢查瀏覽器是否過快地錯過了'loadedmetadata'事件。

<!DOCTYPE html> 
<html> 
<body> 

<video id="myVideo" width="320" height="176" controls> 
    <source src="video.mp4" type="video/mp4"> 


    Your browser does not support HTML5 video. 
</video> 

<script> 
var vid = document.getElementById("myVideo"); 
alert("The vid"); 
vid.addEventListener("loadedmetadata", getmetadata); 

if (vid.readyState >= 2) { 
     getmetadata(); 
    } 

function getmetadata() 
{ 
alert("Meta data for video loaded"); 
} 

</script> 

<p>test</p> 

</body> 
</html>

有關readyState的更多諮詢無論：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

來源

2015-10-14 07:38:06 Catscarlet

最後，我在文件中發現了一個'async：false'。嘗試調整順序以使readystate正確。 – Catscarlet

在readyState條件下將'addEventListener'移入else可能會改善這種情況，只有在視頻對象沒有準備好的情況下才會添加它。雖然好的解決方案 –

的addEventListener（「等待loadedmetadata」，有趣）不能正常運行，火狐錯過事件

回答

相關問題