关闭时停止 Bootstrap 4 模态视频答案

【问题标题】：stop Bootstrap 4 modal video when closed关闭时停止 Bootstrap 4 模态视频
【发布时间】：2021-01-13 09:06:28
【问题描述】：

我已经编写了以下代码，它们执行以下操作：在页面上显示图像。单击图像时，打开一个包含可播放视频的模式。当用户在模态框外单击时，关闭模态框。当模态关闭时停止播放视频。但视频不会停止播放。有什么帮助吗？我是编码新手。

                <!--Modal video-->
<img src="img/myimg.png" data-toggle="modal" data-target="#videoModal" />

  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body p-0">
          <video controls width="100%" preload="auto" class="embed-responsive embed-responsive-1by1">
            <source src="vids/myvideo.mp4" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>

【问题讨论】：

标签： bootstrap-4 modal-dialog html5-video bootstrap-modal

【解决方案1】：

您可以在hide.bs.modal 上.pause() 您的视频（即：当模态已关闭时）：

$('#videoModal').on('hide.bs.modal', function(e) {
    this.querySelector('video').pause();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<img src="img/myimg.png" data-toggle="modal" data-target="#videoModal" />

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body p-0">
                <video controls width="100%" preload="auto" class="embed-responsive embed-responsive-1by1">
                    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
                </video>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

这是我处理模式中加载的任何类型内容的方式。

点击外部模式关闭视频（或内容） - BOOTSTRAP 4

$(document).click(function(event) {
    if (!$(event.target).is("#YOUR-MODAL-ID")) {
        alert('I just clicked inside the modal');
        //does not pop up on embeded elements
    }
    else {
        --> Basically anything you want to stop playing when clicking outside the modal goes here
        --> be sure to call the right statement for whatever is inside the modal

        like:
        - var oldPlayer = document.getElementById('ID-OF-PLAYER-WRAPPER');
        - videojs(oldPlayer).dispose();
        - $("#wrapper-div-id iframe").attr("src", '');
    }
});

【讨论】：