javascript - 使用 YouTube API 的自定义进度条

Question

我想使用 YouTube API 创建自定义进度条，我认为进行进度计算的最佳事件监听器是 YT.PlayerState.PLAYING 事件监听器。 但是这个事件根本不起作用。我认为这是完全错误的。有什么想法吗？

player.addEventListener("YT.PlayerState.PLAYING", function() {
    console.log(player.getDuration());
});

添加或删除事件监听器

player.addEventListener(event:String, listener:String):Void 为指定事件添加监听器函数。下面的事件部分标识了玩家可能触发的不同事件。监听器是一个字符串，它指定在指定事件触发时将执行的函数。

player.removeEventListener(event:String, listener:String):Void 删除指定事件的监听器函数。监听器是一个字符串，用于标识在指定事件触发时将不再执行的函数。

事件

onStateChange 只要玩家的状态发生变化，就会触发此事件。 API 传递给您的事件监听器函数的值将指定一个与新播放器状态相对应的整数。可能的值是:

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).

当播放器首次加载视频时，它会广播未开始 (-1) 事件。当视频被提示并准备好播放时，播放器将播放视频提示 (5) 事件。在您的代码中，您可以指定整数值，也可以使用以下命名空间变量之一:

YT.PlayerState.ENDED
YT.PlayerState.PLAYING
YT.PlayerState.PAUSED
YT.PlayerState.BUFFERING
YT.PlayerState.CUED

Answer 1

YT.PlayerState.PLAYING 是一个状态，不是一个事件，您可以监听的事件是 onStateChange 那么如果状态正在播放，您可以从播放器获取信息并相应地更新搜索栏。

player.addEventListener("onStateChange", updateBar);

function updateBar () {
    if (YT.PlayerState.PLAYING) {
        console.log(player.getCurrentTime());
        setTimeout(updateBar,200);
    }
}

我之前回答过这个但是很糟糕:-( 我仍然在这里留下旧的懒惰答案代码的链接:http://jsfiddle.net/nvtsazbr/