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

如果你有任何想要使用无边框播放器而不是使用YouTube控件的默认播放器，你可以通过监听自定义滑块上的事件来解决这个限制......作为一个简单的例子，可以设置jQuery UI的滑块作为无铬玩家的擦洗器并使用“开始”，“停止”和“滑动”事件报告“搜索”状态。

Answer 2

我知道这个问题已经过时了，但我只是在寻找解决方案，因为我在暂停时会显示一个叠加层，但每次用户搜索时都会显示叠加层，因为两个事件值均为2。 / p>

我遇到的最简单的解决方案是设置一秒超时：

setTimeout(function() {
  if ( event.target.getPlayerState() == 2 ) {
    // execute your code here for paused state
  }
}, 1000)

这只会在暂停状态下执行代码，而不会在搜索时执行，因为在1秒超时之后，如果用户正在寻求，则PlayerState将再次为1。

如何通过YouTube播放器IFrame API区分“搜索”和“暂停”

2 个答案: