我有一个带有文本“观看视频”的播放图像,当单击时将打开引导模式窗口来播放我放入的视频。我使用了今天视图。我遇到的问题是,当我播放视频并在播放时退出屏幕时,视频会继续在后台播放。如果我再次单击观看视频链接,它将从它先前停止的地方播放视频。
我需要有视频停止时,模态窗口关闭。它需要然后播放视频从开始时,我下一次点击“观看视频”链接。我仍然是新的,不知道如何做到这一点。有人知道我如何才能做到这一点?
<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>
7条答案
按热度按时间olmpazwi1#
我设法让它与@Leo提供的链接一起工作。但它很慢,因为每次点击链接时它都会重新加载框架。尝试Twitter Bootstrap Modal stop Youtube video中的@guillesalazar解决方案,它工作得很完美。这是我使用的解决方案。
4bbkushb2#
你可以简单地删除iframe的src,然后像这样放回去;
现在是Jquery部分
gt0wga4j3#
您只需停止
hidden.bs.modal
事件的视频:下面是一个非常类似(如果不相等),你需要做什么:http://www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal
他们不使用iframe API因此每次关闭模态时,他们只删除视频url
.attr('src', '');
ztmd8pv54#
对于带有iframe视频的多个模态,以下是解决方案:
在模式关闭时,它会遍历所有iframe视频并重置它们,而不是将所有视频重置为第一个视频。
nfeuvbwi5#
//简单干净
尝试在Iframe之前使用class或ID来刷新/重新加载特定的视频。否则,它将重新加载所有iframe源代码。
$(标识/类+“内嵌框架”).属性(“源代码”,$(“内嵌框架”).属性(“源代码”));
w3nuxt5m6#
apeeds0o7#
晚了,但有些人可能会发现这在未来有用。在我的情况下,我有一个真实的的斗争实现这一点,因为视频是从一个
div
与video
元素在iframe
中嵌入,而不是与src
直接在iframe
元素中,如下所示:我用以下方法解决了这个问题:
它还暂停视频,而不是刷新url/用相同的值替换src属性,就像接受的答案中建议的那样。