Video.js

Question

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.

Lachlan McDonald · Accepted Answer

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.

Video.js - loadeddata event never fires

Tags:

javascript

video

RossGK

1 Answers

Lachlan McDonald

Recent Activity

Donate For Us