YouTube視頻結束時隱藏Div

Question

我有一個絕對位置的div，內嵌YouTube視頻。我把它放在我網站上的另一張圖片上，目的是向首次訪問者展示一段短視頻，然後用視頻隱藏div，以顯示該頁面的原始內容。

我知道如何隱藏和顯示我的div與點擊事件，但我對JavaScript很新。我需要幫助編寫確定YouTube視頻已結束並應用可見性的功能：隱藏到我的分區。任何幫助是極大的讚賞！

Answer 1

你想仔細看看documentation，特別注意事件部分。

您將使用

onStateChange： 這個事件每當玩家的狀態變化。可能的值是未分開的（-1），結束的（0），播放的（1），暫停的（2）， 緩衝（3），視頻提示（5）。當第一次加載SWF時， 將播放未啓動的（-1）事件。當視頻被引導並準備好時 播放它將播放視頻引用事件（5）。

，你會想要做的事，當狀態等於0，這意味着端，類似於下面的內容：

// attach your listener 
    function onYouTubePlayerReady(playerId) { 
     var ytplayer = getElementById("myytplayer"); 
     ytplayer.addEventListener("onStateChange", "onytplayerStateChange"); 
    } 
// your callback function 
    function onytplayerStateChange(newState) { 
     if (newState === 0){ 
      $('yourContainingDiv').hide(); 
      // or if you want to just remove it... 
      $('yourContainingDiv').remove(); 
     } 
    } 

如果您在使用的addEventListener麻煩，檢查出YouTube player api - addEventListener() does not work for me?

addEventListener看起來像早期版本的IE不支持，可能會稍微有點bug