4

我有一个嵌入了 youtube 的 iFrame API 的 youtube 视频。我想：

  • 当用户暂停视频时显示半透明覆盖（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();
    }
}
4

2 回答 2

6

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

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

如果您希望使用无铬播放器而不是带有 YouTube 控件的默认播放器，您可以通过侦听自定义擦洗器上的事件来绕过这个限制......作为一个简单的例子，jQuery UI 的滑块可以设置为用于无铬播放器的scrubber，并通过使用'start'、'stop'和'slide'事件报告“seek”状态。

于 2013-08-10T02:50:29.897 回答
5

我知道这个问题很老，但我只是在寻找解决方案，因为我在暂停时显示了一个叠加层，但是由于两个事件值都是 2，所以每次用户搜索时都会显示叠加层。

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

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

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

于 2016-11-01T15:21:44.770 回答