Video.js - loadeddata event never fires

javascript, video, video.js

Solution

I suspect you ran into the same issue I did. If your browser is using the HTML5 video (instead of Flash fallback) Some events, like `loadedmetadata` and `loadeddata`, may fire before Video.js binds the event listeners.

This is particularly true if you are doing some preloading, and there is a delay between when the video start to load and when you initialising Video.js. It also seems to occur when there is a cached copy, which is why it works on every second refresh (invalidating the cache).

The solution is to just throw your video initlisation stuff in the `<head>` instead of at the bottom of the document. If that is not ideal (which it wasn't for us), we added an event listener to the `<head>` and then checked for it after we initialised the player. For example

In `<head>`:

<script>
var loadedmetadata = false;
if (window.addEventListener) {
    window.addEventListener('loadedmetadata', function(ev) {
            loadedmetadata = true;
    }, true);
}
</script>

And then later in your script:

if (loadedmetadata === true && videoPlayer.techName === 'html5') {
    // call the callback you would have attached to
    // the event listener.
} else {
    // add event listener here
]

`window.addEventListener` is not supported in IE7/8, but thats okay, because they don't support HTML5 video anyway, so it won't ever fire. IE9 supports `window.addEventListener` and HTML5 video, so it will work as expected.

We also check that the `techName` is `html5`, since the Flash player is created when we initialise the Video.js object, so the event shouldn't have fired previously.

Problem

I am integrating Video.js into a project and having a few issues. I have it in my HTML as: ``` <video id="vidView" class="video-js vjs-default-skin" width="320" height="320" poster="/siteImages/Dummy.png" preload="auto"> <source type="video/mp4" src="" \> </video> ``` And in my javascript I load a source and manage to play it. ``` var vidPlayer = _V_("vidView"); vidPlayer.src({ type: "video/mp4", src: vidlink }); vidPlayer.play(); ``` Only doing this programmatically was having issues - every second load of a source and play would work. I imagined I was trying to play before video.js was ready, so sought to use listeners to launch play at the proper time. I have found that certain events never fire at all. I can't get anything from "loadedalldata" event or "loadeddata". The "loadstart" event fires at least, so I put my .play() command in there. ``` vidPlayer.addEvent("loadstart", function(){ console.log("LOAD START Fired" ); var myPlayer = this; myPlayer.play(); } ); ``` But it's still not reliable. I see messages on my console of "Trying to resume!" several times. It plays for a few videos, but gets bogged down sometimes. Am I missing something in getting "loadeddata" event to happen? Also, related Q - I notice that the docs say the syntax for removing an Event listener is: myPlayer.removeEvent("eventName", myFunc); Is that right? It seems like the "myFunc" part is redundant, and I'm wondering if that is a copy/paste error in the documentation or if that's correct syntax. Thx in advance.

Original source