Javascript 制作从列表服务器端随机播放视频的YouTube视频播放器

我想制作一个从预定义列表中随机选择的嵌入式YouTube视频，当它结束时，播放同一列表中的另一个随机视频，以此类推

使用YouTube播放列表和脚本制作列表来洗牌视频，而不是按照给定的顺序播放，这样做相对容易，但我有两个问题：

• 据我所知，目前嵌入的YouTube播放列表只能包含200个视频，即使实际限制似乎是5000个
• 更重要的是，即使我真的使用YouTube播放列表来定义列表，我也不想将其暴露到使用的最终版本（即使只在代码中显示），因为我想在人们观看视频时保留“惊喜”因素

因此，我尝试创建一个预定义的列表，用PHP在服务器端加载。我对这类编程知之甚少，所以我在以前做过的基础上做了一些测试，在网上可以找到一些东西，但我无法让它按我所希望的方式工作

首先，我创建了一个.php文件，从字符串中随机选择一个YouTube ID（该方法可以改进，但这可能超出了问题的范围）

---

我添加了一些针对更新/更改的注释。这假设youtube设置正在运行，并且jQuery>=3.0表示
.done

function GetNextVideoFromServer() {
    $.ajax({
        url : "testytid.php",
        cache : false
    })
    .done(function (data) {
        console.log(data); // you might want to check this first. the data returned should just be a single id.
        playNewVideo(data); // call the play function
    });
}

// create youtube player
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
            height : '390',
            width : '640',
            videoId : 'tAg5vLb3ZEs', //the default "videoId" should be random too, but I can't get that to work.
            events : {
                'onReady' : onPlayerReady,
                'onStateChange' : onPlayerStateChange
            }
        });
}

// autoplay video
function onPlayerReady(event) {
    event.target.playVideo();
}

function playNewVideo(id) {
    player.loadVideoById(id); //loads the random ID given by the .php file
    event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {
    if (event.data === 0) {
        GetNextVideoFromServer();
    }
}

下一个视频的随机选择是在客户端还是服务器上进行的？是在服务器上进行的。
//JQuery is loaded in the head.
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>

<script>
//This creates a variable out of the page content (a single YouTube ID in this case)
var ching
$.get("testytid.php", function( my_var ) {
ching=my_var;
}, 'html');

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
        videoId: 'tAg5vLb3ZEs', //the default "videoId" should be random too, but I can't get that to work.
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    function playNewVideo(id){
      player.loadVideoById(ching); //loads the random ID given by the .php file
      event.target.playVideo();
      playNewVideo(ID)
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) { 
          playNewVideo();
        }
    }
</script>

function GetNextVideoFromServer() {
    $.ajax({
        url : "testytid.php",
        cache : false
    })
    .done(function (data) {
        console.log(data); // you might want to check this first. the data returned should just be a single id.
        playNewVideo(data); // call the play function
    });
}

// create youtube player
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
            height : '390',
            width : '640',
            videoId : 'tAg5vLb3ZEs', //the default "videoId" should be random too, but I can't get that to work.
            events : {
                'onReady' : onPlayerReady,
                'onStateChange' : onPlayerStateChange
            }
        });
}

// autoplay video
function onPlayerReady(event) {
    event.target.playVideo();
}

function playNewVideo(id) {
    player.loadVideoById(id); //loads the random ID given by the .php file
    event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {
    if (event.data === 0) {
        GetNextVideoFromServer();
    }
}