I'm using version drupal 7 to create the "slideshow" to display the slideshow of the video, each video is embedded in its own content item.
When the user starts to play the video, if the video is still playing, click "Next", the slide will advance to the next slide, but the video of the previous slide will not stop playing (all browsers). Then, the user can click to play the next video, and then two videos will be played at the same time. If the user advances to the next slide, they may start playing the third synchronized video, and so on. When the user clicks "Next" to go to the next slide, I want to stop any video that is currently playing.
Can someone provide some simple code to prevent multiple videos on different slides from playing at the same time?
This is my video HTML code:
<video class="video-test" style="width:96%;padding-left:6%;" controls>
<source src="./sites/default/files/MyGovUC 2 0.mp4" type="video/mp4">
</video>
I have tried to use the below js but doesn't work.
$('.video_test').on('afterChange', function(event, slick, currentSlide, nextSlide) {
player.pause();
});
https://i.sstatic.net/5lgGa.png
Thank you for your help.