API Vimeo Froogaloop не распознает событие

Я пытаюсь распознать событие onPlay, onPause и onFinish для vimeo, используя API-интерфейс froogaloop. Я пробовал все, что мог себе представить, и не везло.

Я получаю эту ошибку в Firefox:

И в Chrome:

Импортирование файла froogaloop из CDN:

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

Мой JS:

$(function(){

    var vimeoPlayer = document.querySelector('iframe');

    $f(vimeoPlayer).addEvent('ready', ready);

    function ready(player_id) {

        froogaloop = $f(player_id);

        function setupEventListeners() {
            function onPlay() {
                froogaloop.addEvent('play',
                function(data) {
                    console.log('play event');
                });
            }

            function onPause() {

                froogaloop.addEvent('pause',
                function(data) {
                    console.log('pause event');
                });
            }

            function onFinish() {
                froogaloop.addEvent('finish',
                function(data) {
                    console.log('finish');
                });
            }
            onPlay();
            onPause();
            onFinish();
        }
        setupEventListeners();
    }

})

Мой HTML:

<iframe src="http://player.vimeo.com/video/3718294?api=1" width="623" height="350" frameborder="0" id="iframe-video"></iframe>

Ответы

Ответ 1

После нескольких часов и часов разочарования... Я нашел решение.

Поскольку я использовал идентификатор iframe... очевидно, API vimeo заставляет вас добавить параметр к URL-адресу, который вы извлекаете (player_id = iframe-id).

Итак, iFrame должен выглядеть так:

<iframe src="//player.vimeo.com/video/3718294?api=1&player_id=promo-vid" 
        width="623" height="350" frameborder="0"
        id="promo-vid">
</iframe>

Особая благодарность Дрю Бейкеру за это: http://vimeo.com/forums/topic:38114#comment_5043696

Ответ 2

Появилась ошибка при создании элемента игрока при выборе iframe с jQuery.

var iframe = $('#player1');
var player = $f(iframe);

Результаты в

TypeError: d[f] is undefined

Решение для меня состояло в том, чтобы выбрать первый элемент в селекторе jQuery ID

var iframe = $('#player1')[0];
var player = $f(iframe);

Ответ 3

Я думаю, что вы нарушаете Одинаковая политика происхождения. Вы заметите здесь, в котором вы выполняете большую обработку событий, они используют специальные вызовы API froogaloop.

Я никогда не использовал froogaloop, поэтому я, вероятно, ошибаюсь. Но это моя догадка. Ошибки, по-видимому, указывают на то, что iframe пытается изменить URL-адрес вашего браузера, и это теперь разрешено Same Origin. Вот почему API обертывает window.postMessage для вас.

Ответ 4

Имея аналогичную проблему, с Froggaloop2 - кажется, что если видео кешируется, готовое событие будет срабатывать только один раз (при начальной загрузке). Решение состоит в том, чтобы извлечь iframe с изменением src, как:

$(iframe).attr('src', $(iframe).attr('src') + '#timestamp='+(new Date()).getTime());

Ответ 5

Ответ, получивший наибольшее количество голосов, спас меня, огромное спасибо! Любой, кто нуждается в помощи, первый ответ работает, и трудно найти ответ на этот вопрос.