gpt4 book ai didi

javascript - addEventListener ("loadedmetadata",有趣)没有正确运行,Firefox 错过事件

转载 作者:数据小太阳 更新时间:2023-10-29 06:05:52 25 4
gpt4 key购买 nike

我写了一个页面,发现 addEventListener("loadedmetadata",fun) 在 firefox 上运行不正确

我正在尝试修复一个旧软件的错误。在加载视频和页面时,该软件尝试在页面上绘制一些播放器 Controller 。它在 Chrome 和 IE 上运行良好,但无法绘制一些播放器 Controller 在 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") 和 ("Meta data for video loaded") 提醒两次,但它没有。这些代码在 chrome 45 和 IE11 上正确运行。这两个浏览器都像我预期的那样用 ("The vid") 和 ("Meta data for video loaded") 警告两次。

是火狐的bug吗?我怎样才能避免这个问题?


我只是厌倦了 vid.addEventListener("canplay", getmetadata); 并得到了相同的结果。看来问题是关于“addEventListener”


视频已加载。我可以使用 vid.play 播放它。我还使用 console.log(vid) 来查看 DOM 是否正确,结果是。

addEventListener 似乎跳过了 watching "loadedmetadata"和 "canplay",我不知道为什么。


我刚刚尝试了 .oncanplay 和 .onloadedmetadata ,发现不是 addEventListener ,而是 Event 导致了这个问题。

虽然某些东西(例如 alert())干扰了加载,但 Firefox 无法获取事件。因此,如果此时视频显示为“On Loadedmetadata”或“On Canplay”,则 Firefox 不会 catch 它。之后,视频加载元数据或可以播放。这是属性,而不是事件。Firefox 错过了事件,并向前冲。

最佳答案

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

在加载页面时,firefox 的速度非常快,以至于在 chrome 和 ie 等待某些东西时它匆匆忙忙地赶了过来。

此时 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

关于javascript - addEventListener ("loadedmetadata",有趣)没有正确运行,Firefox 错过事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33116067/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com