播放Soundcloud嵌入时暂停Youtube嵌入

Pause Youtube embed when playing Soundcloud embed

本文关键字：暂停 Youtube 嵌入 Soundcloud 播放      更新时间：2023-09-26

我有一个音乐博客，其中包含各种嵌入式声音云和youtube播放器。

我想做的是防止任何音频同时播放。换句话说，当我播放youtube视频时，如果我点击播放声音云嵌入，我希望youtube播放器暂停，反之亦然。

我已经开发了一个代码，如果我点击播放另一个youtube播放器，就会暂停流媒体youtube播放器（soundcloud已经固有地做到了这一点）。我只需要让它交叉兼容。真的很感谢你的帮助，谢谢。

var playerCurrentlyPlaying = null;
var players = {}
YT_ready(function() {
   $(".youtube_embed").each(function() {
       var identifier = this.id;
       var frameID = getFrameID(identifier);
       if (frameID) {
            players[frameID] = new YT.Player(frameID, {
                events: {
                    "onStateChange": function(event){
                        if (event.data == YT.PlayerState.PLAYING)
                        {
                            if(playerCurrentlyPlaying != null &&
                               playerCurrentlyPlaying != frameID)
                            callPlayer( playerCurrentlyPlaying , 'pauseVideo' );
                            playerCurrentlyPlaying = frameID;
                        }
                    }
                }
            });
        }
   });
});

我使用了以下来源的函数：在JavaScript或jQuery 中侦听Youtube事件

YouTube iframe API：我如何控制iframe播放器'；已经在HTML中了吗？

YouTube API目标（多个）现有iframe（s）

使用UniqueID（）渲染HTML：

<span class="soundcloud_embed" id="soundcloud_post_312">
  <iframe id="ui-id-1" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F103518792&show_artwork=true&secret_token=s-LnOTK"></iframe>
</span>
<span class="youtube_embed" id="youtube_post_309">
  <iframe id="ui-id-2" width="528" height="190" src="//www.youtube.com/embed/Y3CYKXBEtf0" frameborder="0" allowfullscreen></iframe>
</span>

首先，如果您能够在iframe本身上获取ID，事情就会大大简化，如下所示：

<span class="soundcloud_embed">
  <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F4997623" id="sound1"></iframe>
</span>
<span class="soundcloud_embed">
  <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F105153133" id="sound2"></iframe>
</span>
<span class="youtube_embed">
  <iframe width="400" height="225" src="//www.youtube.com/embed/tv8WgLEIPBg" id="vid1" frameborder="0" allowfullscreen></iframe>
</span>
<span class="youtube_embed">
  <iframe width="400" height="225" src="//www.youtube.com/embed/FmICU1gMAAw" id="vid2" frameborder="0" allowfullscreen></iframe>
</span>

如果你不想为了获取ID而破解你提到的auto_html gem，你可以使用jquery的.uniqueId()函数在所有iframe上生成它们，或者使用你提到的帖子中的getFrameID() helper方法（似乎已经在使用了）。

为了尽可能容易地让两个API（Youtube和Soundcloud）能够对彼此的事件做出响应，您可以使用几个控制对象来跟踪哪些玩家在您的页面上，以及哪些玩家当前正在玩游戏（此策略与您引用的链接所使用的策略类似，但经过扩展，可以跟踪哪个玩家属于哪个API）。使用它，定义一个通用的暂停函数，作为两个API的简单包装器：

var playerCurrentlyPlaying = {"api":null,"frameID":null};
var players = {"yt":{},"sc":{}};
pauseCurrentPlayer=function() {
  var api=playerCurrentlyPlaying["api"],
      frameid=playerCurrentlyPlaying["frameID"];
  switch(api) {
    case "yt":
      players[api][frameid].pauseVideo();
      break;
    case "sc":
      players[api][frameid]["widget"].pause();
      break;
  }
};

接下来，您将想要定义两个独立的函数；无论何时捕获YouTube播放事件，都将调用第一个，无论何时捕获Soundcloud播放事件，均将调用第二个。目前，Soundcloud HTML5 Widget有一些错误，迫使它必须包含一些非常丑陋的技巧——也就是说，当你第一次播放Soundcloud声音时，播放事件有时不会启动。幸运的是，Play_Progress事件是，所以我们可以利用它，但也必须包括一个变通方法，这样它在暂停声音和启动视频时就不会产生竞争条件：

onYTPlay =function(frameid) {
  if (playerCurrentlyPlaying["frameID"]!=frameid && playerCurrentlyPlaying["frameID"]!=null) {
     pauseCurrentPlayer();
  }
  playerCurrentlyPlaying["api"]="yt";
  playerCurrentlyPlaying["frameID"]=frameid;
};
onSCPlay=function(frameid,event) {
  if (event==SC.Widget.Events.PLAY||players["sc"][frameid]["firstplay"]==true) {
     if (playerCurrentlyPlaying["api"]=="yt") { // because any soundcloud player will be automatically paused by another soundcloud event, we only have to worry if the currently active player is Youtube
        pauseCurrentPlayer();
     }
     playerCurrentlyPlaying["api"]="sc";
     playerCurrentlyPlaying["frameID"]=frameid;
     players["sc"][frameid]["firstplay"]=false;
  }
};

最后，您可以将挂钩添加到Youtube嵌入和Soundcloud嵌入中，记住我们必须为SoundcloudPlay事件进行的破解。不要忘记嵌入SoundcloudWidget API（<script src="w.soundcloud.com/player/api.js"; type="text/javascript"></script>），然后使用以下代码进行绑定：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
  $(".youtube_embed iframe").each(function() {
    players["yt"][$(this).attr('id')] = new YT.Player($(this).attr('id'), {
      events: { 'onStateChange': onYTPlayerStateChange }
    });
  });
}
onYTPlayerStateChange = function(event) {
  if (event.data==YT.PlayerState.PLAYING) {
     onYTPlay(event.target.a.id);
  }
};
(function(){
    $(".soundcloud_embed iframe").each(function() {
      var frameid=$(this).attr('id');
      players["sc"][frameid]={};
      players["sc"][frameid]={"widget":SC.Widget(document.getElementById(frameid)),"firstplay":true};
      players["sc"][frameid]["widget"].bind(SC.Widget.Events.READY, function() {
       players["sc"][frameid]["widget"].bind(SC.Widget.Events.PLAY, function() {
        onSCPlay(frameid,SC.Widget.Events.PLAY);
       });
       players["sc"][frameid]["widget"].bind(SC.Widget.Events.PLAY_PROGRESS, function() {
        onSCPlay(frameid,SC.Widget.Events.PLAY_PROGRESS);
       });
     });
    });
   }());

这种方法是为处理两个API的多个播放器而设置的，如果您想支持其他可嵌入媒体小部件，它应该是可扩展的（前提是它们在开始播放时公开事件，并且能够以编程方式暂停播放器）。

这是可能的。检查小部件api游乐场。您可以从soundcloud iframe小部件中查看所有状态事件。这也可以在flash嵌入上完成。https://w.soundcloud.com/player/api_playground.html

开始播放时注意SC.Widget.Events.PLAY {"loadedProgress":0,"currentPosition":0,"relativePosition":0}事件

相关文章：