Geek Answers Handbook

Video.js - loaddata event never fires

I integrate Video.js into the project and have several problems.

I have this 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 the source and can play it.

 var vidPlayer = _V_("vidView"); vidPlayer.src({ type: "video/mp4", src: vidlink }); vidPlayer.play();

Only for this software there were problems: every second source and game downloader will work. It seemed to me that I tried to play before video.js was ready, so I tried to use listeners to start the game at the right time.

I found that some events never fire at all. I can not get anything from the event "loadalldata" or "loaded data". The "loadstart" event fires at least, so I put my .play () command there.

 vidPlayer.addEvent("loadstart", function(){ console.log("LOAD START Fired" ); var myPlayer = this; myPlayer.play(); } );

But this is not yet reliable. I see messages on my console "Trying to resume!" repeatedly. He plays a few videos, but sometimes gets connected.

Am I missing something to get the "loadeddata" event?

Also, related Q - I notice that the docs say that the syntax for removing an event listener is:

myPlayer.removeEvent ("eventName", myFunc);

It is right? It seems that the "myFunc" part is redundant, and I am wondering if this is a copy / paste error in the documentation or if this is the correct syntax.

thanks in advance.

+4
source share
2 answers

I suspect that you are facing the same problem as me. If your browser uses HTML5 video (instead of Flash backup) Some events, such as loadedmetadata and loadeddata , may fire before Video.js links event listeners.

This is especially true if you are preloading and there is a delay between downloading the video and initializing Video.js. This also happens when there is a cached copy, so it works on every second update (cache invalidation).

The solution is to simply add material to initialize the video in <head> rather than at the bottom of the document. If this is not ideal (which was not for us), we added an event listener to <head> , and then tested it after we initialized the player. for instance

In <head> :

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

And then later in the 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 not supported in IE7 / 8, but everything is fine, because they do not support HTML5 video in any case, so it never works. IE9 supports window.addEventListener and HTML5 video, so it will work as expected.

We also check that techName is html5 , since the Flash player is created when we initialize the Video.js object, so the event should not have been fired before.

+10
source

loadeddata will not necessarily start before playback starts. In Flash, this never happens; with HTML5, the event is sent from the video element, so it depends on the behavior of the browser.

loadedalldata is when all the video is loaded, so it is unlikely to happen before playback starts.

You indicate which function to remove from the event, because you could associate several events with the event, for example

 vidPlayer.addEvent("play", onPlay1 ); vidPlayer.addEvent("play", onPlay2 ); vidPlayer.removeEvent("play", onPlay1 ); // onPlay2() would still be executed
+1
source

More articles:


All Articles