Question

我很绝望。为什么会这样：

var myVid=document.getElementById("movie");
myVid.onloadeddata=console.log("Browser has loaded the current frame");

而这不是：

myVid.addEventListener("loadeddata", function()  {
  alert("loadeddata");
  });

在firefox 27中尝试过。

她在我的页面上大喊： www.x.opteynde.com

我的目标是获取视频的加载时间。

Answer 1

var myVid = document.getElementById("movie");
myVid.onloadeddata = console.log("Browser has loaded the current frame");

这不符合您的期望。您没有将函数绑定到myVid.onloadeddata，您立即执行console.log()，并将其返回值设置为myVid.onloadeddata。

这样做的正确方法是：

myVid.onloadeddata = function() {
    console.log("Browser has loaded the current frame");
}

所以这可以解释为什么这会在你的控制台输出一些内容。

开到loadeddata：

definition of loadeddata是：

用户代理可以在第一个播放位置呈现媒体数据时间。

稍微不那么正式的说法，这意味着：“用户代理可以呈现至少一帧实际视频”。

在我的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.

显然，Firefox无法从无法加载的视频中渲染帧，所以这404似乎是你的问题。

P.S。
另请注意，只有在您点击“播放”按钮后才会触发this example loadeddata。

Answer 2

经过两天的搜索，我找到了解决方案。要触发事件，它必须是之前的video.load（）。

中没有使用html-video-markup中的循环和autoplay-tags

Answer 3

我在这里遇到了同样的问题，问题是我在body.onload事件中注册了事件监听器。

window.onload = function() {
            myVideo.addEventListener('loadeddata', function() {
            alert('loadeddata');

        });
}

触发window.onload事件时，myVideo.loadeddata已经执行。

Answer 4

Carpetsmoker的伟大探索。

但是，我的问题是，你把它标记为jQuery，为什么不使用jQuery？

所以我只是通过一些jQuery技巧添加他的答案。

在jQuery中，您可以使用CSS选择器轻松获取元素。例如，您的ID为movie的元素很容易获得：

var myVid = $('#movie');

从那里你可以轻松地使用它。

我不熟悉你在做什么，但通常在jQuery中分配一个事件就像这样简单：

$('#movie').on('event', function(e) { /* do work */ });

那就是说，我不是百分之百确定$('#movie').on('loadeddata '实际上会有效。我没有多玩媒体，但我知道你也可以看看jQuery的.load()

最后但并非最不重要的是，如果您需要使用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 */ };

html5 listener loadeddata不能正常工作

4 个答案: