Создание видеоплеера YouTube, который воспроизводит видео случайным образом со стороны сервера списков

Я хочу сделать встроенное видео YouTube, которое случайно выбрано из предопределенного списка, и когда оно закончится, чтобы воспроизвести другое случайное видео из того же списка и так далее.

Это относительно легко сделать с плейлистом YouTube и сценариями, чтобы сделать список, чтобы перетасовать видео вместо воспроизведения в заданном порядке, но у меня есть две проблемы с тем, чтобы сделать это:

  • На данный момент, насколько мне известно, встроенные плейлисты YouTube могут содержать только 200 видео, даже если фактический лимит, кажется, составляет 5000.
  • Что еще более важно, даже если я на самом деле использую плейлист YouTube для определения списка, я не хочу выставлять его до конца (даже если он отображается только в коде), поскольку я хочу сохранить фактор «сюрприз», пока люди смотрят видео.

Таким образом, я пытаюсь просто сделать предопределенный список, который загружается на стороне сервера с PHP. Я очень мало знаю о такого рода программировании, поэтому я сделал некоторые тесты, основанные на материале, который я сделал раньше, вдоль некоторых вещей, которые я могу найти в интернете, но я не могу заставить его работать, как я хочу.

Во-первых, я сделал .php файл, который выбирает идентификатор YouTube наугад из строки (метод может улучшиться, но это может быть за пределами области вопроса)

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

Затем на главной странице я загружаю данный идентификатор YouTube, указанный в файле, и пытаюсь смешаться с сгенерированным плеером:

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

Это не работает, потому что:

  • I can’t get to make the first video is random too and
  • The «random» video is just the first one the .php страница дает, так как никогда не перезагружается через этот метод.

Есть идеи, как я могу это улучшить?

1 ответ

  1. Я добавил некоторые комментарии к обновлениям / изменениям. Это предполагает, что настройка 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();
        }
    }