Internet Explorer 和 Firefox 上的 YouTube IFrame API
Posted
技术标签:
【中文标题】Internet Explorer 和 Firefox 上的 YouTube IFrame API【英文标题】:YouTube IFrame API on Internet Explorer and Firefox 【发布时间】:2012-12-18 07:59:21 【问题描述】:更多的是“答案”而不是“问题”,但在其他地方没有找到,我将其发布在这里。
我在所有版本的 IE 和 Firefox 中初始化 iFrame API 时遇到了困难,其中有一些自定义实现。基本上,它会加载 API,但不会创建播放器对象。
经过一番反复试验,我终于发现它不起作用,因为我传递给对象的 div
ID 的 CSS 可见性设置为 'none'
。一旦它被设置为'visible'
,整个事情就起作用了。之后,我尝试将div
CSS 设置为'display:none'
(该应用要求在用户请求之前隐藏视频),这也导致 iFrame API 静默失败(从不回调'onPlayerReady'
)。
因此,长话短说,当您使用 YouTube iFrame API 对您希望在稍后保持隐藏状态的 div
进行初始化时,请使用绝对定位等 CSS 技术将其推离屏幕,直到您以后需要它为止。此外,发现一旦初始化了播放器对象并调用了'onPlayerReady'
,您就可以整天打开和关闭显示,一切仍将按预期工作。
【问题讨论】:
这是一个很好的观点,而且还值得一提的是,如果你有一个可见的播放器,然后在播放器(或容器)上设置display: none
,播放器就会被浏览器有效地清除。您以后将无法设置 display: inline
并重用相同的播放器实例。将播放器移出视口也是这里的答案。
请坚持格式。即使您知道所发布内容的答案,也请将其发布为以问题形式表达的问题,然后发布答案。 (如果需要,问题网络表单允许您同时发布两者,因此没有理由将答案放入问题帖子中。)
【参考方案1】:
您应该将播放器容器留空,例如
<div class="myPlayerContainer"></div>
当你想展示它时,只需将它附加到容器中:
$('#showVideoBtn').click(function()
$('.myPlayerContainer').show().append('~ code of youtube iframe ~');
);
【讨论】:
【参考方案2】:Yotam 是对的,看下面:
html:
<button onclick="toggleYoutube();">show / hide</button>
<div id="youtube"></div>
JS(使用 jQuery):
var visible = false;
function toggleYoutube()
visible = !visible;
if ( visible )
$("#youtube").append( '<iframe id="video" src="http://www.youtube-nocookie.com/embed/cjvIeNt93nc?rel=0" frameborder="0" allowfullscreen></iframe>' );
else
$("#video").remove();
在http://jsfiddle.net/wFVhT/2/查看完整代码
【讨论】:
以上是关于Internet Explorer 和 Firefox 上的 YouTube IFrame API的主要内容,如果未能解决你的问题,请参考以下文章
在同一台计算机上运行 Internet Explorer 6、Internet Explorer 7 和 Internet Explorer 8
html Internet Explorer支持使用条件注释。以下代码段在旧版Internet Explorer中添加了HTML5和CSS3支持
html Internet Explorer支持使用条件注释。以下代码段在旧版Internet Explorer中添加了HTML5和CSS3支持
html Internet Explorer支持使用条件注释。以下代码段在旧版Internet Explorer中添加了HTML5和CSS3支持
html Internet Explorer支持使用条件注释。以下代码段在旧版Internet Explorer中添加了HTML5和CSS3支持
html Internet Explorer支持使用条件注释。以下代码段在旧版Internet Explorer中添加了HTML5和CSS3支持