Bootstrap modal - 使用 Safari 和 Chrome 停止视频的问题答案

【问题标题】：Bootstrap modal - Issue with stopping of video with Safari and ChromeBootstrap modal - 使用 Safari 和 Chrome 停止视频的问题
【发布时间】：2019-05-28 13:07:28
【问题描述】：

我在我的 html 页面中添加了以下代码，以在关闭模态视频时停止播放它：

<head> 
<script type="text/javascript">
    $(document).ready(function(){
       $('.modal').each(function(){
           var src = $(this).find('video').attr('src');

       $(this).on('click', function(){

           $(this).find('video').attr('src', '');
           $(this).find('video').attr('src', src);

        });
    });
});
</script>
</head>

<body>
<div class="modal fade" role="dialog">
    <div class="modal-dialog"> 
          <div class="modal-content">
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title">My title</h4>
               </div>
           <div class="modal-body">
               <div> <video controls width="100%"> <source src="videos/myvideo.mp4" type="video/mp4"></video> </div>
           </div>
           <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           </div>
         </div>
    </div>
 </div> 
</body>

它适用于 Firefox，但不适用于 Chrome 和 Safari。在 Firefox 上，关闭模式时会删除 src 链接（很好）。在 Chrome 上，当我单击模式内视频的播放栏时，Chrome 会启动视频，但如果我单击视频本身（应该只是暂停/播放它），它会删除 src 链接，因此视频会变黑。 Safari 在单击播放后立即删除 src 链接（因此视频永远不会开始）。我的首要任务是在 Firefox 和 Safari 上进行这项工作。

有人知道我该如何解决这个问题吗？

（注意：我尝试了其他代码来使视频在模态关闭时停止，看看它是否可以更好地与 Safari 和 Chrome 配合使用（例如，这里 Twitter Bootstrap Modal stop Youtube video）但我无法制作视频完全停止。所以我在这个例子中使用的那个是唯一一个在关闭时正确阻止我的视频播放的那个——至少在 Firefox 中是这样。）

【问题讨论】：

标签： javascript html browser bootstrap-modal

【解决方案1】：

首先，在模态框添加id="videoModal"，在视频标签中添加id="video"。

然后对模式使用引导显示和隐藏事件侦听器，对视频元素使用 play() 和 pause()，如下所示：

<script type="text/javascript">
 $(document).ready(function(){
    var video = document.getElementById('video');
    $('#videoModal').on('shown.bs.modal', function () {
        console.log('playing video');
        video.play();
    });
    $('#videoModal').on('hide.bs.modal', function () {
        console.log('pausing video');
        video.pause();
    });
});
</script>

【讨论】：

哇，非常感谢，它运行良好！只是另一个问题，如果我可以......你知道是否有可能做一个脚本，将它应用到我所有的模态？我有几十个模态，所以如果我可以避免为每个模态编写脚本，那就更好了。