我正在使用Fancybox来显示上传到YouTube的视频。我想在视频结束时执行操作(在本例中,从视频移动到组中的下一个元素--图像),所以我也使用了YouTube API。
这个页面在桌面浏览器上运行得非常好(我认为安卓系统还没有进行广泛的测试),但是在我的iPhone上它无法加载视频。覆盖即将出现,但它似乎试图自动播放视频,然后变成黑色。
我目前使用的是jQuery 1.8.3 (我用1.10尝试过,但没有起作用,所以我降低了一个级别)和Fancybox 2.1.5。
下面是相关的HTML:
<div class="content" id="main">
<div id="logo">
<a class="fancybox fancybox.iframe" id="logo-link" data-fancybox-group="group01"href="http://www.youtube.com/embed/Bc0qNwaSxlM"></a>
<a class="fancybox" id="v-link" data-fancybox-group="group01" data-fancybox-type="image" href="img/superhard_v.png" title="<a href='#' id='return-link'>or return to ihardyou</a>"></a>
</div>
</div>
JavaScript:
window.onYouTubePlayerAPIReady = function() {
// Initialise the fancyBox after the DOM is loaded
$(document).ready(function() {
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
helpers: {
media: {},
overlay : {
css : {
'background' : 'rgba(0, 0, 0, 0.95)'
}
}
},
youtube : {
vq: 'hd1080'
},
padding: 0,
margin: 30,
autoSize: false,
arrows: false,
'closeBtn' : false,
beforeShow : function() {
// Find the iframe ID
var id = $.fancybox.inner.find('iframe').attr('id');
// Create video player object and add event listeners
var player = new YT.Player(id, {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
if (this.index === 1) {
$('.fancybox-outer').css("padding-bottom","100px");
}
},
afterShow: function() {
if (this.index === 1) {
$("img.fancybox-image").click(function(event) {
event.preventDefault();
newLocation = "vanity/";
$('body').fadeOut(1000, newPage);
});
$('#return-link').click(function(event) {
event.preventDefault();
$.fancybox.close();
});
}
},
tpl: {
wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin" style="background-color:transparent;"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>'
},
iframe: {
preload: false
}
});
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
// Fires when the player's state changes.
function onPlayerStateChange(event) {
// Go to the image after the current one is finished playing
if (event.data === 0) {
setTimeout(function(){$.fancybox.next()},1250);
}
}
我输入了autoSize
和preload: false
for iframe
,因为我从其他人的问题中找到了解决方案,但它们没有起作用。我特别希望后者会因为这个问题和示例JSFiddle而起作用,但它没有起作用,这让我相信这可能是API的一个问题?我还查看了使用API的Fancybox主页上的示例,它也没有在我的iPhone上工作,进一步证实了我的怀疑。
如果有人有一个解决办法或任何如何解决这个问题的想法,这将是非常感谢。谢谢!
发布于 2013-11-07 16:06:57
为什么不重新检查fancybox网站中使用的各种示例:
您可以尝试如下: *Html*
<li>
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
</li>
Javascript:
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
我们检查他们的官方小提琴youtube iframe:这是他们的小提琴
Html:
<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?enablejsapi=1&wmode=opaque">Video #1</a>
<br />
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/cYplvwBvGA4?enablejsapi=1&wmode=opaque">Video #2</a>
你可以查一下剩下的
https://stackoverflow.com/questions/17736483
复制相似问题