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

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

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.

• javascript
• html

4 Answers 4

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.

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.

I've got kind the same issue here and the problem was that i registered the event listener inside body.onload event.

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

        });
}

When window.onload event is triggered, myVideo.loadeddata already have been executed.

Great explination by Carpetsmoker.

However, my question is, you have it tagged as jQuery, why not use jQuery?

So i'm just adding to his answer a little with some jQuery tips.

In jQuery you can use CSS selectors to easily get an element. For instance, you're element with the ID movie is as easy to get as:

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:

$('#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()

Last but not least, if you need to use the actual element in vanilla JS, just simply do something like:

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 */ };