Question

我写了一个页面，发现addEventListener（“loadedmetadata”，fun）在firefox上无法正常运行

我正在尝试修复旧软件的错误。在加载视频和页面时，软件试图在页面上绘制一些播放器控制器。它在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>

我期望firefox（41.0.1）用（“The 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就没有赶上它。在那之后，视频被加载元数据或canplay。这是属性，而不是事件.Firefox错过了事件，并且向前冲。

Answer 1

最后，我使用console.log(vid.readyState)找到了解决方案。

在加载页面时，firefox是如此之快，以至于它匆忙而且正在等待某些东西。

目前vid.addEventListener("loadedmetadata", getmetadata)，vid.readyState在firefox中超过2，而在chrome上，即vid.readyState仍为0。

readyState 0表示＆＃39;没有关于媒体资源的信息＆＃39;

readyState 2表示＆＃39;数据可用于当前播放位置，但不足以实际播放多个帧＃39; ，就像“装载的元数据”一样。它不是一个事件，而是一个属性。

我改变了这样的代码来检查浏览器是否冲得太快而不能错过这个事件＆＃39; loadedmetadata＆＃39;。

<!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

Answer 2

我遇到了同样的问题并找到了解决方案。我使用loadeddata事件而不是loadedmetadata事件，它对我有用。

在最终指南Javascript 本书中，loadeddata事件表示：

首次播放当前播放位置的数据，并且readyState已更改为HAVE_CURRENT_DATA。

HAVE_CURRENT_DATA的意思是：

已加载currentTime的媒体数据，但没有足够的数据已加载以允许媒体播放。对于视频，通常表示当前帧已加载，但下一帧尚未加载。此状态发生在声音或电影的结尾。它有readyState 值"2"的属性。

我希望我的回答清楚明了：

<!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");

    // here I used "loadeddata" event and worked very well♥
    vid.addEventListener("loadeddata", getmetadata);

    function getmetadata() {
      alert("Meta data for video loaded");
    }
  </script> 

  <p>test</p>
</body>
</html>

addEventListener（“loadedmetadata”，fun）无法正常运行，Firefox错过了事件

2 个答案: