初始化 youtube api 以定位 ajax 加载的 iframe

Question

这是我第一次使用 Youtube API，在完成大部分工作后，我遇到了最后一个问题，我似乎无法解决，所以如果您能花几分钟时间来解决，我将不胜感激帮助。 简单来说就是：

• 我有一个视频滑块（轮播）。在主视频下方，是其他相关视频的缩略图（这是网站：kushtube.com）

• 当我点击相关视频缩略图时，主要播放器内容通过 AJAX 加载

我最终想要实现的是，当当前视频结束时，下一个 vicdo 开始自动播放。 现在，在我做了一些工作之后，我设法让它像那样工作，但是 它仅适用于页面加载...

如果我点击相关视频缩略图之一，播放器的内容会通过 AJAX 加载，我似乎无法重新初始化 Youtube API 以定位新的 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>

您有什么有用的建议吗？我真的很感激。

Answer 1

单击<li> 时调用ytInit() 会创建一个新的播放器对象。我认为这不是你想要的。

你试过了吗：

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）事件才能启动播放器。