Html 模式关闭时停止在 iframe 中播放视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40211944/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop playing video in iframe when modal is closed
提问by Michelle Ashwini
I have a play image with text 'Watch video', when clicked would open up a bootstrap modal window to play the video i put in. I've got the moday view to work. The problem I'm having with this is when I play the video and exit the screen while it is being played, the video continues to play in the background. If I click on the Watch Video link again, it would play the video from where it stopped off previously.
我有一个带有文本“观看视频”的播放图像，点击时会打开一个引导模式窗口来播放我输入的视频。我有今天的视图可以工作。我遇到的问题是当我播放视频并在播放时退出屏幕时，视频继续在后台播放。如果我再次单击“观看视频”链接，它将从之前停止的位置播放视频。
I need to have the video stop when the modal window is closed. It needs to then play the video from the start the next time I click the "Watch video" link. I'm still new to this and am not sure how to do this. Anyone know how I can achieve this?
当模态窗口关闭时，我需要停止视频。下次我单击“观看视频”链接时，它需要从头开始播放视频。我还是个新手，不知道该怎么做。有谁知道我怎么能做到这一点？
<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>
回答by Michelle Ashwini
I managed to get it to work with the link that @Leo provided. But it was slow as it reloaded the frame everytime the link was clicked. Tried @guillesalazar solution from Twitter Bootstrap Modal stop Youtube videoand it worked perfectly. This was the solution I used.
我设法让它与@Leo 提供的链接一起工作。但是每次单击链接时它都会重新加载框架，因此速度很慢。从Twitter Bootstrap Modal 中尝试@guillesalazar 解决方案停止 Youtube 视频，它运行良好。这是我使用的解决方案。
$("#myModal").on('hidden.bs.modal', function (e) {
$("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});
回答by Kazi Hasan Ali
Well you can simply remove the src of the iframe and the put back again like ;
好吧，您可以简单地删除 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>
now the Jquery part
现在是 Jquery 部分
function stopVideo(id){
var src = $j('iframe.'+id).attr('src');
$j('iframe.'+id).attr('src','');
$j('iframe.'+id).attr('src',src);
}
回答by sandman8888
For multiple modals with iframe videos, here is the solution:
对于带有 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'));
});
})
On modal close, it goes through all the iframe videos and resets them instead of resetting all of them to the first video.
在模式关闭时，它会遍历所有 iframe 视频并重置它们，而不是将它们全部重置为第一个视频。
回答by Leonardo Lanchas
You just need to stop the video on the hidden.bs.modalevent:
您只需要停止有关hidden.bs.modal事件的视频：
$('#myModal').on('hidden.bs.modal', function () {
player.stopVideo();
// or jQuery
$('#playerID').get(0).stopVideo();
// or remove video url
$('playerID').attr('src', '');
})
Here is a very similar (if not equal) to what you need to do: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal
这是与您需要做的非常相似（如果不相等）：http: //www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal
They do not use the iframe API so everytime they close the modal they just delete the video url .attr('src', '');
他们不使用 iframe API，所以每次他们关闭模式时，他们只是删除视频网址 .attr('src', '');
回答by sam ruben
// Simple and clean
// 简单干净
Try using class or ID before Iframe to refresh/reload the particular video. Otherwise, it will reload all iframe source.
尝试在 Iframe 之前使用类或 ID 来刷新/重新加载特定视频。否则，它将重新加载所有 iframe 源。
$( id/class + 'iframe').attr('src', $('iframe').attr('src'));
$( id/class + 'iframe').attr('src', $('iframe').attr('src'));
回答by priya ghule
**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"));
});
}
