模态关闭时停止在 iframe 中播放视频

Question

我有一个带有文本“观看视频”的播放图像，单击时会打开一个引导模式窗口来播放我输入的视频。我已经开始使用 moday 视图。我遇到的问题是当我播放视频并在播放时退出屏幕时，视频继续在后台播放。如果我再次单击“观看视频”链接，它将从之前停止的位置播放视频。

我需要在模态窗口关闭时停止视频。下次我单击“观看视频”链接时，它需要从头开始播放视频。我还是新手，不知道该怎么做。有谁知道我怎么能做到这一点？

<div class="col-md-12 f-play" data-toggle="modal" data-target="#myModal">
    <img class="f-play-image" src="images/play.svg" data-target="#myModal" data-video-fullscreen="">Watch video
</div>

<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7pvci1hwAx8?" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
                 </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>

        </div>
    </div>
</div>

Answer 1

我设法让它与@Leo 提供的链接一起工作。但是它很慢，因为每次单击链接时它都会重新加载框架。尝试了来自Twitter Bootstrap Modal stop Youtube video 的@guillesalazar 解决方案，它运行良好。这是我使用的解决方案。

$("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

Answer 2

好吧，您可以简单地删除 iframe 的 src 并再次放回去，例如 ;

 <iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf  ?>" w></iframe>
 <span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton"  data-dismiss="modal"></span>

现在是 Jquery 部分

function stopVideo(id){
  var src = $j('iframe.'+id).attr('src');
  $j('iframe.'+id).attr('src','');
  $j('iframe.'+id).attr('src',src);

}

Answer 3

您只需要在hidden.bs.modal 事件上停止视频：

$('#myModal').on('hidden.bs.modal', function () {
    player.stopVideo();
   // or jQuery
   $('#playerID').get(0).stopVideo();
   // or remove video url
   $('playerID').attr('src', '');
})

这与您需要做的非常相似（如果不相等）：http://www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal

他们不使用 iframe API，所以每次他们关闭模式时，他们只是删除视频 url .attr('src', '');

Answer 4

对于带有 iframe 视频的多个模态，这里是解决方案：

$('#myModal').on('hidden.bs.modal', function(e) {
  var $iframes = $(e.target).find('iframe');
  $iframes.each(function(index, iframe){
  $(iframe).attr('src', $(iframe).attr('src'));
  });
})

在模态关闭时，它会遍历所有 iframe 视频并重置它们，而不是将它们全部重置为第一个视频。

Answer 5

//简单干净

尝试在 Iframe 之前使用类或 ID 来刷新/重新加载特定视频。否则，它将重新加载所有 iframe 源。

$(id/class + 'iframe').attr('src', $('iframe').attr('src'));

Answer 6

**If you want to open modal with iframe and remove on close best and short answer**

 test = function (){
        $('#test_tutorial').modal('show').on('hidden.bs.modal', function (e) {
            $("#test_tutorial iframe").attr("src", "");
        }).on('show.bs.modal', function (e) {
            $("#test_tutorial iframe").attr("src", $("#test
    _tutorial iframe").attr("data-src"));
        });
    }

Answer 7

聚会迟到了，但有些人将来可能会发现这很有用。就我而言，由于视频是从div 中嵌入video 元素的iframe，而不是直接在iframe 元素中的src，因此我很难实现这一点，如下所示：

<iframe>
  <div class="videoContainer">
    <video src="#"></video>
  </div>
</iframe>

我用以下方法解决了这个问题：

$('#myModal').on('hidden.bs.modal', function() {
  $('iframe').contents().find('video')[0].pause();
});

它还会暂停视频，而不是刷新 url/用相同的值替换 src 属性，正如接受的答案中所建议的那样。