个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
25
4
我写了一个页面，发现 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
我想在按下按钮时打开一个表单，然后在完成表单后创建另一个按钮以将数据存储在对象中。 我这样做了，但在第二个 addEventListener 中它给了我这个错误: cannot read proper
这是我实际代码的简化版本。 有三个复选框和按钮(每个编号为 0、1、2)和一个提交按钮。简而言之，如果您选中复选框编号 1 和 2，单击提交，按钮 1 和 2 将被着色。现在您可以单击任何彩色按钮，它
问题代码 var el = document.getElementById("searchcharm_'"+touch_id+"'"); el.addEventListener('click',
window.document.addEventListener = function(event) {...} window.addEventListener = function(event) {
这段代码块有什么区别: var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress,
在使用 PhoneGap 时，它有一些使用 document.addEventListener 的默认 JavaScript 代码，但我有自己的代码使用 window.addEventListener
当我运行这段代码时，为什么 .body 事件先触发？ document.addEventListener('click', function() { console.log('The docume
我将带有循环的 addEventListener 添加到一些 anchor 元素 products 中，如下所示: for(var j=0;j
所以我的代码可以按我想要的方式工作，但是大多数(IE 除外)调试器都会向我抛出此错误: 未捕获类型错误:无法读取未定义的属性“addEventListener” 这是代码: //Get all ele
我真的不知道为什么这不起作用。在我的 HTML 中，如果我将脚本放在 head 部分，我会在控制台中收到以下错误: Uncaught TypeError: Cannot read property '
在 React 中，当你有一个带有 onClick 属性的元素时，很容易使用 Enzyme 的 .simulate("click") 方法来点击它。然而，在我的代码库中有一个示例，其中一个元素被 Re
问候，由于某种原因，当我单击按钮时，我的 -addEventListener 没有执行。任何人都可以帮忙这是我的代码: function elNegro() { alert("Thank Yo
我正在将我的一些代码从 onClick 更改为 addEventListener，因为我已经阅读了各种好处，并且出于关注点分离的目的。然而，我遇到的问题之一是，虽然使用 onClick，我能够调用一个
我正在尝试向我在循环中生成的某些元素添加事件监听器。我必须使用 div.lastChild - 虽然在这个例子中它非常愚蠢。但这只是演示: var func = function() {
我在将事件监听器添加到 JS 时遇到问题...如果我将按钮与 onclick 属性连接，它会起作用，但如果我在 HTML 中删除它并尝试添加 eventListener('click', myFunc
我不知道为什么，但是当我点击“按钮”时什么也没有发生... 控制台中没有消息，没有错误。如何解决？ JS var bird = (function(){ let button = doc
我正在绘制一个方框网格，希望能够单击每个方框并使用 SocketIO 将带有其 ID 的通知发送到服务器 let boxes = document.querySelecto
我想是新手问题。 以下代码是我在文档就绪时调用的函数的一部分。它旨在在鼠标移动时永久返回当前鼠标位置的值。 正在发生的奇怪事情:在文档就绪时移动鼠标不会将任何内容记录到控制台。我知道 mouse_mo
我是 Flash 的新手，我似乎无法完成这个简单的操作。 (我正在使用 ActionScript 3.0) 我在我的编辑器中创建了一个输入文本框。实例名称是“测试”。在我的 Action 编辑器中，我
我有一个像 那些标签包含一些内容，我想打开/关闭它们，但仅使用纯 javascript。我已经尝试过使用 document.querySelectorAll
我是一名优秀的程序员,十分优秀！