Update以下...
好吧,我这里遇到了问题。我使用这个优秀的 vimeo 类来让我的生活更轻松:http://www.josh-ho.com/vimeo-class/ http://www.josh-ho.com/vimeo-class/(源代码在这里:http://labs.josh-ho.com/vimeo/Vimeo.js http://labs.josh-ho.com/vimeo/Vimeo.js)
我将它与 fitvids.js 一起使用,非常棒,可以在这里找到:http://fitvidsjs.com/ http://fitvidsjs.com/(源代码在这里:https://raw.github.com/davatron5000/FitVids.js/master/jquery.fitvids.js)n https://raw.github.com/davatron5000/FitVids.js/master/jquery.fitvids.js)n
问题是,在 Firefox(OSX,还没有尝试过 WIN,但可能也会)中,一旦我使用 fitvids.js,它就会破坏 vimeoAPI,所以我无法获取事件或告诉 Vimeo.js 播放视频,也无法停止它。在 Safari 中按预期(和想要的)工作,但是......
我知道这一定与 fitvids.js 将我的 div(我的对象 swf 播放器所在的位置)放在另一个 div 中有关:
Before:
<div id="flashposition">
<object width="1280" height="720" type="application/x-shockwave-flash"
id="flashpositionmyFlashID" data="http://www.vimeo.com/moogaloop.swf"><param
name="swliveconnect" value="true"><param name="fullscreen" value="1"><param
name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true">
<param name="wmode" value="transparent"><param name="flashvars" value="clip_id=35083232&
amp;server=vimeo.com&show_title=false&show_byline=false&show_portrait=0&
amp;fullscreen=true&js_api=1&js_onLoad=vimeo.vimeoLoaded&color=00adef&
amp;wmode=transparent"></object>
</div>
After:
<div id="flashposition">
**<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;">**
<object width="1280" height="720" type="application/x-shockwave-flash"
id="flashpositionmyFlashID" data="http://www.vimeo.com/moogaloop.swf"><param
name="swliveconnect" value="true"><param name="fullscreen" value="1"><param
name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true">
<param name="wmode" value="transparent"><param name="flashvars" value="clip_id=35083232&
amp;server=vimeo.com&show_title=false&show_byline=false&show_portrait=0&
amp;fullscreen=true&js_api=1&js_onLoad=vimeo.vimeoLoaded&color=00adef&
amp;wmode=transparent"></object>
</div>
**</div>**
在 Vimeo.js 中是一个函数
XXX.play.video();
哪个调用
vimeoAPI.api_play();
And vimeoAPI定义为:
vimeoAPI = document.getElementById( vimeoContainer ).getElementsByTagName( "object" )[0];
vimeo容器id 在我的示例中说的是 div id“flashposition”。
所以我的猜测是它无法访问 api,因为有一个带有 class="fluid-width-video-wrapper" 的新 div。
那么我该如何更改 vimeo API 才能使其再次工作(如果这是罪魁祸首)?
非常非常感谢!
Update
该代码现在可以在 Firefox 中运行,但前提是我将页面保留到不同的 URL(通过停留在同一浏览器窗口中),然后按后退按钮。然后一切is工作并且 vimeo API 启动并运行。
但现在我该如何解决这个问题呢?
这是让我到目前为止的更新代码:
fitvids 期望纯宽度和高度,而不是添加 px。所以我从 Vimeo.js 代码的第 137-138 行中删除了它,结果是:
playerWidth = ( width.toString().search( 'px' ) != -1 || width.toString().search( '%' )
!= -1 ) ? width.toString() : width;
playerHeight = ( height.toString().search( 'px' ) != -1 || height.toString().search( '%'
) != -1 ) ? height.toString() : height;
然后我改变了线路
this.vimeoLoaded = function() {
var NEWcontainer = vimeoContainer + "NEW";
$('.fluid-width-video-wrapper').attr('id', NEWcontainer);
$(document.getElementById( vimeoContainer ).getElementsByTagName( "object" )).attr('id',
NEWcontainer);
container = NEWcontainer;
vimeoAPI = document.getElementById( vimeoContainer ).getElementsByTagName( "object" )
[0];
setupAddEventListener();
jQuery(document.getElementById( vimeoContainer )).fitVids();
dispatchEvent( this.VIMEO_LOAD_COMPLETE, null );
}
最后正常调用 Vimeo.js 类:
var vimeo;
vimeo = new Vimeo( "flashposition", 1280, 720, "vimeo", showTitle=false);
vimeo.loadVideo( '35083232' );
vimeo.addEventListener( vimeo.VIMEO_LOAD_COMPLETE, video1Loading );
function video1Loading() {
vimeo.playVideo();
}
这样它“有效”,但同样,只有当按下后退按钮时......:-(