【问题标题】:Stop all playing iframe videos on click a link javascript单击链接 javascript 时停止所有播放 iframe 视频
【发布时间】:2024-04-20 00:05:02
【问题描述】:

我的网页中有一个 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>

我需要在点击链接Stop all videos 时停止播放所有 iframe 视频。我该怎么做?

【问题讨论】:

标签: javascript jquery video iframe


【解决方案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>

【讨论】:

  • 一切正常。但问题是重新加载所有视频需要很长时间。有没有其他方法或者我可以让重新加载更快?
  • iframe 速度较慢,因为浏览器会产生额外的开销。
  • 您的来源也来自外部网站
  • 好的。非常感谢。一项额外的帮助。如何查看视频是否处于播放状态的 iframe 视频状态?
  • 您需要使用 YouTube Player API Reference for iframe Embeds。在*.com/questions/8950146/… 中有一个很好的答案,谷歌对 API 的引用在这里developers.google.com/youtube/iframe_api_reference
【解决方案2】:

为了阻止它们而重新加载所有 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 查询参数才能使此解决方案有效。

【讨论】:

  • 太棒了,谢谢。在此页面上的所有解决方案中,只有这个有效且不会导致页面上其他动画闪烁。
  • 这是一个用于停止一个视频的衬里,它也适用于 MSIE:document.getElementById('_video').contentWindow.postMessage(JSON.stringify({ event: 'command', func: ' stopVideo' }), '*');
【解决方案3】:

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

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

【讨论】:

  • 完美此代码适用于页面上的不同视频。谢谢。
【解决方案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();
        });
    }

【讨论】:

  • 拒绝访问“文档”的权限
  • 它适用于我所有的项目。我已经添加了我上面使用的功能。
  • iframe 内容和应用必须在同一个域中!
  • 完美的脚本兄弟:D
  • 删除 src 并将其添加回来已经将视频重置为开始,
【解决方案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
   })
})

【讨论】:

  • 伟大而优雅的答案!
  • 为我在同一页面上的多个视频工作。
  • 它在带有 Bootstrap 轮播的 ReactJS 中运行良好。
【解决方案6】:

我稍微编辑了上面的代码,下面的代码对我有用.......

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

【讨论】:

    【解决方案7】:
    $("#close").click(function(){
      $("#videoContainer")[0].pause();
    });
    

    【讨论】:

      【解决方案8】:

      在 jQuery 中,您可以使用以下代码停止 iframe 或 html 视频
      这适用于同一页面上的单个或多个视频。

      var  videos = document.querySelectorAll('iframe');
       
      $(".video-modal .fa-times").on("click", function () {
              videos.forEach(i => {
                let source = i.src;
                i.src = '';
                i.src = source;
             });
              $(".video-modal").css("display", "none");
              return false;
          });
      
      })
      

      【讨论】:

      • 这实际上是最骇人听闻的(尽管唯一适用于 y 案例)。我陷入了一个循环,YT iframe apis 正在创建没有附加任何方法的播放器(playVideo、seekTo 等)。我回到普通的 iframe,似乎所有 postMessage 都被 youtube 阻止了
      【解决方案9】:

      重新加载所有 iframe 以停止视频

      <a href="#" class="close" onclick="stop();">Stop all videos</a>
      
      function stop(){
          var iframe = document.getElementById('youriframe');
          iframe.src = iframe.src;
      }
      

      【讨论】:

      • 它仅适用于单个视频。如果正在播放多个视频,则它不起作用。
      【解决方案10】:

      您可以通过迭代修改此代码

      /**
       * 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();
          }
      };
      

      所有者:https://gist.github.com/cferdinandi/9044694 也张贴在这里(由我):how to destroy bootstrap modal window completely?

      【讨论】: