Play multiple videos with only one controlbar in video.js

Viewed 2300

How can I play multiple videos using only one controlbar in video.js?

I created two separate video elements, first one with controls visible, second without controls. I am trying to play both videos with the controlbar from video-1.

<!-- Video 1 -->
  <video id="video-1" width="100%" height="auto" poster="mythumbnail-1.png" class="video-js" preload="auto" data-setup='{"fluid": true}' controls>
    <source src="myvideo-1.mp4" type="video/mp4">
  </video>

<!-- Video 2 -->
  <video id="video-2" width="100%" height="auto" poster="mythumbnail-2.png" class="video-js" preload="auto" data-setup='{"fluid": true}'>
    <source src="myvideo-2.mp4" type="video/mp4">
  </video>

Do I need to change the video.js file for this or can it be done with a new script?

Thanks for your feedback!

Update: I managed to create a new button that starts both videos at the same time. But this way I would have to rebuild every single button of the controlbar and write new functions for them. Is there a smarter way to do this? Is there for example a solution to use the controlbar for every video on the whole site?

var myPlayerA = videojs('video-1');
var myPlayerB = videojs('video-2');

document.getElementById("testbuttonplay").onclick = function () { 
  myPlayerA.play();
  myPlayerB.play();
};
0 Answers
Related