javascript - 在 youtube api 中检测播放事件

Question

我正在寻找一种方法来通过 Javascript 检测嵌入式 Youtube 视频中的播放事件。现在我能够检测到状态变化，但我无法弄清楚如何解除绑定(bind)事件并触发另一个事件说它已完成。我也不想使用 add/removeEventListener，因为我猜 IE8 及以下版本没有此功能。

到目前为止我的代码，

    function onYouTubePlayerReady(playerId) {
    console.log('loaded');
    var ytPlayer = document.getElementById(playerId);
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    console.log("Player's new state: " + newState);
    if(newState === 1) {
        sendYtUrl();
     }
}

function sendYtUrl() {
    console.log('play detected');
    ytplayer.removeEventListener("onStateChange");
} 

我希望弹出 sendYtUrl，删除监听器，然后做我需要做的任何事情，或者更好的是，保持它更干净并将其保留在相同的函数中。

提前致谢!

Answer 1

您不必解除绑定(bind) onStateChange event知道视频何时结束或完成。 onStateChange 只需要一个事件监听器。每次发生这些情况时，它都会被触发并返回以下状态:

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

在您的函数 onytplayerStateChange 中，添加另一个 if 语句以在视频完成时捕获:

function onytplayerStateChange(newState) {
    console.log("Player's new state: " + newState);
    if(newState === 1) {
        sendYtUrl();
    } else if(newState === 0) {
        console.log("Video has ended!");
    }
}