Bootstrap：如何在模式关闭后停止播放视频

Question

我使用引导模式窗口来显示视频，但是当我关闭视频时，它不会停止播放。即它仍然在后台播放。 如何从当模式被关闭

这里停止播放视频下面是我的代码：

 <ul class="fa-ul"> 
         <li><i class="fa fa-video-camera" aria-hidden="true"></i><a href="#" data-toggle="modal" data-target=".video1"> Video 1</a></li> 
    <li><i class="fa fa-video-camera" aria-hidden="true"></i><a href="#" data-toggle="modal" data-target=".video2"> Video 2</a></li> 

        </ul> 



<!---Modal1 --> 
     <div class="modal fade video1" id="advSearchModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog modal-lg" 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="exampleModalLabel">Video 5</h4> 
      </div> 
      <div class="modal-body"> 

       <div class="row"> 
    <div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube"> <div class="embed-responsive embed-responsive-16by9"> <video controls class="embed-responsive-item" src="videos/Chapters/Chapter%205.mp4" allowfullscreen=""></video> </div> </div> 

       </div> 

      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <!-- <button type="button" class="btn btn-primary">Send message</button> --> 
      </div> 
     </div> 
     </div> 
    </div> 


Modal 2 



    <!-- Modal --> 
    <div class="modal fade video2" id="advSearchModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog modal-lg" 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="exampleModalLabel">Video 1</h4> 
     </div> 
     <div class="modal-body"> 

      <div class="row"> 
       <div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube"> 
        <div class="embed-responsive embed-responsive-16by9"> 
         <video class="embed-responsive-item" controls src="/videos/Chapters/Chapter%201.mp4" allowfullscreen=""> 
         </video> 
        </div> 
       </div> 

      </div> 

     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <!-- <button type="button" class="btn btn-primary">Send message</button> --> 
     </div> 
    </div> 
    </div> 
</div> 


    <!-- End Modal --> 

Answer 1

试试这个：

<script> 
jQuery('#advSearchModal').on('hidden.bs.modal', function (e) { 
    // do something... 
    jQuery('#advSearchModal video').attr("src", jQuery("#advSearchModal video").attr("src")); 
}); 
</script> 

来源：https://coolestguidesontheplanet.com/stop-video-playing-bootstrap-modal-closed/