web-dev-qa-db-ja.com

Vimeo FroogaloopAPIがイベントを認識しない

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

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.

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>
javascriptjqueryiframevimeofroogaloop
23
criticerz

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

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

78
criticerz

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

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

結果は

TypeError: d[f] is undefined

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

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

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

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

1
Doug Stephen

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

0
wdtj

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

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