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

时间:2017-01-12 23:27:11

标签: javascript php jquery ajax youtube

我想制作从预定义列表中随机选择的嵌入式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页面提供的第一个视频,因为从未通过此方法重新加载。

关于如何改进这一点的任何想法?

1 个答案:

答案 0 :(得分:0)

我添加了一些针对更新/更改的评论。这假设youtube设置正常,jQuery&gt; = 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();
    }
}
相关问题