javascript html5 侦听器加载的数据不起作用某些
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21911459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 listener loadeddata do not work certain
提问by hamburger
I' am desperated. Why this works:
我很绝望。为什么这样做：
var myVid=document.getElementById("movie");
myVid.onloadeddata=console.log("Browser has loaded the current frame");
and this do not:
而这不会：
myVid.addEventListener("loadeddata", function() {
alert("loadeddata");
});
tried both in firefox 27.
在 Firefox 27 中都尝试过。
her my page where it shout run: www.x.opteynde.com
她在我的页面上大声喊叫： www.x.opteynde.com
My target is to get the loading-time of the video.
我的目标是获取视频的加载时间。
回答by Martin Tournoij
var myVid = document.getElementById("movie");
myVid.onloadeddata = console.log("Browser has loaded the current frame");
This doesn't do what you expect. You're not binding a function to myVid.onloadeddata, you're immediatly executing console.log(), and setting the return value of that to myVid.onloadeddata.
这不符合您的预期。您没有将函数绑定到myVid.onloadeddata，而是立即执行console.log()，并将其返回值设置为myVid.onloadeddata。
The proper way to do this, is:
这样做的正确方法是：
myVid.onloadeddata = function() {
console.log("Browser has loaded the current frame");
}
So this would explain why this would output something in your console.
所以这将解释为什么这会在你的控制台中输出一些东西。
On to loadeddata:
到loadeddata：
The definition of loadeddatais:
的定义loadeddata是：
The user agent can render the media data at the current playback position for the first time.
用户代理可以在当前播放位置首次渲染媒体数据。
In slightly less formal speak, this means: "The user agent can render at least one frame of actual video".
稍微不那么正式地说，这意味着：“用户代理可以渲染至少一帧实际视频”。
In my Firefox error console I see these errors:
在我的 Firefox 错误控制台中，我看到以下错误：
Specified "type" attribute of "video/mp4" is not supported. Load of media resource fliege.mp4 failed.
HTTP load failed with status 404. Load of media resource http://www.x.opteynde.com/fliege.ogv failed.
All candidate resources failed to load. Media load paused.
Obviously, Firefox can't render a frame from a video it can't load, so this 404 seems to be your problem.
显然，Firefox 无法从无法加载的视频中渲染帧，因此这个 404 似乎是您的问题。
P.S.
Also note that in this exampleloadeddataisn't fired until you click the 'play' button.
PS
另请注意，在此示例中，loadeddata只有单击“播放”按钮才会触发。
回答by hamburger
After two days searching I found the solution. To fire the events it has to be a video.load() before. The loop and the autoplay-tags in the html-video-markup aren't enought.
经过两天的搜索，我找到了解决方案。要触发事件，它必须是 video.load() 之前。html-video-markup 中的循环和自动播放标签还不够。
回答by Guilherme Soldateli
I've got kind the same issue here and the problem was that i registered the event listener inside body.onload event.
我在这里遇到了同样的问题，问题是我在 body.onload 事件中注册了事件监听器。
window.onload = function() {
myVideo.addEventListener('loadeddata', function() {
alert('loadeddata');
});
}
When window.onload event is triggered, myVideo.loadeddata already have been executed.
当 window.onload 事件被触发时，myVideo.loadeddata 已经被执行了。
回答by SpYk3HH
Great explination by Carpetsmoker.
大explination通过Carpetsmoker。
However, my question is, you have it tagged as jQuery, why not use jQuery?
但是，我的问题是，您已将其标记为 jQuery，为什么不使用 jQuery？
So i'm just adding to his answer a little with some jQuery tips.
所以我只是在他的回答中添加了一些 jQuery 技巧。
In jQuery you can use CSS selectors to easily get an element. For instance, you're element with the ID movieis as easy to get as:
在 jQuery 中，您可以使用 CSS 选择器轻松获取元素。例如，您的 ID 元素movie很容易获得：
var myVid = $('#movie');
From there you can make use of it with ease.
从那里您可以轻松使用它。
I'm not familiar with what you're doing, but generally assigning an event in jQuery is as easy as:
我不熟悉你在做什么，但通常在 jQuery 中分配一个事件就像这样简单：
$('#movie').on('event', function(e) { /* do work */ });
That said, i'm not 100% sure $('#movie').on('loadeddata 'will actually work. I havn't played with media much, but I do know you might also look at jQuery's .load()
也就是说，我不是 100% 肯定$('#movie').on('loadeddata '会实际工作。我没怎么玩过媒体，但我知道你也可以看看 jQuery 的.load()
Last but not least, if you need to use the actual element in vanilla JS, just simply do something like:
最后但并非最不重要的一点是，如果您需要在 vanilla JS 中使用实际元素，只需执行以下操作：
var myVid = $('#movie')[0]; // much easier to read and reuse than .getElementByID
// however take note, this is more JS to run thus causing a a lil less speed
myVid.onloaddata = function() { /* do work */ };
