Как избежать воспроизведения двух видео в html

Question

На моем веб-сайте я хочу избежать одновременного воспроизведения двух видео.

Я думаю, если я добавлю идентификатор в видео, когда пользователь нажимает на это видео, я беру этот идентификатор и помещаю его в переменную, а если пользователь нажмите на другое видео, я автоматически ставлю первое видео на паузу.

<video id="video_1" onclick="manage_video();"
       preload="none" poster="images/" controls 
       data-video_id="video_1">
    <source src="videos/<?php echo $data['post_video_adress']?>"/>
</video>

В управлении видео я ставлю простое предупреждение (), чтобы увидеть, работает ли щелчок

function manage_video(){
   alert("ok");
}

Но когда я нажмите на видео, это не работает

Вы можете мне помочь?

Спасибо.

Answer 1

Выберите все ваши видео и прослушайте событие play с каждым видео. Это событие вызывается всякий раз, когда начинается воспроизведение видео. Поэтому, слушая это событие, мы знаем, когда начинается воспроизведение видео. И отсюда мы можем выбрать все другие видео и приостановить их всякий раз, когда происходит это событие.

В этом примере ниже выбираются все элементы видео, циклы над каждым элементом видео и начинается прослушивание события play. Всякий раз, когда начинается воспроизведение видео, вызывается функция pauseOtherVideos. Эта функция зацикливает все видео, которые мы нашли ранее, и приостанавливает все видео, кроме того, которое начало воспроизводиться.

// Get all <video> elements.
const videos = document.querySelectorAll('video');

// Pause all <video> elements except for the one that started playing.
function pauseOtherVideos({ target }) {
  for (const video of videos) {
    if (video !== target) {
      video.pause();
    }
  }
}

// Listen for the 'play' event on all the <video> elements.
for (const video of videos) {
  video.addEventListener('play', pauseOtherVideos);
}