停用嵌入式YouTube iframe？

Question

停用嵌入式YouTube iframe？

71

我在我的网站上使用YouTube iframe来嵌入视频。

<iframe width="100%" height="443" class="yvideo" id="p1QgNF6J1h0"
              src="http://www.youtube.com/embed/p1QgNF6J1h0?rel=0&controls=0&hd=1&showinfo=0&enablejsapi=1"
              frameborder="0" allowfullscreen>
</iframe>

我有多个视频在同一页上。

我想用JavaScript或其他方法，在单击按钮时停止所有视频或其中一个视频。

这可行吗？

更新：

我尝试了Talvi Watia所说的方法，使用了：

$('#myStopClickButton').click(function(){
  $('.yvideo').each(function(){
    $(this).stopVideo();
  });
});

我收到：

Uncaught TypeError: Object [object Object] has no method 'stopVideo'

- Danpe

18个回答

47

如果有人仍在寻找答案，我解决的方法如下：

$("#photos").on("hide",function(){
    var leg=$('.videoPlayer').attr("src");
    $('.videoPlayer').attr("src",leg);
});

#photos是模态框的ID，.videoPlayer是iframe的类。基本上它刷新src属性（并停止播放视频）。所以，

    $('#myStopClickButton').click(function(){
      $('.yvideo').each(function(){
        var el_src = $(this).attr("src");
        $(this).attr("src",el_src);
      });
    });

应该能解决问题。

- Jax297

2

我认为当动态加载 iframe 时，这是最佳选择。 - Ionut Necula

一次不错的黑客攻击。鼓掌。 - MastaBaba

1

哈！YouTube，你被打败了！聪明人得分了！ - Shah Abaz Khan

1

是的！谢谢。这个选项在2019年仍然可用。而且，它不依赖于YouTube API。 - E Benzle

似乎在微软Edge浏览器上失败了。 - chifliiiii

显示剩余4条评论

24

这里有一个CodePen链接，它对我很有效。

我正在寻找最简单的解决方案，将YT视频嵌入到iframe中，我觉得这就是。

我需要的是把视频放在模态窗口中，并在关闭时停止播放。

这是代码：（来源：https://codepen.io/anon/pen/GBjqQr）

    <div><a href="#" class="play-video">Play Video</a></div>
    <div><a href="#" class="stop-video">Stop Video</a></div>
    <div><a href="#" class="pause-video">Pause Video</a></div>

    <iframe class="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/glEiPXAYE-U?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>

$('a.play-video').click(function(){
    $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
});

$('a.stop-video').click(function(){
    $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});

$('a.pause-video').click(function(){
    $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
});

此外，如果您希望它在尚未可见的DOM对象（例如模态窗口）中自动播放，如果我使用与显示模态的按钮相同的按钮来播放视频，则无法正常工作，因此我使用了THIS：

https://www.youtube.com/embed/EzAGZCPSOfg?autoplay=1&enablejsapi=1&version=3&playerapiid=ytplayer

注意：在?autoplay=1&的位置以及在下一个属性之前使用“&”，以使暂停继续工作。

- namretiolnave

所以，使用 autoplay=1，其中的 1 表示它不应该暂停（而是自动播放），你是在说如果在其后面加上 & 它就不会自动播放并暂停视频吗？ - TrySpace

最简单的方法停止播放器，不需要使用YouTube的所有JS和API，谢谢！ - okarpov

5

