播放另一个嵌入的 YouTube iframe 时停止

Posted 2023-02-24

【中文标题】播放另一个嵌入的 YouTube iframe 时停止

【英文标题】：Stop any embeded YouTube iframe when another is played

【发布时间】：2017-05-15 06:10:12

【问题描述】：

我在我的页面中嵌入了大约 10 个 YouTube iframe，它们都有自己的自定义播放/暂停按钮。我已使用此解决方案开始 http://jsfiddle.net/buuuue/dzroqgj0/，但我不确定如何调整这段代码以停止正在播放的任何其他视频，如果另一个视频开始...

function stopVideo(player_id) 
    if (player_id == "player1") 
        player2.stopVideo();
     else if (player_id == "player2") 
        player1.stopVideo();
    

例如，如果播放器 1 当前正在播放，而播放器 3 正在播放，我希望播放器 1 停止播放。我也研究了这个解决方案https://***.com/a/38405859/1798756，但我认为我需要通过 JS 创建播放器，以便我还可以创建自定义播放/暂停按钮。

提前感谢您的帮助！

【问题讨论】：

Pause YouTube iframe embed when playing another的可能重复

是的，我已经研究过该解决方案，正如我的帖子中提到的那样，但我正在尝试添加 2 个以上的 YouTube iframe，但不太确定最好的方法。

使用类代替id

对不起，你能说得具体一点吗？我对这些东西很业余，很想通过这个解决方案了解更多。使用 class 而不是 id 解决了什么问题？

【参考方案1】：

创建玩家后，将它们推送到数组中。

    var vids =[];
    player1 = new YT.Player('player1', 
     //stuff
    );
    vids.push(player1);

    player2 = new YT.Player('player2', 
     // stuff
    );
    vids.push(player2);

    ....
    ..
    playerN = new YT.Player('playerN', 
     // stuff
    );
    vids.push(playerN);

每个玩家对象的 id 都可以通过其a.id 属性访问（a 本身是一个对象，id 是一个属性（字符串））

现在，当用户播放给定播放器时，您只需暂停除正在播放的播放器之外的所有其他播放器（您在 stopVideo 中获得的 ID）。因为您有 id，所以很容易

 function stopVideo(player_id) 
  for(var i=0;i<vids.length;i++)
    if (player_id !=vids[i].a.id)    
      vids[i].stopVideo();
  
 

示例：-http://jsfiddle.net/4t9ah1La/

如果您不是通过脚本创建播放器，而只是嵌入 iframe，那么vbence 提到的this 答案就足够了，下面是一个演示，其中包含Jennie 提出的改进建议

示例：-http://jsfiddle.net/fyb7fyw1/

所有致谢各自的原作者

【讨论】：

这太棒了！非常感谢！

我相信我必须通过脚本创建播放器，以便我可以附加自定义播放/暂停按钮。还是我错了？

是的，你可以使用任何一种方式。对于基于脚本的播放器，它只是 player1.playVideo(); 和 player1.pauseVideo();。但是如果你自己嵌入 那么你可以让播放器数组全局并调用函数任何与您的按钮角色匹配的玩家，例如this one

啊，这是另一个很棒的解决方案！非常感谢您的解释

创建一个函数来处理传递您的按钮引用及其关联播放器的内容。在函数中检查播放/提示/结束状态，如this