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();
};