javascript - 如何通过 YouTube Player IFrame API 区分 "seek"和 "pause"

Question

我有一个 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();
    }
}

Answer 1

不幸的是，YouTube 播放器 API 没有可靠的方法来报告“搜索”状态。如果您有兴趣，这里有一个(较旧的)解释的链接，解释了为什么会这样:

https://groups.google.com/forum/#!topic/youtube-api-gdata/1xGLZ54YOPI

如果您希望使用 chromeless 播放器而不是带有 YouTube 控件的默认播放器，您可以通过监听自定义 scrubber 上的事件来绕过此限制...作为一个简单的示例，可以设置 jQuery UI 的 slider 作为 chromeless 播放器的洗涤器，并使用“开始”、“停止”和“滑动”事件报告“搜索”状态。