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的骨干上工作

回答

相关问题