我有一个音乐博客，其中包含各种嵌入式 soundcloud 和 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;
                        }
                    }
                }
            });
        }
   });
});

我使用过这些来源的函数: Listening for Youtube Event in JavaScript or jQuery

YouTube iframe API: how do I control a iframe player that's already in the HTML?

YouTube API Target (multiple) existing 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>

如果您不想破解您提到的 auto_html gem 以获得 ID，您可以使用 jquery 的 .uniqueId()函数在所有 iframe 上生成它们或使用 getFrameID()您提到的帖子中的辅助方法(并且似乎已经在使用)。

为了尽可能简单地让两个 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 有一些错误，迫使必须包含一些非常丑陋的 hacks——即，当您第一次播放 Soundcloud 声音时，有时不会触发 Play 事件。幸运的是，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;
  }
};

最后，您可以将您的 Hook 添加到 Youtube 嵌入和 Soundcloud 嵌入，记住我们必须为 Soundcloud Play 事件设置的 hack。不要忘记嵌入 Soundcloud Widget API ( <script src="w.soundcloud.com/player/api.js"; type="text/javascript"></script> )，然后使用此代码进行绑定(bind):

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 的多个播放器，如果您想支持其他可嵌入的媒体小部件(前提是它们在开始播放时公开事件并且它们能够以编程方式暂停播放器)，则应该具有良好的可扩展性).

关于javascript - 播放 Soundcloud 嵌入时暂停 Youtube 嵌入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18117605/