javascript - 使YouTube视频播放器从列表服务器端随机播放视频

Question

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

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

就我所知，嵌入式YouTube播放列表只能包含200个视频，甚至认为实际限制是5000个。

更重要的是，即使我实际上使用YouTube播放列表来定义列表，也不想将其暴露于使用的末尾(即使仅在代码中显示)，因为我想在人们接触时保持“惊喜”因素观看视频。

因此，我尝试制作一个预定义的列表，并使用PHP在服务器端加载该列表。我对这种编程了解甚少，因此我根据之前做过的事情进行了一些测试，并在网上找到了一些东西，但是我无法按需使用它。

首先，我做了一个.php文件，该文件从字符串中随机选择了一个YouTube ID(该方法可以改进，但可能不在问题范围内)

<?php
$input = array("kfchvCyHms", "UiyDmqO59QE", "PkVbF9DmtSw");
echo $input[array_rand($input)];

然后在主页中，加载文件中提供的给定YouTube ID，并尝试与生成的播放器混合:

//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>

它不起作用，因为:

我也无法使第一个视频也是随机的，所以

“随机”视频只是.php页面提供的第一个视频，因为从未通过此方法重新加载。

关于如何改善这一点的任何想法？

Answer 1

我添加了一些针对更新/更改的评论。这假设youtube安装程序正在运行，并且jQuery> = 3.0 for .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();
    }
}