播放新视频时停止所有视频

我需要一些关于Youtube API和嵌入视频的帮助。我想在点击新的YouTube视频时停止当前页面上运行的所有iframe视频（这里我仅拍摄了3部，但有几部视频）。在某个时间点，只能运行一个iframe youtube视频。我已经thruogh文档[https://developers.google.com/youtube/js_api_reference][1]，并能编写到这里......播放新视频时停止所有视频

更新时间：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script type="text/javascript" src="http://www.youtube.com/player_api"></script> 
     <script type="text/javascript"> 
      var player; 
      function onYouTubeIframeAPIReady() { 
       player = new YT.Player('player', { 
        events: { 
         'onReady': onPlayerReady, 
         'onStateChange': onPlayerStateChange 
        } 
       }); 
      } 

      var done = false; 
       function onPlayerStateChange(event) { 
       if (event.data == YT.PlayerState.PLAYING && !done) { 
        alert("hi5"); 
        player1.stopVideo(); 
        player2.stopVideo(); 
        done = true; 
       } 
       } 
     </script> 
    </head> 
    <body> 
     <div>TODO write content</div> 
     <ul class="image-grid" id="list"> 
      <li> 
       <iframe id="player" width="385" height="230" src="http://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe> 
      </li> 
      <li> 
       <iframe id="player1" width="385" height="230" src="http://www.youtube.com/embed/wSrA5iQGlDc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe> 
      </li> 
      <li> 
       <iframe id="player2" width="385" height="230" src="http://www.youtube.com/embed/c7b_WLkztXc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe> 
      </li> 
     </ul> 
    </body> 
</html>

修订

onStateChange事件不获取触发（工作）
在这个例子中我有3个视频，在现实中却具有更多的视频，而不是写onPlayerStateChange每个video..is可以使用数组的所有视频。在功能上PlayerStateChange，写入player []。stopVideo（）和this.playvideo（）..这类东西..（需要帮助）请看这个小提琴http://jsfiddle.net/LakshmiV/kn5Sf/ 请帮忙。

来源

2013-02-15 satya

你可以做这样的事情......

给每一个IFRAME一类，以便它可以被识别为YouTube播放器的iframe。在这里，我已经给“yt_players”

现在你可以使用下面的代码...

<script type="text/javascript"> 
    players = new Array(); 

    function onYouTubeIframeAPIReady() { 
     var temp = $("iframe.yt_players"); 
     for (var i = 0; i < temp.length; i++) { 
      var t = new YT.Player($(temp[i]).attr('id'), { 
       events: { 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
      players.push(t); 
     } 
    } 
    onYouTubeIframeAPIReady(); 

    function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING) { 
      var temp = event.target.a.src; 
      var tempPlayers = $("iframe.yt_players"); 
      for (var i = 0; i < players.length; i++) { 
       if (players[i].a.src != temp) 
        players[i].stopVideo(); 
      } 
     } 
    } 
</script>

已经更新的代码...这应该是对你有所帮助。

看到它在这里... http://jsfiddle.net/anubhavranjan/Y8P7y/

来源

2013-02-15 07:55:58

你可以做的是调试事件参数中的数据，并检查是否可以看到正在播放哪个播放器。根据不同的情况，您可以尝试关闭或打开视频。 – 2013-02-15 08:04:56

错过了对onYouTubeIframeAPIReady（）的调用。现在检查 – 2013-02-15 08:55:30

你可以请检查链接http://jsfiddle.net/anubhavranjan/Y8P7y/ – 2013-02-15 10:11:41

很好的概念，但event.target.a.src不行！将其更改为event.target.getVideoUrl（）并且它工作正常。看看这里

function onPlayerStateChange(event) { 

if (event.data == YT.PlayerState.PLAYING) { 
    var temp = event.target.getVideoUrl(); 
    var tempPlayers = $("iframe.yt_players"); 
    for (var i = 0; i < players.length; i++) { 
     if (players[i].getVideoUrl() != temp) players[i].stopVideo(); 

    } 
}

}

http://jsfiddle.net/Y8P7y/82/

来源

2014-09-16 12:35:11 Venki

大答案通过Coby到类似的问题在https://stackoverflow.com/a/13260520/835822

使用an attribute selector您可以定位来自YouTube的所有的iframe，然后使用jQuery's each你可以遍历所有这些。

$(function(){ 
    $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) { 
    this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*'); 
});

}）;

来源

2015-02-11 00:22:15 grmdgs

播放新视频时停止所有视频

回答

相关问题