Bootstrap модальный - проблема с остановкой видео с Safari и Chrome - PullRequest
Новая
       11

Bootstrap модальный - проблема с остановкой видео с Safari и Chrome

0 голосов
/ 28 мая 2019

Я добавил следующий код на мою 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">&times;</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 Модальная остановка видео Youtube ) но я не смог вообще остановить видео, поэтому в этом примере я использую единственный, который корректно останавливает воспроизведение моего видео при закрытии - по крайней мере, в Firefox.)

1 Ответ

0 голосов
/ 28 мая 2019

Прежде всего, добавьте id="videoModal" к модалу и id="video" к тегу видео.

Затем используйте загрузчик покажите и спрячьте прослушиватели событий для модального окна, и используйте play () и pause () для элемента видео, например: 

<script type="text/javascript">
 $(document).ready(function(){
    var video = document.getElementById('video');
    $('#videoModal').on('shown.bs.modal', function () {
        console.log('playing video');
        video.play();
    });
    $('#videoModal').on('hide.bs.modal', function () {
        console.log('pausing video');
        video.pause();
    });
});
</script>
...