Youtube 视频无法在 Flexslider 中播放答案

【问题标题】：Youtube videos not playing in FlexsliderYoutube 视频无法在 Flexslider 中播放
【发布时间】：2013-11-25 22:59:45
【问题描述】：

Youtube 视频没有在我的 flexslider 库中播放？是否存在已知问题，我进行了相当广泛的搜索，但没有找到任何答案。我觉得我不需要提供任何代码，它只是一个带有图像和视频列表的直接滑块（vimeo 工作正常）。我没有使用 youtube API，我需要吗？

感谢您的帮助:)

【问题讨论】：

标签： jquery youtube youtube-api flexslider

【解决方案1】：

我确实需要使用 Youtube API 才能工作。下面的代码让我可以暂停 flexslider，播放视频，完成后，恢复 flexslider。

var player, firstScriptTag, tag = document.createElement('script');

//async youtube api script reference
tag.src = "https://www.youtube.com/iframe_api";
firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

//called when iframe api loaded
function onYouTubeIframeAPIReady() {
     player = new YT.Player('player', {    
         width: 960,
         height: 540,
         videoId: 'XXXX',
         playerVars: { 'autoplay': 0, 'showinfo': 0, 'loop': 1, 'rel': 0, 'vq': 'hd1080', 'controls': 0 },
         events: {                 
             'onStateChange': function(event) { 
                  controlSlider(event);
             }
         }
      });
}

//manually control video
function toggleVideo(state) {
    if(state == "pause") {
        player.pauseVideo();
    } else {
        player.playVideo();
    }
}

//play or pause flexslider based on youtube event states
function controlSlider(event) {

    var playerstate=event.data;
    console.log(playerstate);
    if(playerstate==1 || playerstate==3){
        $('.flexslider.main').flexslider("pause");
    }
    if(playerstate==2){        
        $('.flexslider.main').flexslider("play");
    }
}

//flexslider load after dom created
$(window).load(function () {
        $('.flexslider.main').flexslider({
            controlNav: true,
            directionNav: false,
            video: true,
            pauseOnHover: false,
            before: function (slider) {
                //get next slide and find the video
                var curSlide = $(".main li").eq(slider.animatingTo),
                    currentFrame = curSlide.find('iframe');

                //if video doesn't exist in slide, pause it
                if (currentFrame.length == 0) {
                    toggleVideo('pause');
                }
                else {
                    toggleVideo('play');
                }
            }
        });
});

【讨论】：

【解决方案2】：

感谢 Beth 的代码，我注意到 Flexslider 选项设置为“video: true”。

我添加了视频设置，现在我的 Youtube 视频正在播放，我没有使用 YT API。

【讨论】：