Question

我已将以下代码添加到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中是这样的。）

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

引导模式-使用Safari和Chrome停止视频的问题

1 个答案: