製作一個從列表服務器端隨機播放視頻的YouTube視頻播放器

Question

我想製作一個嵌入式YouTube視頻，它是從預定義列表中隨機選擇的，當它結束時，播放來自同一列表的另一個隨機視頻，等等。

這是比較容易做到這一點與YouTube播放列表和腳本做出的排行榜重新洗牌，而不是在給定的順序播放視頻，但我有兩個問題與製作是：

• 至於現在據我所知，嵌入的YouTube播放列表只能包含200個視頻，甚至認爲實際的限制似乎是5000.
• 更重要的是，即使我實際使用YouTube播放列表來定義列表，我也不想公開它到了最後的使用（即使只在代碼中顯示），因爲我想在觀看視頻的同時獲得「驚喜」因素。

因此，我嘗試製作一個預定義的列表，使用PHP在服務器端加載。我對這種編程知之甚少，所以我基於之前做過的一些測試，並在網絡上找到了一些我可以找到的東西，但是我無法按照自己的想法來實現。

首先，我這樣做，隨機選擇一個的YouTube ID出串的PHP文件（該方法可改善，然而，其可以是問題的範圍之外）

<?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 setup正在工作，並且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(); 
    } 
}