Question

所以我正在尝试在骨干网代码中实现youtube API。

我将API放在视图中并尝试从那里运行所有内容

它在chrome中工作得很好，但是没有在firefox中运行，假设在youtube API完成加载时触发的事件没有被激活。如果甚至尝试在那里放置警报以查看它是否与上下文相关，则此警报将在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

Answer 1

我想我找到了问题的答案。我实现了它，它现在实际上很好用。这是它的要点：

Firefox有两个独立的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>

上面代码放在主文档中并从Backbone应用程序引用的内容将起作用。

祝你好运，如果你需要更多帮助，请回复。

杰夫：FWIW - 这个IFrame / Firefox问题至少从2005年开始存在（我发现这个模糊的帖子的日期）。您可能希望在动态单页面Javascript应用程序开发人员的IFrame文档中注明它，因为这不容易调试。

youtube iframe api无法在firefox中使用骨干

1 个答案: