单击链接时停止所有播放 iframe 视频 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13598423/
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 all playing iframe videos on click a link javascript
提问by Sam Hanson
I have a list of iframe videos in my webpage.
我的网页中有 iframe 视频列表。
<iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe>
<iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe>
<iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe>
<a href="#" class="close">Stop all videos</a>
I need to stop all playing iframe videos on click the link Stop all videos. How can i do that?
我需要在单击链接时停止所有播放 iframe 视频Stop all videos。我怎样才能做到这一点？
回答by Swarne27
Try this way,
试试这个方法
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>
回答by user163861
This should stop all videos playing in all iframes on the page:
这应该停止在页面上的所有 iframe 中播放所有视频：
$("iframe").each(function() {
var src= $(this).attr('src');
$(this).attr('src',src);
});
回答by Must Ckr
Reloading all iframes just to stop them is a terrible idea. You should get advantage of what comes with HTML5.
重新加载所有 iframe 只是为了阻止它们是一个糟糕的主意。您应该利用 HTML5 附带的功能。
Without using YouTube's iframe_API library; you can simply use:
不使用 YouTube 的 iframe_API 库；你可以简单地使用：
var stopAllYouTubeVideos = () => {
var iframes = document.querySelectorAll('iframe');
Array.prototype.forEach.call(iframes, iframe => {
iframe.contentWindow.postMessage(JSON.stringify({ event: 'command',
func: 'stopVideo' }), '*');
});
}
stopAllYouTubeVideos();
which will stop all YouTubes iframe videos.
这将停止所有 YouTube 的 iframe 视频。
You can use these message keywords to start/stop/pause youtube embdded videos:
您可以使用这些消息关键字来启动/停止/暂停 youtube 嵌入视频：
stopVideo
playVideo
pauseVideo
Check out the link below for the live demo:
查看下面的链接以获取现场演示：
https://codepen.io/mcakir/pen/JpQpwm
https://codepen.io/mcakir/pen/JpQpwm
PS-YouTube URL must have ?enablejsapi=1query parameter to make this solution work.
PS- YouTube URL 必须具有?enablejsapi=1查询参数才能使此解决方案起作用。
回答by Kai Noack
Stopping means pausing and setting the video to time 0:
停止意味着暂停并将视频设置为时间 0：
$('iframe').contents().find('video').each(function ()
{
this.currentTime = 0;
this.pause();
});
This jquery code will do exactly that.
这个 jquery 代码将完全做到这一点。
No need to replace the src attribute and reload the video again.
无需替换 src 属性并再次重新加载视频。
Little function that I am using in my project:
我在我的项目中使用的小功能：
function pauseAllVideos()
{
$('iframe').contents().find('video').each(function ()
{
this.pause();
});
$('video').each(function ()
{
this.pause();
});
}
回答by Yash
I edited the above code a little and the following worked for me.......
我稍微编辑了上面的代码，以下对我有用.......
<script>
function stop(){<br/>
var iframe = document.getElementById('myvid');<br/>
var iframe1 = document.getElementById('myvid1');<br/>
var iframe2 = document.getElementById('myvid2');<br/>
iframe.src = iframe.src;<br/>
iframe1.src=iframe1.src;<br/>
iframe2.src=iframe2.src;<br/>
}<br/>
</script>
回答by krunal
$("#close").click(function(){
$("#videoContainer")[0].pause();
});
回答by Ludolfyn
Here's a vanilla Javascript solution in 2019
这是 2019 年的原生 Javascript 解决方案
const videos = document.querySelectorAll('iframe');
const close = document.querySelector('.close');
close.addEventListener('click', () => {
videos.forEach(i => {
let source = i.src;
i.src = '';
i.src = source;
});
});
回答by imbatman
You can modify this code with an iteration
您可以通过迭代修改此代码
/**
* Stop an iframe or HTML5 <video> from playing
* @param {Element} element The element that contains the video
*/
var stopVideo = function ( element ) {
var iframe = element.querySelector( 'iframe');
var video = element.querySelector( 'video' );
if ( iframe ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
if ( video ) {
video.pause();
}
};
OWNER: https://gist.github.com/cferdinandi/9044694also posted here (by me): how to destroy bootstrap modal window completely?
所有者：https: //gist.github.com/cferdinandi/9044694也张贴在这里（由我）：如何完全销毁引导模式窗口？
回答by Murali Prasanth
Reload all iframes again to stop videos
再次重新加载所有 iframe 以停止视频
<a href="#" class="close" onclick="stop();">Stop all videos</a>
function stop(){
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;
}
