javascript - 如何从列表中播放随机视频？

Question

我有一个数组中的视频列表，我希望能够使播放器在当前视频结束后播放列表中的另一视频。我遇到的问题是，它会在结束时重复播放同一视频，而不是选择要播放的新视频。我一直在寻找类似的问题，还没有找到任何使它起作用的方法。任何意见，将不胜感激!

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

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

// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function rotateYT() {
    var videos = [
        'be0T_owA1PU',
        'Kp7eSUU9oy8',
        'Th0V-fxo9CE',
    ];

    var index=Math.floor(Math.random() * videos.length);
    return videos[index];
}

var player;
function onYouTubeIframeAPIReady() {
    var videoID = rotateYT();
    player = new YT.Player('player', {
        height: '300',
        width: '300',
        videoId: videoID,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    player.setPlaybackRate(1);
    event.target.playVideo();
}

// 5. This should play another random video
function onPlayerStateChange(event) {        
    if(event.data === 0) {
        event.target.setShuffle(true); 
        event.target.playVideo();
    }
}

我可能把代码写错了，所以这是jsfiddle ive一直在努力的地方

https://jsfiddle.net/bbasham/L20k7x1o/2/

Answer 1

您的问题是您没有告诉YouTube播放器使用视频的播放列表。相反，您一次只能设置一个视频ID，因此shuffle方法将不起作用。您需要更新方法，以便在重新启动之前交换视频ID:

// 5. This should play another random video
function onPlayerStateChange(event) {        
    if(event.data === 0) {
        //event.target.setShuffle(true); //useless unless the player has a playlist
        event.target.loadVideoById( rotateYT() ); 
        event.target.playVideo();
    }
}

这将导致播放器在重新启动播放器之前抓取新视频并将其设置为源。另外，您可以提供播放列表，然后使用随机播放。

Documentation