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!

score 19 · Answer 1 · edited May 23 '17 at 12:09

19

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.

edited May 23 '17 at 12:09

Community

1
1

answered Feb 20 '14 at 16:20

Macumbaomuerte

2,197
2
19
22

1

Thanks for sharing! this solutions is the right one for my case. – leticia Mar 21 '14 at 17:57
Bravo! Tank you so much. This solution is correct for 'refresh' problems. – Pawel Szulc May 13 '14 at 11:10
1

Thank you so much. This worked, the accepted answer did not. Wasted a half a day trying to figure this one out. – Tim at MastersAllen Sep 17 '14 at 09:45

score 17 · Accepted Answer · edited Dec 03 '15 at 16:26

17

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)

edited Dec 03 '15 at 16:26

chhameed

4,406
4
26
44

answered Jun 14 '12 at 15:33

Bruno

1,368
9
11

1

It does work, thank you! I had another problem, but I found I was giving same id to all my videos. – Jeff B. Jun 14 '12 at 15:55

score 3 · Answer 3 · edited Oct 16 '17 at 12:28

3

I did it in a loop

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

edited Oct 16 '17 at 12:28

msanford

11,803
11
66
93

answered Oct 16 '17 at 11:44

Сергей Андреевич

156
1
3

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

3 Answers3