0

だから私はバックボーン コードで youtube API を実装しようとしています。

ビューに API を配置し、そこからすべてを実行しようとします

Chrome では問題なく動作しますが、Firefox では実行されていません。YouTube API の読み込みが完了したときにトリガーされるはずのイベントが発生しません。そこにアラートを入れて、コンテキストに関連しているかどうかを確認しようとしても、このアラートはクロムでは実行されますが、Firefox では実行されません。

前にこのようなものを見た人はいますか？

バックボーン 0.9 と youtube iframe api を使用しています

実際の例: http://alpha.mychannls.com/channel/8

関連コード

App.Views.youtubePlayer = Backbone.View.extend({
defaults: {
    'wmode': 'transparent',
    'height': '420',
    'width': '740',
    'volume': '40',
    'playerVars': {
        'wmode': 'transparent',
        'origin': 'http://www.youtube.com',
        'enablejsapi': 1,
        'autoplay': 0,
        'controls': 1,
        'iv_load_policy': 3,
        'showinfo': 0,
        'rel': 0,
        'allowfullscreen': 1,
        'allowtransparency': 'yes'
    }
},

initialize: function(options) {
    //bind youtubeplay event to play method
    this.collection.bind('youtubePlay', this.play, this);
    //bind youtubestop to stop method
    this.collection.bind('youtubeStop', this.stop, this);
    //extend this.o so the options are globally accessable
    this.o = $.extend(true, this.defaults, options);
    this.render();
},

render: function() {
    //create a new youtube player
    var view = this;
    console.log("this is run by firefox");
    this.ytplayer = new window.YT.Player('ytplayer', {
        'events': {
            'onReady': view.onPlayerReady,
            'onError': view.onError,
            'onStateChange': view.onPlayerStateChange
        }
    });
    return this;
},
//when youtube player is ready to run
onPlayerReady: function(e){
    console.log('this function isent run in firefox');
    //start the first video
    App.videos.youtubeready();

}

});

youtube api プレーヤーをグローバルに宣言する必要があるため、バックボーン コードの外側

var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
    App.youtubeplayer = new App.Views.youtubePlayer( { el: '#ytplayer' , collection :     App.videos }  );
}

コード全体はここにあります

http://alpha.mychannls.com/js/channel.js

4

1 に答える 1

2

問題の答えを見つけたと思います。私はこれを実装しましたが、実際にはうまく機能しています。その要点は次のとおりです。

Firefox には、IFrame の 2 つの個別の実装があります。最初の実装は、ブラウザによって onload イベントがトリガーされる前です。2 番目は onload イベントの後です。onload イベントの後に動作する Backbone/Angular またはその他のイベント ドリブンな JavaScript アプリケーション フレームワークにとって、これが意味することは、ページに IFrame を動的に追加する Youtube IFrame API 実装が機能しないことです。

私が見つけた解決策は、YT IFrame API ドキュメントにもありましたが、あなたはそれを知らないでしょう。

https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

IFrame タグを自分で作成する方法については、JS の後のセクションを参照してください。まさにそうです！したがって、ページがサーバー (つまり、index.html) または使用しているメイン ファイルから送信されるときに、ページに IFrame を配置するだけで済みます。

あなたの場合、Backbone/Marionette アプリを持っているように見えるので、このソリューションはうまくいくはずです。

<iframe id="player" type="text/html" width="1" height="1" 
src="http://www.youtube.com/embed/?enablejsapi=1&origin=http://example.com" 
frameborder="0"></iframe>

メイン ドキュメント内に配置され、Backbone アプリから参照される上記のコードのようなものが機能します。

さらにサポートが必要な場合は、返信してください。

Jeff: FWIW - この IFrame/Firefox の問題は、少なくとも 2005 年 (私が見つけたあいまいな投稿の日付) から存在していました。これはデバッグが容易ではないため、動的な単一ページ Javascript アプリケーション開発者向けの IFrame ドキュメントに注意することをお勧めします。

于 2013-04-10T17:26:40.947 に答える