youtube iframe api不能在支持firefox的骨幹上工作

所以我試圖在骨幹代碼中實現youtube API。youtube iframe api不能在支持firefox的骨幹上工作

我把API在視圖中，並嘗試從那裏運行一切

它在Chrome，但isen't在Firefox中，我們假設觸發如果YouTube API加載完成ISEN」事件運行的偉大工程沒有開火。如果甚至試圖將警報放在那裏以查看它是否與上下文相關，則此警報將在Chrome中運行，但不在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

來源

2013-03-21 user2091464

這將有助於查看整個頁面的實時演示，而不僅僅是獨立的JavaScript。這樣我們就可以使用Firefox的JavaScript調試器來瀏覽代碼，看看發生了什麼。 – 2013-03-27 20:27:35

傑夫：我看到一個非常類似的問題，與FF + Backbone.js和YT IFrame API有關。每次用戶點擊導航應用程序（pushState）時，YT IFrame都會重新觸發onReady事件。 Firefox可能會觸發YT Iframe重新加載onPopState（），但很難說 - 這種行爲至少表明了這一點。我會嘗試爲此創建一個更好的簡化測試用例。 – tvpmb 2013-04-09 22:31:26

發現我想我找到了答案的問題。我實現了這一點，現在它實際上效果很好。這是它的要點：

Firefox有2個獨立的IFrame實現。第一個實現是在瀏覽器觸發onload事件之前。第二個是在onload事件之後。這對於在onload事件之後操作的Backbone/Angular或其他事件驅動的JavaScript應用程序框架意味着什麼，對於將IFrame動態添加到頁面的Youtube IFrame API實現將無法工作。

我發現的解決方案也位於YT IFrame API文檔中，但您不知道。

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

見部分JS後，有關創建iframe標記自己呢？完全正確！所以你所需要做的就是在頁面從服務器發送（即：你的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>

類似上面的代碼放置在主文檔中，並從骨幹應用程序引用將工作。

祝你好運，只需回覆，如果你需要更多的幫助。 Jeff：FWIW--這個IFrame/Firefox問題自至少2005年（我發現這個隱晦的帖子的日期）以來一直存在。您可能需要在動態單頁JavaScript應用程序開發人員的IFrame文檔中記下它，因爲這不易於調試。

來源

2013-04-10 17:26:40 tvpmb

youtube iframe api不能在支持firefox的骨幹上工作

回答

相關問題