На html странице существует обычные стандартные плееры html5 но проблема в том что если к примеру запущен 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();
});
})
Комментариев нет:
Отправить комментарий