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

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

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

«Отказано

И в Хроме:

Небезопасная попытка javascript получить доступ к фрейму с URL... из фрейма с URL `http://player.vimeo.com/video/3718294?api=1. Домены, протоколы и порты должны совпадать.

Импорт froogaloop из CDN:

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

My 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>

javascript iframe jquery vimeo froogaloop
person criticerz    schedule 30.06.2011    source источник

Ответы (5)


arrow_upward
79
arrow_downward

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

Поскольку я использовал идентификатор в 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

person criticerz    schedule 30.06.2011
comment
Я сделал пример использования Vimeo API здесь: labs.funkhausdesign .com/examples/vimeo/ - person Drew Baker; 18.08.2011
comment
Я все еще продираюсь через часть «Часы разочарования». Когда я следую приведенным примерам, все, что я получаю, - это нарушения политики безопасности javascript. Как вы их преодолели? - person RSG; 05.10.2011
comment
у меня не работает - если я смотрю на пример Дрю Бейкера или реализую ответ выше, я все равно получаю небезопасные ошибки javascript - плеер работает, но ошибки не исчезают. - person mheavers; 08.12.2011
comment
Это решение не сработало для меня. Я нашел другое решение для этого: я воспроизводил видео, а затем приостанавливал его, как только видео было готово. Таким образом, когда пользователь попытается воспроизвести его снова, видео будет воспроизводиться плавно. - person Elad Ziv; 22.12.2014
comment
Полезная ссылка, которая четко объясняет вопрос ОП: labs.funkhausdesign.com /примеры/вимео/ - person Simon; 01.03.2015

arrow_upward
2
arrow_downward

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

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

Результаты в

TypeError: d[f] is undefined

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

var iframe = $('#player1')[0];
var player = $f(iframe);
person Maximilian Köhler    schedule 19.07.2015
comment
Ты получил ответ @Max? - person malhar; 03.05.2016
comment
Выберите объект 1. JS, который находится внутри селектора jQuery со значением [0] позади него, как указано в нижней части моего ответа... - person Maximilian Köhler; 03.05.2016
comment
Я использовал его, однако я получаю ту же ошибку! iframe не определен, если я пытаюсь предупредить то же самое. Кроме того, используя Player_id и api=1, - person malhar; 03.05.2016
comment
Не могу вам помочь, это сработало для меня... возможно, опубликуйте свой код. приветствия - person Maximilian Köhler; 03.05.2016

arrow_upward
1
arrow_downward

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

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

person Doug Stephen    schedule 30.06.2011
comment
Что я могу сделать, чтобы исправить это тогда? - person criticerz; 30.06.2011
comment
Больше придерживайтесь их рисунка. Например, посмотрите на их пример SimpleButtons; их обратные вызовы дажеListener — это все вызовы методов API froogaloop. Поскольку вы добавляете прослушиватель событий к объекту froogaloop, который пытается взаимодействовать с вашим браузером, вы должны делать это через их API. Кроме того, глядя на их API, я не вижу addEvent, определенного для объекта froogaloop, только addEventListener. Они определяют свой собственный addEvent в своем примере кода, который обертывает addEventListener. Заставляет меня думать, что есть проблема с использованием встроенного addEvent, связанного с Same Origin. - person Doug Stephen; 30.06.2011
comment
У меня была похожая проблема. Мое видео скрыто по умолчанию. Сначала я попытался показать видео (через jQuery somediv.show(); ), а сразу после этого я попытался вызвать: player.api('play'); . Это приводит к действительно странному поведению, когда видео не воспроизводится или воспроизводится примерно через 30 секунд... В конце я просто создал отдельную функцию (скажем, OnPlay), которая содержит только: player.api('play');. Теперь строка становится: somediv.show(0, OnPlay); Это работает! Но почему? - person danger89; 20.01.2015

arrow_upward
1
arrow_downward

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

person wdtj    schedule 21.03.2019

arrow_upward
0
arrow_downward

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

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