onStateChange不會觸發

Question

我一直在嘗試一段時間來創建一個嵌入式的YouTube播放器，當有人加載一個頁面時，它將在隨機播放中自動啓動一個播放列表。一些搜索讓我找到了一種替代解決方案：在當前播放列表結束時，在播放列表中加載一個隨機索引的新視頻。

這是我目前擁有的代碼：

<div id="player"></div> 
<button value="next" onclick="next();">Next</button> 
<script> 
    var tag = document.createElement('script'); 

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

var player; 

function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     events: { 
      'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
     } 

    }); 
} 
var oldNumber = 0; 
var NewNumber = 0; 

function newRandomNumber(min, max) { 
    oldNumber = NewNumber; 
    NewNumber = Math.floor(Math.random() * max) + min; 
    if (NewNumber == oldNumber) { 
     newRandomNumber(min, max); 
    } else { 
     return NewNumber; 
    } 
} 


function onPlayerReady(event) { 
    next(); 

} 

function next() { 
    player.loadPlaylist({ 
     'listType': 'playlist', 
     'list': 'PLxBKLJmrCEphpgRihb-H0QUColR_bFu6s', 
     'index': newRandomNumber(0, 139), 
     'startSeconds': '0', 
     'suggestedQuality': 'small' 
    }); 
    player.setShuffle({ 
     'shufflePlaylist': true 
    }); 
} 


function onPlayerStateChange(event) { 
    if (event.data == 0) { 
    next(); 
} 
} 
</script> 

帶着幾分測試在這裏和那裏看起來這是不正常工作的一部分：

function onPlayerStateChange(event) { 
    if (event.data == 0) { 

我已經嘗試將其設置爲其他整數並進行適當測試，但似乎沒有任何事情會觸發事件。

對於它的價值，大部分的代碼是從這裏取，但我一直沒能找到該網頁上的任何幫助：Shuffle Playlist fix for Youtube API

感謝。

Answer 1

如果我們在實例化Youtube播放器的同時設置隨機和播放列表參數，shuffle和events將起作用。這裏是顯示工作播放器的代碼：

<div id="player"></div> 
<button value="next" onclick="next();">Next</button> 
<script> 
    var tag = document.createElement('script'); 

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

var player; 

function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
     }, 
     playerVars: { 
      'html5': 1, 
      'listType': 'playlist', 
      'list': 'PLxBKLJmrCEphpgRihb-H0QUColR_bFu6s', 
      'index': newRandomNumber(0, 139), 
      'startSeconds': '0', 
      'autoplay': 1, 
      'suggestedQuality': 'small' 
      } 

    }); 

} 
var oldNumber = 0; 
var NewNumber = 0; 

function newRandomNumber(min, max) { 
    oldNumber = NewNumber; 
    NewNumber = Math.floor(Math.random() * max) + min; 
    if (NewNumber == oldNumber) { 
     newRandomNumber(min, max); 
    } else { 
     console.log(NewNumber); 
     return NewNumber; 
    } 
} 

function onPlayerReady(){ 
    //nothing to do as of now. 
} 

function next() { 
    console.log('next called'); 
    player.setShuffle({ 
     'shufflePlaylist': true 
    }); 
} 


function onPlayerStateChange(event) { 
    if (event.data == 0) { 
     next(); 
    } 
} 
</script>