javascript - 2个脚本(FitVids.js，Vimeo.js)一起被杀死调用一个函数播放视频，导致:VimeoAPI不是一个函数

在下面更新 ...

好的，我在这里遇到了问题。我使用这个出色的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>**

在Vimeo.js中是一个函数

XXX.play.video();

哪个电话

vimeoAPI.api_play();

vimeoAPI定义为:

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

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

因此，我的猜测是它无法访问api，因为有一个新的div，其class为“fluid-width-video-wrapper”。

那么，我该如何更改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();
}

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

最佳答案

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

关于javascript - 2个脚本(FitVids.js，Vimeo.js)一起被杀死调用一个函数播放视频，导致:VimeoAPI不是一个函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8980378/