我有一个 youtube 视频,我用 youtube 的 iFrame API 嵌入了它。我愿意:
- 在用户暂停视频时显示半透明叠加层 (WORKS)
- 在用户播放视频时隐藏该叠加层 (WORKS)
- 当用户通过 youtube 控件“搜索”时不显示叠加层(可能?)
无法控制搜索行为。可能吗?
要重现,请在同一位置按住搜索键几秒钟,然后观察叠加层出现。示例 jsfiddle 在这里: http://jsfiddle.net/dNU84/3/
var ytvideo;
window.onYouTubePlayerAPIReady = function () {
ytvideo = new YT.Player('ytvideo', {
width: '400',
height: '300',
videoId: 'BOksW_NabEk',
playerVars: {
'autoplay': 1,
'controls': 1
},
events: {
"onStateChange": onPlayerStateChange
}
});
}
function showOverlay() {
if ($('.video .video-overlay').length) $('.video .video-overlay').fadeIn(1200);
}
function hideOverlay() {
if ($('.video .video-overlay').length) $('.video .video-overlay').hide();
}
var overlay;
function onPlayerStateChange(event) {
console.log(event.data);
clearTimeout(overlay);
// youtube fires 2xPAUSED, 1xPLAYING on seek
if (event.data == YT.PlayerState.PAUSED) {
overlay = setTimeout(showOverlay, 1000);
}
if (event.data == YT.PlayerState.PLAYING) {
overlay = hideOverlay();
}
}
最佳答案
不幸的是,YouTube 播放器 API 没有可靠的方法来报告“搜索”状态。如果您有兴趣,这里有一个(较旧的)解释的链接,解释了为什么会这样:
https://groups.google.com/forum/#!topic/youtube-api-gdata/1xGLZ54YOPI
如果您希望使用 chromeless 播放器而不是带有 YouTube 控件的默认播放器,您可以通过监听自定义 scrubber 上的事件来绕过此限制...作为一个简单的示例,可以设置 jQuery UI 的 slider 作为 chromeless 播放器的洗涤器,并使用“开始”、“停止”和“滑动”事件报告“搜索”状态。
关于javascript - 如何通过 YouTube Player IFrame API 区分 "seek"和 "pause",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18138031/