Автовоспроизведение видео в модальном окне Bootstrap

Question

У меня есть модальное окно Bootstrap 3.3.7, которое содержит видео с помощью тега HTML5, например.

<video controls autoplay> 
    <source src="video.mp4" type="video/mp4"> 
    Your browser does not support the video tag. 
</video> 

Проблема в том, что когда мой веб-страница загружается, начинается воспроизведение (даже если он не может «видеть», так как модальный закрыт, звук играет).

Я понимаю, что тег autoplay делает это. Но как я могу получить видео для автовоспроизведения при загрузке модала? И остановитесь, когда модаль закрыт?

Answer 1

Вы можете использовать shown.bs.modal и hidden.bs.modal события для запуска некоторого яваскрипта кода, когда модальный показано/скрыто:

$('#myModal').on('shown.bs.modal', function() { 
 
    $('#video1')[0].play(); 
 
}) 
 
$('#myModal').on('hidden.bs.modal', function() { 
 
    $('#video1')[0].pause(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <video controls id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;"> 
 
      <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4"> 
 
      Your browser doesn't support HTML5 video tag. 
 
     </video> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Вы должны использовать яваскрипт функцию для запуска видео и назвать его, когда модальный загружен: (и удалить атрибут автовоспроизведения) Вот пример:

var vid = document.getElementById("myVideo"); 
function playVid() { vid.play(); } 

Answer 3

сильный текст ×

run my snippet in the botonm

$(document).ready(function(){ 
 

 
autoPlayYouTubeModal(); 
 

 
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG 
 
function autoPlayYouTubeModal() { 
 
    var trigger = $("body").find('[data-toggle="modal"]'); 
 
    trigger.click(function() { 
 
     var theModal = $(this).data("target"), 
 
      videoSRC = $(this).attr("data-theVideo"), 
 
      videoSRCauto = videoSRC + "?autoplay=1"; 
 
     $(theModal + ' iframe').attr('src', videoSRCauto); 
 
     $(theModal + ' button.close').click(function() { 
 
      $(theModal + ' iframe').attr('src', videoSRC); 
 
     }); 
 
     $('.modal').click(function() { 
 
      $(theModal + ' iframe').attr('src', videoSRC); 
 
     }); 
 
    //video play on click 
 
    $('.video-player-main iframe')[0].contentWindow.postMessage('{func":"playVideo":""}', '*'); 
 
    }); 
 
} 
 
});

.btn{margin-left:20%;margin-top:20%}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="video-player-wrapper"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="video-player-main"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal1" data-theVideo="https://www.youtube.com/embed/XsI9F3n-Bog">Open Model</a> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
</div> 
 

 

 
<div class="modal fade" id="videoModal1" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> 
 
\t <div class="modal-dialog"> 
 
\t \t <div class="modal-content"> 
 
\t \t \t <div class="modal-body"> 
 
\t \t \t \t <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
\t \t \t \t <div> 
 
\t \t \t \t \t <iframe width="100%" height="350" src="" allowfullscreen></iframe> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>