Блог

я впервые работаю с API Youtube, и после того, как я выполнил большинство задач, у меня возникла последняя проблема, которую я, похоже, не могу решить, поэтому я был бы признателен, если бы вы уделили несколько минут помощи. Вот это происходит простыми словами:

• У меня есть слайдер видео (карусель). Под основным видео находятся эскизы других связанных видео (это сайт: kushtube.com )
• когда я нажимаю на соответствующую миниатюру видео, основной контент проигрывателя загружается через AJAX

Чего я хотел в конечном итоге добиться, так это того, что когда текущее видео заканчивается, автоматически начинает воспроизводиться следующий vicdo. Теперь, после того, как я проделал некоторую работу, мне удалось заставить его работать таким образом, НО он работает только при загрузке страницы…

Если я нажму на одну из связанных миниатюр видео, содержимое проигрывателя загрузится через AJAX, и, похоже, я не могу повторно инициализировать API Youtube для настройки нового проигрывателя с загрузкой ajax.

Это мой текущий код:

 <script>
// global variable for the player
var player;

function ytInit(){
  // create the global player from the specific iframe (#video)
  player = new YT.Player('test', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStatusChange
    }
  });
}

// this function gets called when API is ready to use
function onYouTubeIframeAPIReady() { 
    ytInit();
}

jQuery(document).ready( function($){
    jQuery('ul.carousel-list li').click( function(){
        ytInit();
        jQuery('ul.carousel-list li.active').removeClass('active'); 
    });
});

function onPlayerStatusChange(event) {
    /* video status
    ----------------
    -1 (unstarted)
     0 (ended)
     1 (playing)
     2 (paused)
     3 (buffering)
     5 (video cued)
    */
    console.log( event );
    if( event.data == 0 ){

        var thisLI = jQuery('ul.carousel-list li.active');              //get active slider item
        var thisLINext = jQuery('ul.carousel-list li.active').next();   //get next slider item      
        var nextVideoCode = thisLINext.attr('video_code');              //get next video code
        var nextVideoTitle = thisLINext.attr('video_title');                //get next video code
        var nextVideoUrl = thisLINext.attr('video_url');                //get next video code

            thisLINext.addClass('active');                              //activate next slider item
            thisLI.removeClass('active');                               //deactivate current cslider item

            //load next video
            player.loadVideoById(nextVideoCode);

        //update video title in header
        jQuery('.entry-header h1.entry-title a').attr('href', decodeURIComponent(nextVideoUrl)).text(decodeURIComponent(nextVideoTitle)); 

    }
}

function onPlayerReady(event) {

  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function() {
    player.playVideo();
  });

  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  });

}

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
 

У вас есть какие-либо полезные предложения? Я был бы очень признателен.

Вызов ytInit() при нажатии кнопки <li> создает новый объект player. Я думаю, это не совсем то, что вы хотите.

Вы пробовали:

 jQuery('ul.carousel-list li').click( function(){
    // ytInit();
    // just load the video from the "video_code" attr
    player.loadVideoById(this.getAttribute('video_code'));
    jQuery('ul.carousel-list li.active').removeClass('active'); 
});
 

Если это не происходит автозапуск, то вам, возможно, придется дождаться YT.PlayerState.CUED события (т.Е. 5 ) в прослушивателе событий изменения статуса вашего плеера, чтобы запустить проигрыватель.