在youtube api中检测播放事件

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

我的代码到目前为止，

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，删除监听器，然后做我需要做的任何事情，或者甚至更好，保持清洁并将其保留在同一个function中。

提前致谢！

Answer 1

您无需取消绑定onStateChange事件即可知道video何时结束或已完成。 onStateChange只需要有一个事件监听器。 每次出现以下任何情况时，它都会被触发并返回以下状态：

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

在函数onytplayerStateChange ，添加另一个if语句以在video完成时捕获：

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

Answer 2

非常感谢！ 这让我朝着正确的方向发展。

这就是我最终做的事情。

 var ytPlaying = 0; var ytPlayed = ''; var currPlaying = ''; function onYouTubePlayerReady(playerId) { //console.log('loaded'); var ytPlayer = document.getElementById(playerId); ytPlayer.addEventListener("onStateChange", "onytplayerStateChange"); } function onytplayerStateChange(newState) { currPlaying = window.location.hash; //console.log("Player's new state: " + newState); if (newState === 1) { console.log('playing'); clientSideTracking(); } } function clientSideTracking() { // console.log('client tracking'); //console.log(currPlaying, ytPlayed); if (currPlaying != ytPlayed) { // if current playing isn't the same as prior played //console.log('different'); // then it's different - track it. var event = new AnalyticsPageEvent('Youtube Analytics', currPlaying); event.trigger(); } ytPlaying = 0; // change back to 'not played' and change to 0 so that it's logged ytPlayed = currPlaying; } 

它的作用是当有一个尚未播放的新URL时触发AnalyticPageEvent。 🙂