两个脚本(FitVids.js，Vimeo.js）一起杀死调用一个函数来播放视频，导致:VimeoAPI不是一个函数

2 scripts (FitVids.js, Vimeo.js) together kill Calling a function to play video, resulting in: VimeoAPI is not a function

本文关键字：一个 函数 js VimeoAPI 播放 导致 视频 脚本 两个 FitVids Vimeo      更新时间：2023-09-26

更新下面的。。。

好的，我有个问题。我使用这个优秀的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中有关：

之前：

<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];

vimeoctainerid say在我的例子中是div id"flashposition"。

所以我的猜测是，它无法访问api，因为有一个新的div，它的class="fluid-wid-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();
});
相关文章：