自动播放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>

我从这个来源获得了帮助:在播放Soundcloud时暂停Youtube嵌入

要跟踪页面上的哪些玩家,他们属于哪个api,以及他们当前正在玩哪个玩家:

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

我需要定义一个通用的playNext函数,该函数在playerCurrentlyPlaying结束时调用.根据下一个嵌入的api,playNext函数必须执行正确的播放命令.为了找到下一个嵌入的函数,函数可能会将currentPlaying 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

你在这里有两个问题.我会尽力解决这两个问题.

在让下一个玩家自动播放方面,您需要采取两个小步骤.第一种方法是将播放器对象绑定到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嵌入,您的事件绑定看起来像这样,现在:

(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();
             });
         });
     });
 }());

一旦你有了这些绑定,该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在"onError"部分下的#Events,看看这些不同的代码应该是什么.我说'应该',因为它看起来像现在,它只是为所有"无法播放"错误抛出代码0.

这是一个工作小提琴,完成上述所有操作(你可以切换soundcloud和youtube iframe的id来验证推进是否适用于两个方向).这个小提琴还实例化了一个onError侦听器,但没有定义它将做什么.但是,你不应该努力工作.

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