Question

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

以下是我的代码：

      <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/

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

1 个答案: