javascript - 自动播放 youtube 和 soundcloud 嵌入一个接一个

Question

我有一个音乐博客，其中包含一系列 youtube 和 soundcloud 嵌入内容。

我想一个接一个地自动播放页面上的所有嵌入内容。换句话说，在我播放的一个 YouTube 嵌入结束后，我希望下一个嵌入开始播放，无论它来自 SoundCloud 还是来自 Youtube，反之亦然。

呈现的 HTML 如下所示:

<span class="soundcloud_embed" id="soundcloud_post_308">
  <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>

<span class="youtube_embed" id="youtube_post_310">
  <iframe id="ui-id-3" width="528" height="190" src="//www.youtube.com/embed/yMx1FnkrhYc" frameborder="0" allowfullscreen></iframe>
</span>

建立我从这个来源获得的帮助:Pause Youtube embed when playing Soundcloud embed

跟踪页面上有哪些玩家，他们属于哪个 api，以及他们中的哪些人当前正在玩:

var playerCurrentlyPlaying = {"api":null,"frameID":null};
var players = {"yt":{},"sc":{}};

我需要定义一个通用的 playNext 函数，它会在 playerCurrentlyPlaying 结束时调用。根据下一个嵌入的 api，playNext 函数必须执行正确的播放命令。为了找到下一个嵌入，该函数可能会将当前播放的 iframe 的 ID 增加 1。这样，如果 id="ui-id-2"刚刚结束，则 id="ui-id-3"应该播放.

有时这些 YouTube 视频会崩溃，并显示诸如“视频不再存在”或“上传者已在您所在的国家/地区不可用”之类的内容。在这些情况下，我如何检查崩溃并跳到下一个递增的 ID(例如 id="ui-id-4")？

此视频已不存在:

<span class="youtube_embed" id="youtube_post_311">
  <iframe id="ui-id-4" width="528" height="190" src="//www.youtube.com/embed/Ym3DgqNTzyc" frameborder="0" allowfullscreen></iframe>
</span>

Answer 1

这里有两个问题。我会尝试同时解决这两个问题。

就让下一位玩家自动播放而言，您需要采取两个小步骤。第一个是将您的播放器对象绑定(bind)到它们的 API 各自的事件信号，表示媒体已播放完毕。对于 YouTube，您的事件监听器看起来像这样:

 onYTPlayerStateChange = function (event) {
     if (event.data == YT.PlayerState.PLAYING) {
         onYTPlay(event.target.a.id);
     }
     else if (event.data == YT.PlayerState.ENDED) {
          playNextPlayer();
     }
 };

playNextPlayer() 是您提到的需要定义的通用函数。对于您的 Soundcloud 嵌入，您的事件绑定(bind)现在看起来像这样:

(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);
             });
             players["sc"][frameid]["widget"].bind(SC.Widget.Events.FINISH, function () {
                playNextPlayer();
             });
         });
     });
 }());

一旦您获得这些绑定(bind)，playNextPlayer 函数将需要确定下一个播放器是什么，它来自什么 API，然后执行该 API 的播放调用。像这样:

 playNextPlayer = function() {
  var nextIdNum=parseInt(playerCurrentlyPlaying["frameID"].split("-").pop())+1;
  nextFrameId="ui-id-"+nextIdNum;
     switch($("#"+nextFrameId).parent().attr('class')) {
         case "youtube_embed":
             api="yt";
             players[api][nextFrameId].playVideo();
             break;
         case "soundcloud_embed":
             api="sc";
             players[api][nextFrameId]["widget"].play();
             break;
     }
     playerCurrentlyPlaying["api"]=api;
     playerCurrentlyPlaying["frameID"]=nextFrameId;
 };

请记住，此示例代码中没有内置错误处理；您必须编写一些代码来处理 ID 不连续的情况，例如，或者当 iframe 无法播放时该怎么办。

关于您的第二个问题——要确定视频是否可播放，您必须设置一些错误事件监听器以及播放事件监听器。

function onYouTubeIframeAPIReady() {
     $(".youtube_embed iframe").each(function () {
         players["yt"][$(this).attr('id')] = new YT.Player($(this).attr('id'), {
             events: {
                 'onError': seeError,
                 'onStateChange': onYTPlayerStateChange
             }
         });
     });
 }

然后可以定义 seeError 函数，确定是哪个玩家抛出了错误(使用 event.target.a.id 参数的方式类似于使用状态更改事件监听器)，然后利用相同的通用 playNextPlayer 函数。请记住，如果 Youtube 视频不以这种方式存在，它不会生成“PLAYING”事件，因此您还必须在错误监听器中设置正确的 playerCurrentlyPlaying 值，以确保系统然后适当推进。

YouTube 播放器应该根据视频是否不存在、在特定国家/地区是否无法播放等来抛出不同类型的错误。参见此处:https://developers.google.com/youtube/js_api_reference#Events在“onError”部分下查看这些不同的代码应该是什么。我说“应该”是因为看起来，现在，它只是为所有“无法播放”错误抛出代码 0。

这是一个可以完成上述所有工作的工作 fiddle (您可以切换 soundcloud 和 youtube iframe 的 ID 以验证进展是否双向有效)。这个 fiddle 还实例化了一个 onError 监听器，但没有定义它将做什么。不过，您应该不难让它发挥作用。

http://jsfiddle.net/jlmcdonald/NqRqm/8/