我想在同一个播放器中播放两个不同的 youtube 视频,第一个视频在第二个之前播放(作为前贴片广告)。一种仅包含两个视频的自定义播放列表。
我真正需要的是,当播放器处于空闲状态时,它必须显示主视频(第二个)的图像,而不是前贴片。
所以,我想我必须使用 youtube api 加载主视频,然后停止它,然后加载前贴片,在播放前贴片后播放主视频然后停止。
我试图复制/粘贴相同的代码来完成这些任务,但我陷入了困境。任何人都可以给我一个工作的例子吗?或者,至少有一些建议?非常感谢。
我想在同一个播放器中播放两个不同的 youtube 视频,第一个视频在第二个之前播放(作为前贴片广告)。一种仅包含两个视频的自定义播放列表。
我真正需要的是,当播放器处于空闲状态时,它必须显示主视频(第二个)的图像,而不是前贴片。
所以,我想我必须使用 youtube api 加载主视频,然后停止它,然后加载前贴片,在播放前贴片后播放主视频然后停止。
我试图复制/粘贴相同的代码来完成这些任务,但我陷入了困境。任何人都可以给我一个工作的例子吗?或者,至少有一些建议?非常感谢。
这有点粗略,但是通过监听状态变化事件来完成你的任务;当预卷接近完成时,您可以通过集成一些基于提示主视频的智能前瞻监控来使其更具响应性。但无论如何,这至少应该让你开始:
<div id="player"></div>
<script>
var seenPreroll=false;
var preroll='rl1qKqlYy8M';
var mainfeature='u1zgFlCw8Aw';
var playingId='';
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: mainfeature,
events: {
'onStateChange': function(event) {
if (event.data==1&&seenPreroll==false) {
player.pauseVideo();
player.loadVideoById(preroll);
playingId=preroll;
seenPreroll=true;
player.playVideo();
}
else if (event.data==0&&playingId==preroll) {
player.loadVideoById(mainfeature);
playingId=mainfeature;
player.playVideo();
}
}
}
});
}
</script>