2016-02-11 89 views
0

我在背景中使用某種帶有YouTube播放列表的滑塊。我想知道視頻何時發生變化,因此我可以將滑塊文本更改爲正確的文本。視頻更改時檢測 - YouTube iFrame API

我搜索了API頁面(https://developers.google.com/youtube/iframe_api_reference#Events),似乎無法找到視頻更改時觸發的事件。有一個嗎?

這是我的代碼,直到現在。

var tag = document.createElement('script'); 

tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

window.player; 
var player; 

var playlistVideos = new Array(); 
jQuery('#playlistSlider span').each(function(){ 
    playlistVideos.push(jQuery(this).html()); 
}) 

//console.log(playlistVideos) 

function onYouTubePlayerAPIReady() { 
    player = new YT.Player('playlistSlider', { 
     height: '390', 
     width: '640', 
     loadPlaylist:{ 
      listType:'playlist', 
      list:playlistVideos, 
      index:parseInt(0), 
      //suggestedQuality:'small' 
     }, 
     events: { 
      'onReady': onPlayerReady, 
      //'onStateChange': onPlayerStateChange 
     }, 
    }); 
} 
function onPlayerReady(event) { 
    event.target.loadPlaylist(playlistVideos); 
    event.target.mute(); 
    event.target.setLoop(true); 
} 

獎金也將是知道什麼是當前的視頻播放(索引)。

+0

嘿,我的回答有幫助嗎?隨時跟進任何其他問題。 – JAL

+0

還沒有嘗試,但聽起來沒錯。 – Fredy31

+0

是的工作。我在我的播放列表中爲我的文本分配了每個視頻ID的對象,並且每次觸發onplayerstatechange時都會通過當前視頻ID更改文本(從http://stackoverflow.com/a/14778040/954867獲取ID) – Fredy31

回答

1

收聽播放器的onStateChange回調。

events: { 
    onReady': onPlayerReady, 
    'onStateChange': onPlayerStateChange 
} 

如果事件值爲0,則視頻結束

function onPlayerStateChange(event) { 
    if (event.data == 0) { 
     // video ended 
    } 
} 

對於知道當前正在播放的視頻的索引,保持可變index其被初始設置爲0作爲當前視頻結束並加載下一個,將index加1。 index值將指向您的playlistVideos中的當前視頻。