如何播放列表中的随机视频？

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

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

Answer 1

您的问题是您没有告诉 YT 播放器使用视频播放列表。相反，您一次只设置一个视频 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