3

На html странице существует обычные стандартные плееры html5 но проблема в том что если к примеру запущен 1 плеер т.е воспроизводится видео и при клике на плеер другой оно тоже начинает воспроизводится ! Как реализовать что бы при клике на другой плеер останавливался тот что играет ?

1
  • полюбому нужен будет жаваскрипт(делаеш уплавление от скрипта, и потом контролиш что было нажато/проигрывается),и лучше подгружать готовую библиотеку(советую) mediaelement 4 фев 2016 в 7:09

1 ответ 1

1

Для этого нужно использовать JavaScript, который вначале остановит ненужные плееры (например, все плееры на странице), а потом запустит текущий.

Тут есть две стороны вопроса - как это сделать правильно, и буквально как вы попросили в вопросе ("при щелчке на плеер").

Если у вас включено отображение controls, правильно делается это с помощью media events. Вот пример кода на JavaScript с использованием библиотеки jQuery:

$(function() {
  $("video")[0].onplay = function () {
      var that = this;
      $('video').each(function () {
          if (this !== that) {
             this.pause();
          }
      });
  };
})

Пример работы можно посмотреть вот в этом фидле на JSFiddle.

Если же у вас нет никакой другой возможности, кроме как отслеживать клики мышки, нужно ловить событие onclick:

$(function() {
  //При щелчке на любой элемент video
  $('video').on('click', function () {

      //Останавливаем все другие video
      $('video').each(function () {
          this.pause();
      });

      //И запускаем только текущий
      this.play();
  });
})

Пример работы можно посомотреть вот в этом фидле на JSFiddle.

В зависимости от механики вашего веб-интерфейса, реализация может различаться, но идея останется прежней.

В некоторых случаях (проблемы с тэгом video со включенными controls), возможно, стоит отслеживать не click, а включать проигрывание на событие mouseover:

$(function() {
  $('video').on('mouseover', function () {
      $('video').each(function () {
          this.pause();
      });
            this.play();
  });
})
1
  • простите не мог ответить раньше - спасибо
    – user33274
    6 фев 2016 в 19:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки