Question

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

感谢您的帮助：）

Answer 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');
                }
            }
        });
});

Answer 2

感谢Beth的代码，我注意到Flexslider选项设置'video：true'。

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

Youtube视频无法在Flexslider中播放

2 个答案: