制作一个从列表服务器端随机播放视频的 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

我添加了一些针对更新/更改的 cmets。这假设 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();
    }
}