Javascript 自动播放youtube和soundcloud相继嵌入
我有一个音乐博客,其中包含一系列youtube和soundcloud嵌入内容 我想自动播放页面上的所有嵌入内容一个接一个。换句话说,在我播放的youtube嵌入结束后,我希望下一个嵌入开始播放,无论是来自soundcloud还是youtube,反之亦然 呈现的HTML如下所示:Javascript 自动播放youtube和soundcloud相继嵌入,javascript,jquery,ruby-on-rails-3,youtube-api,soundcloud,Javascript,Jquery,Ruby On Rails 3,Youtube Api,Soundcloud,我有一个音乐博客,其中包含一系列youtube和soundcloud嵌入内容 我想自动播放页面上的所有嵌入内容一个接一个。换句话说,在我播放的youtube嵌入结束后,我希望下一个嵌入开始播放,无论是来自soundcloud还是youtube,反之亦然 呈现的HTML如下所示: <span class="soundcloud_embed" id="soundcloud_post_308"> <iframe id="ui-id-1" width="100%" height="
<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>
onYTPlayerStateChange = function (event) {
if (event.data == YT.PlayerState.PLAYING) {
onYTPlay(event.target.a.id);
}
else if (event.data == YT.PlayerState.ENDED) {
playNextPlayer();
}
};
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;
};
我需要定义一个在playerCurrentlyPlaying结束时调用的通用playNext函数。根据下一个嵌入的api,playNext函数必须执行正确的play命令。为了找到下一个嵌入,函数可能会将currentlyPlaying 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>
在这里,你有两个问题。我会尽量把他们两个都说出来 在让下一个玩家自动播放方面,您需要采取两个小步骤。第一种方法是将播放器对象绑定到它们各自的API事件,以表示媒体已播放完毕。对于YouTube,事件侦听器的外观如下所示:
<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>
onYTPlayerStateChange = function (event) {
if (event.data == YT.PlayerState.PLAYING) {
onYTPlay(event.target.a.id);
}
else if (event.data == YT.PlayerState.ENDED) {
playNextPlayer();
}
};
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;
};
其中,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的play调用。大概是这样的:
<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>
onYTPlayerStateChange = function (event) {
if (event.data == YT.PlayerState.PLAYING) {
onYTPlay(event.target.a.id);
}
else if (event.data == YT.PlayerState.ENDED) {
playNextPlayer();
}
};
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
}
});
});
}
然后可以定义seererror
函数,以确定是哪个玩家抛出了错误(使用event.target.a.id参数的方式类似于状态更改事件侦听器),然后利用相同的通用playNextPlayer
函数。请记住,如果Youtube视频不以这种方式存在,它将不会生成“播放”事件,因此您还必须在错误侦听器中设置正确的playerCurrentlyPlaying值,以确保系统正常运行
YouTube播放器应该根据视频是否存在、是否在特定国家无法播放等情况抛出不同类型的错误。请参见此处:在“onError”部分下查看这些不同的代码应该是什么。我之所以说“应该”,是因为现在看起来,它只是为所有“不能播放”错误抛出代码0
这里有一个可以完成以上所有工作的小提琴(您可以切换soundcloud和youtube iFrame的ID,以验证这一进程在两个方向都有效)。这个fiddle还实例化了onError侦听器,但没有定义它将做什么。不过,让它发挥作用对你来说应该不难
在这里,你有两个问题。我会尽量把他们两个都说出来 在让下一个玩家自动播放方面,您需要采取两个小步骤。第一种方法是将播放器对象绑定到它们各自的API事件,以表示媒体已播放完毕。对于YouTube,事件侦听器的外观如下所示:
<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>
onYTPlayerStateChange = function (event) {
if (event.data == YT.PlayerState.PLAYING) {
onYTPlay(event.target.a.id);
}
else if (event.data == YT.PlayerState.ENDED) {
playNextPlayer();
}
};
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;
};
其中,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的play调用。大概是这样的:
<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>
onYTPlayerStateChange = function (event) {
if (event.data == YT.PlayerState.PLAYING) {
onYTPlay(event.target.a.id);
}
else if (event.data == YT.PlayerState.ENDED) {
playNextPlayer();
}
};
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
}
});
});
}
然后可以定义seererror
函数,以确定是哪个玩家抛出了错误(使用event.target.a.id参数的方式类似于状态更改事件侦听器),然后利用相同的通用playNextPlayer
函数。请记住,如果Youtube视频不以这种方式存在,它将不会生成“播放”事件,因此您还必须在错误侦听器中设置正确的playerCurrentlyPlaying值,以确保系统正常运行
YouTube播放器应该根据视频是否存在、是否在特定国家无法播放等情况抛出不同类型的错误。请参见此处:在“onError”部分下查看这些不同的代码应该是什么。我之所以说“应该”,是因为现在看起来,它只是为所有“不能播放”错误抛出代码0
这里有一个可以完成以上所有工作的小提琴(您可以切换soundcloud和youtube iFrame的ID,以验证这一进程在两个方向都有效)。这个fiddle还实例化了onError侦听器,但没有定义它将做什么。不过,让它发挥作用对你来说应该不难