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