我一直在拉我的头发试图让FF / IE一个相当简单的YouTube API集成工作,到目前为止有没有运气。
这听起来像正在取得无论是范围问题或调用播放器初始化之前的一切,但我试过表明它不是这两件事情之一。 另外值得注意的是,一切完美的(只)的Chrome。
// Async api load per YT documentation...
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Declare player and set basic functions...
var player
playVideo = function() { player.playVideo(); }
stopVideo = function() { player.stopVideo(); }
// YT Api ready function...
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: "TkJcg4bmAYs",
events: {
'onStateChange': onPlayerStateChange
}
});
// After player object created, bind popup function to page anchors...
var popup = $('#video-popup')
, popupFrame = $(popup).children('.center')
;
$('a[data-vid]').click(function(e){
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var clicked = $(e.target).closest('a')
, videoID = $(clicked).attr('data-vid')
;
if (!$(popup).hasClass('working')){
// If popup isn't already working, cue video and animate popup in...
player.cueVideoById({videoId:videoID});
$(popup).addClass('working');
$(popup).css('display','block').animate({
opacity: '1'
}, 200, function(){
playVideo();
$(popup).removeClass('working');
});
}
});
}
链接到与API和弹出代码测试页,在Chrome中工作,但不是在其他浏览器。 http://www.crackin.com/dev/regions/pathBuild/
嵌入我的键盘按键的一半到我的额头,我终于越过问题的令人沮丧的单根绊倒......这只不过是一个知名度的问题! ARRGG! 没有;但是Chrome是足够聪明,还是初始化和目标甚至隐藏:显然,如果在设置为显示它被初始化Firefox和IE用不上的球员对象。
的修复,在我的特定情况下,是加载弹出作为显示:块不透明度:0,然后初始化API,那么设置弹出到显示:在YT API初始化函数内没有。 事情是这样的:
首先,CSS ...
#video-popup { display: block; opacity: 0; }
..然后JavaScript的...
var player
, popup = $('#video-popup')
;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: "TkJcg4bmAYs"
});
$(popup).css('display','none');
}
现在,我需要去喝醉。
附加STUFF:终于找出了问题的根源后,我能分离一些额外的IE浏览器的问题,拿出解决方案。 这是以防万一别人是有一个类似的问题,他们可以从这个开拓出自己的解决方案。 我的解决方案可能会有点特殊情况,但如果别人是把在弹出窗口的YouTube视频,并需要支持IE,这可能帮助。
上述修复程序(设置显示:无在YT准备功能)似乎并没有完全对IE8的工作,但在短暂的暂停包装很快就被固定:
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: "TkJcg4bmAYs"
});
setTimeout(function(){
$(popup).css('display','none');
}, 500);
}
IE7是有点棘手,因为它似乎是,如果玩家使用显示EVER隐藏:没有,它会立即变得不可用,无论它的被初始化。
使用条件注释类适用于标签,你可以添加一些IE特定的CSS,以保持弹出的“可见”,但其隐藏屏幕外代替。
#video-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; opacity: 0; }
.ie7Detect #video-popup { display: block; left: -101% }
#video-popup.open { left:0 !important; }
还有一种情况,在这两个IE7和8甚至当父容器被设置为不透明度0(这恰好同时页面仍在加载)的YouTube播放器仍是可见的一个问题。 我想添加规则,进一步目标在弹出的内容,并设置其不透明度还可以,但没有工作,是不是超级干净要么。 我定居在使用加载类了。
所以,在弹出具有收纳类:
<div id="video-popup" class="loading">
<!-- bunch of stuff in here -->
</div>
和功能更新中...
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: "TkJcg4bmAYs",
});
setTimeout(function(){
$(popup).removeClass('loading');
}, 500);
}
CSS看起来是这样的...
#video-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; opacity: 0; }
.ie7Detect #video-popup, #video-popup.loading { display: block; left: -100% }
#video-popup.open { left:0 !important; }
拼图的最后一块将纳入“开放”一类名称为您的弹出功能时,它实际上假定可见。
希望帮助别人在将来避免一些潜在的麻烦。 不利的一面,你可能不会非常热情地得到解决这些问题,你可能以后一直醉酒后。
和平,哟。
首先,感谢搞清楚了这一点。 和你一样,我想我想尽解决方案,我能找到也没有用。
第二,我正在写,因为虽然我的问题是,在本质上非常相似,我试图加载通过视频bxSlider jQuery插件,我想后,希望它可以挽救别人的一段时间,我的解决方案。
我只是简单地叫上一个功能onSliderLoad
方法。 这里的功能是什么样子:
function()
{
if ($('.slideshow-item-video').length > 0) {
$('.slideshow-item-video').each(function()
{
$(this).css('display', 'block');
setTimeout(function()
{
$(this).css('display', 'none');
}, 500);
});
}
}
我只是给包含视频的特定类,使他们看到这样的API可以访问元素,然后设置超时再次隐藏元素幻灯片。
该解决方案在Firefox和IE8 +。 我还没有想出了IE7的解决方案,但是,它的IE7。
文章来源: YouTube API - Firefox/IE return error “X is not a function” for any 'player.' request