在现有播放器上启用 YouTube API答案

【问题标题】：Enable YouTube API on existing player在现有播放器上启用 YouTube API
【发布时间】：2011-03-23 07:15:35
【问题描述】：

我有一个嵌入的 youtube 视频，我希望应用 YouTube API。我使用jQuery添加url参数如下（demo）：

$(document).ready(function(){
 var obj = $('object');
 obj.find('embed').attr('src', function(i,s){return s+'&enablejsapi=1&version=3'})
 obj.find('param[name=movie]').attr('value', function(i,v){return v+'&enablejsapi=1&version=3'})

 $('.play').click(function(){
  obj.find('embed')[0].playVideo();
 });
 $('.pause').click(function(){
  obj.find('embed')[0].pauseVideo();
 })
});

这种方法在 Firefox 中效果很好，但在 IE 或 Chrome 中根本不行（不确定其他浏览器）。所以我的问题是如何修改它以使 API 在其他浏览器中工作？我是否必须完全删除该对象并使用SWFObject 替换它？

注意：嵌入代码直接来自 YouTube。

更新：我想如果我删除对象，添加 url 参数然后添加对象，我现在可以让它在 Chrome 中工作，但仍然不是 IE (updated demo)。

附录：当对象/嵌入已经包含启用代码时，为什么 YouTube API 不起作用？我试图避免使 SWFObject 成为依赖项。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="385">
 <param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1&enablejsapi=1&version=3"></param>
 <param name="allowFullScreen" value="true"></param>
 <param name="allowscriptaccess" value="always"></param>
 <embed src="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1&enablejsapi=1&version=3" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

【问题讨论】：

问题似乎是当您更改元素的 src 属性时，Chrome 和 IE 不会更新元素的 DOM/embed api。如果您直接在代码中添加查询字符串，则该代码确实有效。您的网站是否需要动态添加？
@Manticore：这不是必需的，我正在尝试修改插件。视频代码/链接由用户添加到列表中，因此我试图确定最简单的方法来完成这项工作，而无需设置任何规则，例如没有嵌入标签。
我遇到了同样的问题，在添加了 SWFObject 添加的 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 属性后，IE 开始对我表现得恰到好处。

标签： javascript jquery youtube-api

【解决方案1】：

关于 swfobject - 是的。 IE 对 Flash 嵌入的处理与所有其他浏览器略有不同（感谢 activex）。查看this article 了解原因，查看SWFObject documentation 了解更多信息。

另外，我最近创建了一个 jQuery 插件来帮助使用播放器 API 控制嵌入式播放器（基本上就是你在做什么）。

检查一下，它是 jQuery TubePlayer 插件 - http://www.tikku.com/jquery-youtube-tubeplayer-plugin

【讨论】：

所以看起来你依赖于 SWFObject 插件。我试图找出问题的本质。挖掘 SWFObject 代码以找出浏览器之间的差异对我来说并没有什么启示。
我放弃了，只是继续使用 SWFObject 插件，所以即使我仍然找不到问题的本质，我也会将您的答案标记为已接受。不过谢谢！

【解决方案2】：

IE 没有找到 $('object') 可能是因为您需要指定正确的类型（对 obj 长度发出警告），但如果您这样做 obj = $('embed') 它会起作用。以不同的方式包装东西可能是明智的，即执行$('<div id="test/>')，然后附加嵌入/对象并更改src 和movie 值。

编辑：IE 似乎没有注册object，直到它指定了type 或clsid 属性，例如

编辑#2：您可能只检查对象元素@http://savedbythegoog.appspot.com/retrieve_cache?unique_id=http://code.google.com/apis/ajax/playground/samples/boilerplateHTML/youtube/chromeless.html|http://code.google.com/apis/ajax/playground/samples/js/youtube/chromeless.js&defaultSample=true的outerHTML

【讨论】：

我无法复制 IE 找不到 $('object') 的问题，即使没有 CSID，至少在 IE8 中是这样。我确实尝试像 SWFObject 文件那样使用 outerHTML 添加原始 HTML，但它似乎没有任何区别。