Initialize a Video.js player on a ajax loaded part of the page

Question

The video player actually loads fine. My actual problem is when I refresh some parts of my page with AJAX and those parts contains a video player, the HTML5 player loads fine, but not the Video.js part that customizes it.

The video.js file is loaded in the header of the page. I have read the doc and can't find how to initialize a video player on a page that has already been loaded. Isn't there a myPlayer.initialize() kind of function I can call when my part of page containing the video is loaded to make the video player load correctly with Video.js?

I think the video.js file does it automatically only on page load.

Thanks for your precious help!

Solution 1

Yes, according to the docs you can do:

videojs("example_video_1", {}, function(){
  // Player (this) is initialized and ready.
});

It's specifically to be used with dynamic content :)

Source: http://docs.videojs.com/docs/guides/setup.html (at the bottom)

Solution 2

I had the same problem. My scenario:

Loading thru ajax a html code with the video tag, it works the first time, but when I reaload the content with ajax (not refreshing the page) it doesn't work.

What I did was to switch to finding the video thru the class, since the ID becomes changed by videojs.

So this is my call now:

videojs(document.getElementsByClassName("video-js")[0], {}, function(){
          // Player (this) is initialized and ready.
});

Hope this helps someone with the same problem where Bruno solution didn't worked.

Solution 3

I did it in a loop

var massVideo = $('.video-js');
for(var i = 0; i < massVideo.length; i++){
  videojs(massVideo[i]).ready(function(){});
}