停止嵌入youtube iframe？

Question

我正在使用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' 

Answer 1

不幸的是,这些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":""}', '*')
});

Answer 2

如果有人还在寻找答案,我就这样解决了:

$("#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);
      });
    });

应该做的伎俩.

Answer 3

您可能需要查看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();
  });
});

Answer 4

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

Answer 5

API很乱,因为它们不断变化.这种纯粹的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.
    }
}

Answer 6

有一个来自名为"CAPTAIN ANONYMOUS"的用户的codepen它对我有用 - 但是我必须给予它应有的信用 - 我在这里发布,因为我正在寻找在iframe中嵌入YT视频的最简单的解决方案.我觉得发布它会帮助别人花更少的时间搜索.

我需要的是让视频出现在模态窗口中,并在关闭时停止播放

所以这就是魔术: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对象中使用AUTOPLAY,例如模态窗口,如果我使用相同的按钮来播放我用来显示模态的视频,那么它将不起作用所以我使用了这个:

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

注意:？autoplay = 1&它放置的位置以及在下一个属性之前使用'&'以允许暂停继续工作.

Answer 7

最简单的方法是

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

Answer 8

一个人不能简单地高估这篇文章，并回答OP和助手。我与video_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>

Answer 9

这是我发现的最直接的解决方案。

1. 很重要！?enablejsapi=1向 iframe属性添加参数src。例如scr="https://youtube.com/embed/VIDEO_ID?enablejsapi=1

2. var iframe = document.querySelector('iframe');或者无论如何你想得到这个元素。

3. iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

本质上，此代码获取元素中包含的 Youtube Player 对象<iframe>。请参阅MDN 上的HTMLIFrameElement.contentWindow和postMessage()。最后，Google在此处提供了所有可用功能的Javascript API 参考。