在现有播放器上启用YouTube API

时间:2010-07-30 14:47:21

标签: javascript jquery youtube-api

我有一个嵌入了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>

2 个答案:

答案 0 :(得分:2)

关于swfobject - 是的。 IE对Flash嵌入的处理方式略有不同(感谢activex),而不是其他所有浏览器。查看this article以了解原因,并SWFObject documentation了解更多信息。

另外,我最近创建了一个jQuery插件来帮助使用播放器API控制嵌入式播放器(基本上你正在做的事情)。

查看它,它是jQuery TubePlayer插件 - http://www.tikku.com/jquery-youtube-tubeplayer-plugin

答案 1 :(得分:1)

IE找不到$('object')可能是因为你需要指定正确的类型(对obj长度做一个警告),但是如果你obj = $('embed')它会工作。以不同的方式包装事物可能是明智的,即$('<div id="test/>')然后附加embed / objects并更改srcmovie值。

编辑:IE似乎没有注册object,直到它指定了typeclsid属性,例如

编辑#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