使用YouTube API自定义进度条

Custom progress bar using YouTube API

本文关键字：自定义 YouTube API 使用      更新时间：2023-09-26

我想使用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

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/

相关文章：