自動播放模式窗口中的Bootstrap模式窗口中的視頻

我有一個Bootstrap 3.3.7模式窗口，其中包含使用HTML5視頻標記的視頻。自動播放模式窗口中的Bootstrap模式窗口中的視頻

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

這種麻煩的是，當我加載網頁，視頻開始播放（即使它不能「看到」，因爲模式是封閉的，聲音也扮演）。

據我所知，autoplay標籤正在這樣做。但是，如何在加載模式時自動播放視頻？當模式關閉時停止？

來源

2016-11-29 Andy

您可以使用shown.bs.modal和hidden.bs.modal事件來運行一些JavaScript代碼時，將顯示模態/隱藏的：

$('#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>

來源

2016-11-29 14:49:41 Dekel

你應該使用JavaScript函數來啓動視頻並把它加載模式時：（並刪除自動播放屬性）下面是一個例子：

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

來源

2016-11-29 14:48:09 Okba

-1

強大的文本 ×

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>

來源

2016-11-29 15:26:51

自動播放模式窗口中的Bootstrap模式窗口中的視頻

回答

相關問題