我的网页中有 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>
我需要在单击链接时停止所有播放 iframe 视频Stop all videos。我怎样才能做到这一点？
试试这个方法
<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>
重新加载所有 iframe 只是为了阻止它们是一个糟糕的主意。您应该利用 HTML5 附带的功能。
不使用 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();
这将停止所有 YouTube 的 iframe 视频。
您可以使用这些消息关键字来启动/停止/暂停 youtube 嵌入的视频：
stopVideo
playVideo
pauseVideo
查看下面的链接以获取现场演示：
https://codepen.io/mcakir/pen/JpQpwm
PS-
YouTube URL 必须具有?enablejsapi=1查询参数才能使此解决方案起作用。
这应该停止在页面上的所有 iframe 中播放所有视频：
$("iframe").each(function() {
var src= $(this).attr('src');
$(this).attr('src',src);
});
停止意味着暂停并将视频设置为时间 0：
$('iframe').contents().find('video').each(function ()
{
this.currentTime = 0;
this.pause();
});
这个 jquery 代码将完全做到这一点。
无需替换 src 属性并再次重新加载视频。
我在项目中使用的小功能：
function pauseAllVideos()
{
$('iframe').contents().find('video').each(function ()
{
this.pause();
});
$('video').each(function ()
{
this.pause();
});
}
这是 2019 年的原生 Javascript 解决方案
const videos = document.querySelectorAll('iframe')
const close = document.querySelector('.close')
close.addEventListener('click', () => {
videos.forEach(i => {
const source = i.src
i.src = ''
i.src = source
})
})