javascript - lettering - plugin video jquery

2 scripts(FitVids.js, Vimeo.js) juntos matan Llamar a una función para reproducir video, lo que resulta en: VimeoAPI no es una función

Question

Actualiza a continuación ...

Ok, he tenido un problema aquí. Estoy usando esta excelente clase de vimeo para hacer mi vida más fácil: http://www.josh-ho.com/vimeo-class/ (código fuente aquí: http://labs.josh-ho.com/vimeo/Vimeo.js )

Lo uso junto con el fitvids.js, que es tan genial, que se encuentra aquí: http://fitvidsjs.com/ (código fuente aquí: https://raw.github.com/davatron5000/FitVids.js/master/jquery .fitvids.js) n

El problema es que en Firefox (OSX aún no se ha probado WIN, pero probablemente también lo hará) rompe el vimeoAPI tan pronto como uso fitvids.js, así que no puedo obtener eventos ni decirle a Vimeo.js que reproduzca el video, ni detenerlo. Funciona como se esperaba (y quería) en Safari, aunque ...

Sé que debe tener algo que ver con el hecho de que el fitvids.js pone mi div (en el que se encuentra mi objeto SWF Player) en otro div:

Antes de:

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

Después:

<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>**

en Vimeo.js es una función

XXX.play.video(); 

que llamadas

vimeoAPI.api_play();

Y vimeoAPI se define como:

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

vimeocontainer id decir es en mi ejemplo el div id "flashposition".

Así que supongo que no puede acceder a la API porque hay este nuevo div con class = "fluid-width-video-wrapper".

Entonces, ¿cómo tengo que cambiar vimeoAPI para que funcione nuevamente (si este es el culpable)?

Muchas, muchas gracias de antemano!

Actualizar

El código funciona ahora en Firefox, pero solo si dejo la página en una URL diferente (permaneciendo en la misma ventana del navegador) y luego presiono el botón Atrás. entonces todo está funcionando y la API vimeo en funcionamiento. ¿Pero cómo soluciono esto ahora?

Aquí está el código actualizado que me llevó tan lejos:

fitvids espera ancho y alto puros, no con px agregado. Así que lo eliminé del código Vimeo.js en la línea 137-138, lo que resultó en:

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;

Luego cambié las líneas en

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

y finalmente llamó a la clase Vimeo.js como 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();
}

De esta forma, "funciona", pero nuevamente, solo cuando se presiona el botón Atrás ... :-(

Answer 1

Inicialice fitvid antes de vimeo (ya que cambia el DOM) e inicialice vimeo en el nuevo div interno.

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