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

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

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

Permission denied for <code><http://player.vimeo.com></code> to get pet property Location.toString

и в Chrome:

Unsafe javascript attempt to access frame with URL ... from frame with URL `http://player.vimeo.com/video/3718294?api=1. Domains, protocols and ports must match.

импорт 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>
23
froogaloop iframe javascript jquery vimeo

4 ответов

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

Так как я использовал ID на 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

78

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

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

результаты

TypeError: d[f] is undefined

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

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

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

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

1

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

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