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

ou6hu8tu  于 2023-01-03  发布在  其他
关注(0)|答案(7)|浏览(272)

我有一个带有文本“观看视频”的播放图像,当单击时将打开引导模式窗口来播放我放入的视频。我使用了今天视图。我遇到的问题是,当我播放视频并在播放时退出屏幕时,视频会继续在后台播放。如果我再次单击观看视频链接,它将从它先前停止的地方播放视频。
我需要有视频停止时,模态窗口关闭。它需要然后播放视频从开始时,我下一次点击“观看视频”链接。我仍然是新的,不知道如何做到这一点。有人知道我如何才能做到这一点?

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

olmpazwi1#

我设法让它与@Leo提供的链接一起工作。但它很慢,因为每次点击链接时它都会重新加载框架。尝试Twitter Bootstrap Modal stop Youtube video中的@guillesalazar解决方案,它工作得很完美。这是我使用的解决方案。

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

4bbkushb2#

你可以简单地删除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);

}
gt0wga4j

gt0wga4j3#

您只需停止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', '');

ztmd8pv5

ztmd8pv54#

对于带有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视频并重置它们,而不是将所有视频重置为第一个视频。

nfeuvbwi

nfeuvbwi5#

//简单干净
尝试在Iframe之前使用class或ID来刷新/重新加载特定的视频。否则,它将重新加载所有iframe源代码。
$(标识/类+“内嵌框架”).属性(“源代码”,$(“内嵌框架”).属性(“源代码”));

w3nuxt5m

w3nuxt5m6#

**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"));
        });
    }
apeeds0o

apeeds0o7#

晚了,但有些人可能会发现这在未来有用。在我的情况下,我有一个真实的的斗争实现这一点,因为视频是从一个divvideo元素在iframe中嵌入,而不是与src直接在iframe元素中,如下所示:

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

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

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

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

相关问题