点击链接javascript停止所有播放iframe视频

Question

我的网页上有一个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.我怎样才能做到这一点？

Answer 1

试试这个,

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

Answer 2

这应该会停止在页面上所有iframe中播放的所有视频:

$("iframe").each(function() { 
        var src= $(this).attr('src');
        $(this).attr('src',src);  
});

Answer 3

重新加载所有 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查询参数才能使此解决方案起作用。

Answer 4

停止意味着暂停并将视频设置为时间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();
        });
    }

Answer 5

这是 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
   })
})