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

您只需要停止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，因此每次关闭模式时，他们只会删除视频网址.attr('src', '');

Answer 3

嗯，你可以简单地删除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 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视频并将其重置，而不是将所有iframe视频重置为第一个视频。

Answer 5

**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 6

晚了聚会，但是有些人将来可能会觉得有用。在我的情况下，我很难做到这一点，因为视频是从div嵌入video中带有iframe元素的视频，而不是直接嵌入在src中iframe元素，如下所示：

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

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

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

它还会暂停视频，而不是按照接受的答案中的建议刷新网址或用相同的值替换src属性。

Answer 7

//简单干净

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

$（id / class +'iframe'）。attr（'src'，$（'iframe'）。attr（'src'））;

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

7 个答案: