I am integrating Video.js into a project and having a few issues.
I have it in my HTML as:
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.
loadeddata
won't necessarily fire before playback starts. In Flash it never does, with HTML5 the event is relayed from the video element so it depends on the browser behaviour.
loadedalldata
is when the entire video is downloaded, so is unlikely to occur before playback starts.
You specify which function to remove from the event because you could have bound more than one function to the event, e.g.
vidPlayer.addEvent("play", onPlay1 );
vidPlayer.addEvent("play", onPlay2 );
vidPlayer.removeEvent("play", onPlay1 ); // onPlay2() would still be executed