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

Question

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

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

to get pet property Location.toString">

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

Answer 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

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

Answer 3

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

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

Answer 4

У меня была похожая проблема, но в этом случае после замены Froggaloop на Vimeo.Player это все равно было новым ограничением в chrome. Я получаю сообщение об ошибке «play () не удалось, потому что пользователь сначала не взаимодействовал с документом ...». После дальнейших исследований похоже, что Chrome добавил некоторые ограничения , см. Здесь . Решением в моем случае было добавление allow="autoplay" в iframe.

Answer 5

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

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