Два сценария (FitVids.js, Vimeo.js) вместе убивают Вызов функции для воспроизведения видео, в результате чего: VimeoAPI не является функцией - PullRequest
Новая
       3

Два сценария (FitVids.js, Vimeo.js) вместе убивают Вызов функции для воспроизведения видео, в результате чего: VimeoAPI не является функцией

3 голосов
/ 24 января 2012

Обновление ниже ...

Хорошо, у меня тут проблема. Я использую этот превосходный класс Vimeo, чтобы сделать мою жизнь проще: http://www.josh -ho.com / Vimeo-класс / (исходный код здесь: 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, но, вероятно, тоже), он ломает vimeoAPI, как только я использую fitvids.js, поэтому я не могу получить события или сказать 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 (оставаясь в том же окне браузера) и затем нажимая кнопку «Назад». тогда все работает и API vimeo запущен и работает. Но как мне исправить это сейчас?

Вот обновленный код, который дал мне это далеко:

fitvids ожидает чистую ширину и высоту, а не с добавленным px. Поэтому я удалил это из кода Vimeo.js в строке 137-138, в результате чего: 

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

Таким образом, он «работает», но опять же, только при нажатии кнопки «назад» ...: - (

1 Ответ

1 голос
/ 24 января 2012

Инициализируйте fitvid перед vimeo (поскольку он меняет DOM) и инициализируйте vimeo на новом внутреннем 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();
});
...