在youtube api中检测播放事件

Question

我正在寻找一种方法来通过Javascript检测嵌入式Youtube视频中的播放事件.现在我能够检测到状态变化,但我无法弄清楚如何取消绑定事件并触发另一个事件,说它已完成.我也不想使用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

您无需取消绑定onStateChange事件即可知道视频何时结束或已完成.在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!");
    }
}