Модальность Bootstrap — проблема с остановкой видео в Safari и Chrome
Я добавил следующий код на свою html-страницу, чтобы остановить воспроизведение модального видео при его закрытии:
<head>
<script type = "text/javascript">
$(document).ready(function(){
$('.modal').each(function(){
var src = $(this).find('video').attr('src');
$(this).on('click', function(){
$(this).find('video').attr('src', '');
$(this).find('video').attr('src', src);
});
});
});
</script>
</head>
<body>
<div class = "modal fade" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal">×</button>
<h4 class = "modal-title">My title</h4>
</div>
<div class = "modal-body">
<div> <video controls width = "100%"> <source src = "videos/myvideo.mp4" type = "video/mp4"></video> </div>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Close</button>
</div>
</div>
</div>
</div>
</body>
Он отлично работает с Firefox, но не с Chrome и Safari. В Firefox ссылка src удаляется при закрытии модального окна (хорошо). В Chrome, когда я нажимаю на полосу воспроизведения видео внутри модального окна, Chrome запускает видео, но если я нажимаю на само видео (которое должно просто приостанавливать/воспроизводить его), оно удаляет ссылку src, поэтому видео становится черным. Safari удаляет ссылку src, как только вы нажимаете кнопку воспроизведения (поэтому видео никогда не запускается). Мой приоритет — заставить это работать в Firefox и Safari.
Кто-нибудь знает, как я могу это решить?
(Примечание. Я пробовал другие коды для остановки видео при закрытии модального окна, чтобы посмотреть, может ли оно лучше работать с Safari и Chrome (например, здесь Twitter Bootstrap Modal стоп видео Youtube), но мне не удалось вообще остановить видео. Итак. тот, который я использую в этом примере, — единственный, который правильно останавливает воспроизведение моего видео при закрытии — по крайней мере, в Firefox.)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Прежде всего, добавьте id = "videoModal" к модальному и id = "video" к тегу видео.
Затем используйте bootstrap show и hide прослушиватели событий для модального окна, а также используйте play() и pause() для видеоэлемента следующим образом:
<script type = "text/javascript">
$(document).ready(function(){
var video = document.getElementById('video');
$('#videoModal').on('shown.bs.modal', function () {
console.info('playing video');
video.play();
});
$('#videoModal').on('hide.bs.modal', function () {
console.info('pausing video');
video.pause();
});
});
</script>
Вау, спасибо большое, работает отлично! Еще один вопрос, если можно... знаете ли вы, можно ли сделать один скрипт, который применил бы это ко всем моим модальным окнам? У меня десятки модальных окон, поэтому, если бы я мог не писать скрипт для каждого, было бы еще лучше.