html5 listener loadeddata do not work certain

Question

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.

her my page where it shout run: www.x.opteynde.com

My target is to get the loading-time of the video.

Answer 1

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.

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:

The definition of loadeddata is:

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:

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.

P.S.
Also note that in this example loadeddata isn't fired until you click the 'play' button.

Answer 2

After two days searching I found the solution. To fire the events there has to be a video.load() before. The loop and the autoplay-tags in the html-video-markup aren't enough.