Youtube视频无法在Flexslider中播放

时间:2013-11-25 22:59:46

标签: jquery youtube youtube-api flexslider

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

感谢您的帮助:)

2 个答案:

答案 0 :(得分: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');
                }
            }
        });
});

答案 1 :(得分:1)

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

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