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

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

你试过了吗？

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

将youtube api初始化为目标ajax加载的iframe

1 个答案: