自动播放youtube和soundcloud相互嵌入
我有一个音乐博客，其中包含一系列youtube和soundcloud嵌入。
我想一个接一个地自动播放页面上的所有嵌入内容。 换句话说，在youtube嵌入我播放结束之后，我希望下一个嵌入式开始播放，无论是来自soundcloud还是youtube，反之亦然。
呈现的HTML如下所示：
我从这个来源获得了帮助： 在播放Soundcloud时暂停Youtube嵌入
要跟踪页面上的哪些玩家，他们属于哪个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”应该播放。
有时这些YouTubevideo会崩溃，并说“video不再存在”或“上传者已在您所在的国家/地区无法使用”。 在这些情况下，我如何检查崩溃并跳到下一个递增的ID（例如id =“ui-id-4”）？
此video已不存在：
你在这里有两个问题。 我会尽力解决这两个问题。
在让下一个玩家自动播放方面，您需要采取两个小步骤。 第一种方法是将播放器对象绑定到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()是你提到的这个generics函数，你需要定义。 对于您的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; };
请记住，此示例代码中没有内置error handling; 例如，你必须写一些来处理ID不是顺序的情况，或者当它从iframe中播放时要做什么。
至于你的第二个问题 – 要确定video是否可播放，你必须设置一些错误事件监听器以及回放事件监听器。
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函数。 请记住，如果Youtubevideo不存在，则不会生成“PLAYING”事件，因此您必须在错误监听器中设置正确的playerCurrentlyPlaying值，以确保系统然后适当地进步。
YouTube播放器应根据video是否不存在，是否无法在特定国家/地区播放等方式引发不同类型的错误。请参阅此处： https ： //developers.google.com/youtube/js_api_reference在“onError”部分下的#Events ，看看这些不同的代码应该是什么。 我说’应该’，因为它看起来像现在，它只是为所有“无法播放”错误抛出代码0。
这是一个工作小提琴，完成上述所有操作（你可以切换soundcloud和youtube iframe的id来validation推进是否适用于两个方向）。 这个小提琴还实例化了一个onError侦听器，但没有定义它将做什么。 但是，不应该让你努力工作。