使用YouTube API的自定义进度栏

Rex*_*xha 1 javascript youtube youtube-api

我想使用YouTube API创建自定义进度栏,并且我认为执行进度计算的最佳事件监听器是YT.PlayerState.PLAYING事件监听器。但是,此事件根本不起作用。我认为这是完全错误的。有任何想法吗?

player.addEventListener("YT.PlayerState.PLAYING", function() {
    console.log(player.getDuration());
});
Run Code Online (Sandbox Code Playgroud)

添加或删除事件监听器

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).
Run Code Online (Sandbox Code Playgroud)

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

YT.PlayerState.ENDED
YT.PlayerState.PLAYING
YT.PlayerState.PAUSED
YT.PlayerState.BUFFERING
YT.PlayerState.CUED
Run Code Online (Sandbox Code Playgroud)

err*_*sto 5

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

player.addEventListener("onStateChange", updateBar);

function updateBar () {
    if (YT.PlayerState.PLAYING) {
        console.log(player.getCurrentTime());
        setTimeout(updateBar,200);
    }
}
Run Code Online (Sandbox Code Playgroud)

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