javascript - VimeoFroogaloopAPIがイベントを認識しない

Question

froogaloop APIを使用して、vimeoのonPlay、onPause、およびonFinishイベントを認識しようとしています。私はこのことで想像できるすべてを試しましたが、運がありませんでした。

Firefoxでこのエラーが発生します：

そしてChromeでは：

CDNからのfroogaloopのインポート：

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

score 79 · Accepted Answer

何時間もの欲求不満の後...私は解決策を見つけました。

私はiframeでIDを使用していたので、どうやらvimeo APIは、フェッチしている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>

これを指摘してくれたDrewBakerに特に感謝します：http：//vimeo.com/forums/topic：38114＃comment_5043696

score 2 · Accepted Answer

jQueryでiframeを選択すると、プレーヤー要素の作成中にエラーが発生しました。

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

結果は

TypeError: d[f] is undefined

私にとっての解決策は、jQueryIDセレクターの最初の要素を選択することでした

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

score 1 · Accepted Answer

同一生成元ポリシーに違反していると思います。ここで、多くのイベント処理を行っている場合、それらは特別なfroogaloopAPI呼び出しを使用していることに気付くでしょう。

私はfroogaloopを使ったことがないので、おそらく間違っています。しかし、それは私の推測です。エラーは、iframeがブラウザのURLを変更しようとしていることを示唆しているようです。これは、SameOriginで許可されています。これが、APIがwindow.postMessageをラップする理由です。

score 1 · Accepted Answer

同様の問題が発生しましたが、この場合、FroggaloopをVimeo.Playerに置き換えた後でも、Chromeの新しい制限でした。「ユーザーが最初にドキュメントを操作しなかったため、play（）が失敗しました...」というエラーが発生していました。さらに調査したところ、Chromeにいくつかの制限が追加されたようです。こちらをご覧ください。allow="autoplay"私の場合の解決策は、iframeに追加することでした。

score 0 · Accepted Answer

Froggaloop2でも同様の問題が発生しました。ビデオがキャッシュされている場合、readyイベントは（初期ロード時に）1回だけ発生するようです。解決策は、次のようにsrcを変更してiframeを取得することです。

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

javascript - VimeoFroogaloopAPIがイベントを認識しない

5 に答える 5

Related

Reference