自动播放youtube和soundcloud相互嵌入 [英] Auto-play youtube and soundcloud embeds after one another
问题描述
我有一个音乐博客，其中包含一系列youtube和soundcloud嵌入。
I have a music blog that contains a series of youtube and soundcloud embeds.
我想一个接一个地自动播放页面上的所有嵌入内容。换句话说，在youtube嵌入后我已经玩完了，我希望下一个嵌入式开始播放，无论是来自soundcloud还是youtube，反之亦然。
I would like to automatically play all of the embedded content on the page one after another. In other words after a youtube embed that I've played ends, I would like the next embed to start playing whether it be from soundcloud or youtube and vice versa.
呈现的HTML如下所示：
The rendered HTML looks like this:
<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>
建立我从这个来源收到的帮助：暂停Youtube嵌入播放Soundcloud时嵌入
Building off help I received from this source: Pause Youtube embed when playing Soundcloud embed
要跟踪哪些玩家在页面上，他们属于哪个api，以及他们当前正在玩哪个玩家：
To keep track of which players are on the page, which api's they belong to, and which of them is currently playing:
var playerCurrentlyPlaying = {"api":null,"frameID":null};
var players = {"yt":{},"sc":{}};
我需要定义一个在playerCurrentlyPlaying结束时调用的通用playNext函数。根据下一个嵌入的api，playNext函数必须执行正确的播放命令。为了找到下一个嵌入的函数，函数可能会将currentPlaying iframe的ID增加1.这样如果id =ui-id-2刚刚结束，则id =ui-id-3应该播放。
I need to define a generic playNext function that is called in the event that playerCurrentlyPlaying comes to an end. Depending on the api of the next embed, the playNext function has to execute the proper play command. In order to find which embed is next, the function can perhaps increment the ID of the currentlyPlaying iframe by 1. Such that if id="ui-id-2" has just ended then id="ui-id-3" should play.
有时这些youtube视频会崩溃，并说视频不再存在或上传者已在您所在的国家/地区无法使用。在这些情况下，我如何检查崩溃并跳到下一个递增的ID（例如id =ui-id-4）？
Sometimes these youtube videos crash and say things like "video no longer exists" or "uploader has made this unavailable in your country". In these cases, how can I check for a crash and skip to the next incremented ID (e.g. 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>
推荐答案
这里有两个问题。我会尽力解决这两个问题。
You've got two questions in one, here. I'll try to address them both.
在让下一个玩家自动播放方面，你需要采取两个小步骤。第一种方法是将播放器对象绑定到API的相应事件信号，表明媒体已播放完毕。对于YouTube，您的事件监听器将如下所示：
In terms of making the next player auto-play, there are two small steps you'll need to take. The first is to bind your player objects to their API's respective event signaling that the media is done playing. For YouTube, your event listener would look something like this:
onYTPlayerStateChange = function (event) {
if (event.data == YT.PlayerState.PLAYING) {
onYTPlay(event.target.a.id);
}
else if (event.data == YT.PlayerState.ENDED) {
playNextPlayer();
}
};
其中 playNextPlayer（）是这个通用函数你提到你需要定义。对于你的Soundcloud嵌入，你的事件绑定看起来像这样，现在：
Where playNextPlayer() is this generic function you mention you need to define. For your Soundcloud embeds, your event bindings would look something like this, now:
(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的播放调用。这样的事情：
Once you've got those bindings in place, the playNextPlayer function will need to determine what the next player is, what API it comes from, and then execute that API's play call. Something like this:
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要播放时要做什么。
Keep in mind that there's no error handling built in to this sample code; you'll have to write some to handle cases where the IDs aren't sequential, for example, or what to do when its out of iframes to play.
至于第二个问题 - 要确定视频是否可播放，您必须设置一些错误事件监听器以及播放事件监听器。
As to your second question -- to determine whether or not a video is playable, you'll have to set up some error event listeners as well as the playback event listeners.
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值，以确保系统然后正确推进。
The seeError function can then be defined in such a way that it determines what player threw the error (using the event.target.a.id parameter in way similar to how it's being done with the state change event listeners), and then leverages the same generic playNextPlayer function. Keep in mind that if a Youtube video doesn't exist in that way, it will NOT generate a "PLAYING" event, so you'll have to set the proper playerCurrentlyPlaying values in your error listener as well, just to make sure the system then properly advances.
YouTube播放器应该根据视频是否不存在，是否在特定国家/地区无法播放而引发不同类型的错误等。请参阅此处： https://developers.google.com/youtube/js_api_reference#Events 下的 onError部分，看看这些不同的代码应该是什么。我说'应该'，因为它看起来像现在，它只是为所有无法播放错误抛出代码0。
The YouTube player is supposed to throw different types of errors based on whether the video doesn't exist, whether it isn't playable in a particular country, etc. See here: https://developers.google.com/youtube/js_api_reference#Events under the "onError" section to see what these different codes are supposed to be. I say 'supposed to' because it looks like, right now, it's just throwing code 0 for all "can't play" errors.
这是一个有效的小提琴以上所有（你可以切换soundcloud和youtube iframe的id来验证推进是否适用于两个方向）。这个小提琴还实例化了一个onError侦听器，但没有定义它将做什么。但是，不应该让你努力工作。
Here's a working fiddle which does all of the above (you can switch the ids of the soundcloud and youtube iframes to verify that the advancement works both directions). This fiddle also instantiates an onError listener but doesn't define what it will do. Shouldn't be hard for you to get that to work, though.
http://jsfiddle.net/jlmcdonald/NqRqm/8/
这篇关于自动播放youtube和soundcloud相互嵌入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
