2个脚本（FitVids.js、Vimeo.js）一起kill调用函数播放视频，导致：VimeoAPI不是函数

Question

更新如下...

好吧，我在这里遇到了问题。我使用这个优秀的 vimeo 类来让我的生活更轻松： http://www.josh-ho.com/vimeo-class/ （源代码在这里：http://labs.josh-ho.com/vimeo/Vimeo。 js）

我将它与 fitvids.js 一起使用，这太棒了，可以在这里找到： http://fitvidsjs.com/ （源代码在这里：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 中有关：

之前：

<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&amp;show_title=false&amp;show_byline=false&amp;show_portrait=0&
amp;fullscreen=true&amp;js_api=1&amp;js_onLoad=vimeo.vimeoLoaded&amp;color=00adef&
amp;wmode=transparent"></object>
</div>

之后：

<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&amp;show_title=false&amp;show_byline=false&amp;show_portrait=0&
amp;fullscreen=true&amp;js_api=1&amp;js_onLoad=vimeo.vimeoLoaded&amp;color=00adef&
amp;wmode=transparent"></object>
</div>

**</div>**

函数

XXX.play.video(); 

在 Vimeo.js 中是一个调用的

vimeoAPI.api_play();

，vimeoAPI 定义为：

vimeoAPI = document.getElementById( vimeoContainer ).getElementsByTagName( "object" )[0];

vimeocontainer id 在我的示例中是 div id“flashposition”。

所以我的猜测是它无法访问 api，因为有一个带有 class="fluid-width-video-wrapper" 的新 div。

那么我该如何更改 vimeoAPI 才能使其再次工作（如果这是罪魁祸首）？

非常非常感谢！

更新

该代码现在可以在 Firefox 中运行，但前提是我将页面保留到不同的 URL（通过停留在同一浏览器窗口中），然后按后退按钮。然后一切都正常工作并且 vimeo API 启动并运行。 但现在我该如何解决这个问题呢？

下面是让我到目前为止的更新代码：

fitvids 期望纯宽度和高度，而不是添加 px。所以我从第 137-138 行的 Vimeo.js 代码中删除了它，结果是：

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();
}

这样它“有效”，但同样，只有在按后退按钮时... :-(

Answer 1

在 vimeo 之前初始化 fitvid（因为它改变了 DOM）并在新的内部 div 上初始化 vimeo。

$(document).ready(function() {
    var $div = $("#flashposition");
    $div.fitVids();

    // grab the new div and give it an id (for vimeo to find)
    var vimeoID = 'vimeoPlayer';
    $div.children('div.fluid-width-video-wrapper').attr('id', vimeoID);

    // vimeo is not a jquery plugin and searches DOM by id
    var vimeo = new Vimeo(vimeoID, 480, 320, “vimeo”);

    //....

    vimeo.playVideo();
});