我认为它不再起作用了，至少在Chrome 96上是这样，我也在Firefox 89.0.2中进行了检查，它可以工作，但在Chrome上不行 :( - Michał Tkaczyk

1

刚试了一下，好像不起作用。可能有什么新的变化。哈哈。 - pacanga

请注意：在 URL 中需要添加属性“enablejsapi=1”。 - Boris Adamyan

20

你可能需要查看YouTube JavaScript API参考文档。

当你在页面上嵌入视频时，需要传递此参数：

http://www.youtube.com/v/VIDEO_ID?version=3&enablejsapi=1

如果你想要一个停止所有视频的按钮，你可以设置一个 JavaScript 程序来循环遍历你的视频并停止它们：

player.stopVideo()

这需要跟踪页面上每个视频的所有页面ID。更简单的方法可能是创建一个类，然后使用jQuery.each。

$('#myStopClickButton').click(function(){
  $('.myVideoClass').each(function(){
    $(this).stopVideo();
  });
});

- Talvi Watia

11

我得到了一个错误信息：Uncaught TypeError: 对象[object Object]没有stopVideo方法。 - Danpe

https://dev59.com/8Gox5IYBdhLWcg3wSCVW 这里有关于跨站点保护错误的信息（通常在Chrome中是一个大问题）。至于第二个问题，您需要将.myVideoClass更改为嵌入式视频所附加的类。例如.yvideo。 - Talvi Watia

1

@Danpe 看起来这里可以找到一个完整的工作示例：https://dev59.com/4Gs05IYBdhLWcg3wG-NR - Talvi Watia

stopVideo是本地方法，不是jQuery方法，因此不要用jQuery包装你的iframe。我还建议使用<object>标签而不是<iframe>来嵌入YT视频。 - Eskat0n

1

这对我没用，相反这个小工具起了作用：https://jsfiddle.net/MadLittleMods/3J2wT，使用以下代码

$('#popup-youtube-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');

- djmzfKnm

显示剩余6条评论

18

APIs很混乱，因为它们经常变化。这种纯JavaScript的方法对我有用：

 <div id="divScope" class="boom-lightbox" style="display: none;">
    <iframe id="ytplayer" width="720" height="405"   src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen>    </iframe>
  </div>  

//if I want i can set scope to a specific region
var myScope = document.getElementById('divScope');      
//otherwise set scope as the entire document
//var myScope = document;

//if there is an iframe inside maybe embedded multimedia video/audio, we should reload so it stops playing
var iframes = myScope.getElementsByTagName("iframe");
if (iframes != null) {
    for (var i = 0; i < iframes.length; i++) {
        iframes[i].src = iframes[i].src; //causes a reload so it stops playing, music, video, etc.
    }
}

- JJ_Coder4Hire

这是我正在寻找的一个近似解决方案。现在需要检测它是否正在播放，才能尝试重置。否则会导致视频闪烁。 - Debbie Kurth

14

Talvi的回答可能仍然有效，但是Youtube Javascript API已被标记为过时。现在您应该使用更新的Youtube IFrame API。

文档提供了一些实现视频嵌入的方法，但对于您的目标，您需要包含以下内容：

//load the IFrame Player API code asynchronously
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//will be youtube player references once API is loaded
var players = [];

//gets called once the player API has loaded
function onYouTubeIframeAPIReady() {
    $('.myiframeclass').each(function() {
        var frame = $(this);

        //create each instance using the individual iframe id
        var player = new YT.Player(frame.attr('id'));

        players.push(player);
    });
}

//global stop button click handler
$('#mybutton').click(function(){

    //loop through each Youtube player instance and call stopVideo()
    for (var i in players) {
        var player = players[i];
        player.stopVideo();
    }
});

- HotN

8

不能简单地高估这篇文章和回答，感谢原帖作者和帮助者。我的解决方案仅涉及视频ID的交换：

<div style="pointer-events: none;">
    <iframe id="myVideo" src="https://www.youtube.com/embed/video_id?rel=0&modestbranding=1&fs=0&controls=0&autoplay=1&showinfo=0&version=3&enablejsapi=1" width="560" height="315" frameborder="0"></iframe> </div>

    <button id="play">PLAY</button>

    <button id="pause">PAUSE</button>


    <script>
        $('#play').click(function() {
            $('#myVideo').each(function(){ 
                var frame = document.getElementById("myVideo");
                frame.contentWindow.postMessage(
                    '{"event":"command","func":"playVideo","args":""}', 
                    '*'); 
            });
        });

        $('#pause').click(function() {
            $('#myVideo').each(function(){ 
                var frame = document.getElementById("myVideo");
                frame.contentWindow.postMessage(
                  '{"event":"command","func":"pauseVideo","args":""}',
                  '*'); 
            });
        });
    </script>

- Aleksander Dudek

1

目前为止完美无缺 - kneidels

大家好，这个解决方案很棒，但它会使视频失去其本来的互动性，我该如何仍然使用原生的YouTube视频按钮呢？谢谢。 - GitHunter0

8

最简单的方法是：

var frame = document.getElementById("iframeid");
frame.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

- imal hasaranga perera

4

对于带有视频的 Twitter Bootstrap 模态框/弹出窗口，以下方法适用于我：

$('.modal.stop-video-on-close').on('hidden.bs.modal', function(e) {
  $('.video-to-stop', this).each(function() {
    this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="vid" class="modal stop-video-on-close"
  tabindex="-1" role="dialog" aria-labelledby="Title">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Title</h4>
      </div>
      <div class="modal-body">
       <iframe class="video-to-stop center-block"
        src="https://www.youtube.com/embed/3q4LzDPK6ps?enablejsapi=1&rel=0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        frameborder="0" allowfullscreen>
       </iframe>
      </div>
      <div class="modal-footer">
        <button class="btn btn-danger waves-effect waves-light"
          data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-success" data-toggle="modal"
 data-target="#vid" type="button">Open video modal</button>

基于Marco的回答，请注意我只需要在视频URL中添加enablejsapi=1参数（rel=0仅用于不显示末尾的相关视频）。 JS postMessage函数是完成所有重要工作的函数，它实际上停止了视频。

由于请求权限的原因，代码片段可能不会显示视频，但是在普通浏览器中，这应该可以在2018年11月之后正常工作。

- CPHPython

4

这是我找到的最简单直接的解决方案。

非常重要！在iframe的“src”属性中添加?enablejsapi=1参数。例如：scr="https://youtube.com/embed/VIDEO_ID?enablejsapi=1
var iframe = document.querySelector('iframe'); 或者其他获得元素的方式。
iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

本质上，这段代码是获取嵌套在<iframe>元素中的Youtube播放器对象。请参见MDN上的HTMLIFrameElement.contentWindow和postMessage()。最后，谷歌提供了一个Javascript API参考文档，其中包含所有可用函数的说明。

- MegaSpaceHamlet

谢谢您告诉我要添加 ?enablejsapi=1。没有它就无法正常工作。 - G.F.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marco Faustinelli · Accepted Answer

不幸的是，这些API很快就会发生变化。截至2015年5月，由于播放器对象没有stopVideo方法，提出的解决方案已经不再起作用。

可以在此页面 (1) 找到可靠的解决方案，它使用了：

<iframe id="youtube_player" class="yt_player_iframe" width="640" height="360" src="http://www.youtube.com/embed/aHUBlv5_K8Y?enablejsapi=1&version=3&playerapiid=ytplayer"  allowfullscreen="true" allowscriptaccess="always" frameborder="0"></iframe>

并且以下是JS/jQuery代码：

$('.yt_player_iframe').each(function(){
  this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
});