Загрузка нескольких видео Vimeo с помощью jQuery и обнаружение событий - PullRequest
Новая
       29

Загрузка нескольких видео Vimeo с помощью jQuery и обнаружение событий

6 голосов
/ 04 августа 2011

ОК, я полностью застрял. Я действительно надеюсь, что у кого-то есть опыт загрузки видео Vimeo с API Vimeo Froogaloop .

Кажется, я не могу поймать готовое событие.

Froogaloop: 

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

Мой сценарий: 

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('http://vimeo.com/27027307') + '&width=300&callback=?', function(data){
    $('#video-container').html(data.html); //puts an iframe embed from vimeo's json
    $('#video-container iframe').ready(function(){
        player = document.querySelectorAll('iframe')[0];
        $f(player).addEvent('ready', function(id){
            console.log('success');
        });

    });
});

Видео загружается нормально. Это сообщение, которое я получаю в консоли: 

Uncaught TypeError: Cannot read property 'ready' of undefined

Мне нужно использовать прослушиватели событий для обнаружения пауз и т. Д. Я видел в этом посте , но, к сожалению, основное отличие заключается в том, что я загружаю динамически через JSON. Кроме того, у Vimeo есть рабочий пример Froogaloop в действии, но не с jQuery.

Заранее спасибо !!!

Ответы [ 3 ]

23 голосов
/ 05 августа 2011

Редактировать (август 2014 г.) : Недавно я написал плагин jQuery Vimeo , который в основном решает эту проблему гораздо более элегантно. Но решение, если вы жестко программируете, это ниже:

При загрузке видео Vimeo необходимо добавить строку запроса &api=1 в URL. Это позволяет вам делать вызовы событий API. Vimeo также требует &player_id=SOME_ID, если вы собираетесь загружать несколько видео, которое должно совпадать с идентификатором в загруженном iframe (или в моем случае, используйте jQuery, чтобы добавить его в iframe после загрузки JSON, так как я создаю это динамически.)

Я потерял полдня на этом. Вот то, к чему пришел мой окончательный код, если он полезен кому-либо еще, пытающемуся загружать видео Vimeo дианмически.

Использование фреймворка Vimeo Froogaloop 

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

мой JS 

var videoData = [
{
    'title':'The Farm',
    'id':'farmvideo',
    'videoURL':'http://vimeo.com/27027307'
}];

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData[0]['videoURL']) + '&api=1&player_id='+ videoData[0]['id'] +'&width=300&callback=?', function(data){
    $('#video-container').html(data.html); //puts an iframe embed from vimeo's json
    $('#video-container iframe').load(function(){
        player = document.querySelectorAll('iframe')[0];
        $('#video-container iframe').attr('id', videoData[0]['id']);
        $f(player).addEvent('ready', function(id){
            var vimeoVideo = $f(id);
            console.log('success');
        });
    });
});
8 голосов
/ 04 августа 2011

Попробуйте использовать событие load вместо события готовности для фреймов.

Ваша третья строка будет: 

$('#video-container iframe').load(function(){
4 голосов
/ 25 июля 2012

Я "раздвоил" ваш пример и создал версию, которая показывает воспроизведение / приостановку vimeo с несколькими видео с использованием API Froogaloop. поэтому, если вы запустите одно видео, все остальные видео перестанут воспроизводиться: http://jsfiddle.net/nerdess/D5fD4/3/

...