我在同一页面上嵌入了两个相同的YouTube视频 . 我希望他们两个都同步,这是我的要求/说明:
-
两个视频必须同时开始
-
当用户播放/暂停视频时,其他视频也会这样做
-
这很容易通过API
-
当一个视频缓冲其他停止等待时,并在它们都准备就绪时启动
-
我只需要一个视频的音频
-
同步精度不一定是毫秒完美,只是可靠
-
一个视频将用作背景视频
-
此视频会略微模糊(使用CSS3模糊),因此质量不是非常必要
我尝试使用YouTube JS API来监听播放器状态更改并尝试保持两个视频同步,但它并不像我希望的那样可靠 . 我将在下面发布部分代码 .
需要注意的是,一个视频看起来比另一个大,所以YouTube可能会提供更高质量的视频 .
因为我使用CSS3模糊,所以我只能使用最近的Webkit浏览器,所以单独使用这些(而不是FF / IE)的解决方案不是问题 .
My question is this ,对于上述要求,有没有办法让这两个视频保持同步?我确实考虑过是否可以使用画布API来播放视频,但经过研究发现,这是不可能的 .
buffering = false;
var buffer_control = function(buffering_video, sibling_video, state) {
switch ( state ) {
case 1: // play
if ( buffering === true ) {
console.error('restarting after buffer');
// pause both videos, we want to make sure they are both at the same time
buffering_video.pauseVideo();
sibling_video.pauseVideo();
// get the current time of the video being buffered...
var current_time = buffering_video.getCurrentTime();
// ... and pull the sibling video back to that time
sibling_video.seekTo(current_time, true);
// finally, play both videos
buffering_video.playVideo();
sibling_video.playVideo();
// unset the buffering flag
buffering = false;
}
break;
case 3: // buffering
console.error('buffering');
// set the buffering flag
buffering = true;
// pause the sibling video
sibling_video.pauseVideo();
break;
}
}
1 回答
你的项目很有趣,这就是我决定尝试帮助你的原因 . 我从来没有使用过youtube API,但我尝试了一些编码,这可能是你的开始 .
所以这里是我尝试的代码,它似乎工作得很好,它肯定需要一些改进(我没有尝试计算两个播放视频之间的偏移,但让他们取消静音显示不匹配,这听起来合法)
开始了 :
让我们从一些HTML基础知识开始
我们为前景播放器添加绝对定位,使其覆盖播放背景视频的播放器(用于测试)
这里使用jQuery淡入/淡出玩家(你会在下面看到原因),但你可以使用基本的JS
<iframes>(和视频播放器)将替换这些<div>标签 .
此代码异步加载IFrame Player API代码 .
下载API代码后,此功能会创建<iframes>(和YouTube播放器) . 请注意回调函数:onPlayer1Ready和onPlayer1StateChange
所以现在是代码中有趣的部分 . 同步项目中的主要问题与视频在启动之前需要缓冲的事实有关 . 实际上,API没有提供任何直观的功能来预加载视频(由于带宽问题(客户端和服务器端) . 所以我们必须有点棘手 .
预加载视频的步骤如下:
隐藏播放器,以便用户看不到后续步骤);
使播放器静音(
player.mute():Void
);模拟时间轴中的跳转以开始缓冲(
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void
);等待状态更改事件等于
YT.PlayerState.PLAYING
;暂停视频(
player.pauseVideo():Void
);使用
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void
回放视频;取消静音播放器(
player.unMute():Void
);显示播放器 .
你必须预先加载你的两个视频 .
当视频播放器准备就绪时,API将调用这些功能 .
当后台视频播放器的状态发生变化时,API会调用此函数 .
当前景视频播放器的状态发生变化时,API会调用此函数 .
这是代码的一部分,行为奇怪 . 取消注释下面的行会使同步非常糟糕,但是如果你发表评论,则必须在PLAY按钮上单击 twice BUT 同步看起来会更好 .
请注意,此代码可能不会计算视图 .
如果你想要没有解释的代码,你可以去这里:http://jsfiddle.net/QtBlueWaffle/r8gvX/1/
2016 Update Live Preview
希望这可以帮助 .