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

问题描述

更新 ...

好的，我在这里遇到了问题。我正在使用这个优秀的vimeo课程让我的生活更轻松：

（源代码在这里：）

Ok, ive got a problem here. Im using this excellent vimeo class to make my life easier:http://www.josh-ho.com/vimeo-class/(source code here: http://labs.josh-ho.com/vimeo/Vimeo.js)

我将它与fitvids.js一起使用，太棒了，在这里找到：

（源代码这里：

i use it together with the fitvids.js, which is sooo great, found here:http://fitvidsjs.com/(source code here: https://raw.github.com/davatron5000/FitVids.js/master/jquery.fitvids.js)n

问题是，在firefox（OSX，还没试过WIN，但可能会，我使用fitvids.js时，它会打破vimeoAPI，因此我无法获取事件或告诉Vimeo.js播放视频，也不能阻止它。在Safari中按预期（和想要）工作，但是...

problem is, in firefox (OSX, havent tried WIN yet, but probably will, too) it breaks the vimeoAPI as soon i use fitvids.js, so i cant get events or tell Vimeo.js to play the video, nor stop it. Works as expected (and wanted) in Safari, though...

我知道它必须与fitvids.js放入我的div（在我的对象swf播放器所在的另一个div：

i know it must have sth to do with the fact that the fitvids.js puts my div (in which my object swf player is in) in another 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(); 

调用

vimeoAPI.api_play();

vimeoAPI 定义为：

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

vimeocontainer id在我的例子中说是div idflashposition。

vimeocontainer id say is in my example the div id "flashposition".

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

So my guess is that it cant access the api because there is this new div with class="fluid-width-video-wrapper".

那么我如何更改vimeoAPI以使其再次运行（如果这是罪魁祸首）？

So how do i have to change vimeoAPI to get it working again (if this is the culprit)?

很多，非常感谢提前！

更新

此代码现在可在Firefox中使用，但仅限于我将页面留给不同的URL（通过停留在同一浏览器窗口中），然后按后退按钮。然后 的所有内容都在工作，vimeo API启动并运行。
但是我现在如何解决这个问题呢？

The code works now in Firefox, but only if I leave the page to a different URL (by staying in the same browser window) and then pressing the back button. then everything is working and the vimeo API up and running.But how do I fix this now?

下面是更新的代码，它让我走得那么远：

Heres the updated code that got me that far:

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

fitvids expects pure width and height, not with px added. So I stripped that from the Vimeo.js code in line 137-138, resulting in:

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类：

and finally called Vimeo.js class as normal:

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

这种方式有效，但只有当按下后退按钮时...： - （

This way it "works", but again, only when pressing the back button... :-(

推荐答案

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

Initialize fitvid before vimeo (since it changes the DOM) and initialize vimeo on the new inner div.

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

这篇关于2个脚本（FitVids.js，Vimeo.js）一起杀掉调用一个函数来播放视频，导致：VimeoAPI不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！