0

所以我试图在主干代码中实现 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

4

1 回答 1

2

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

Firefox 有 2 个独立的 IFrame 实现。第一个实现是在浏览器触发 onload 事件之前。第二个是在 onload 事件之后。这对于在 onload 事件之后运行的 Backbone/Angular 或其他事件驱动的 javascript 应用程序框架意味着 Youtube IFrame API 实现将 IFrame 动态添加到您的页面将不起作用。

我找到的解决方案也位于 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 应用程序引用的内容将起作用。

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

Jeff：FWIW - 这个 IFrame/Firefox 问题至少从 2005 年就已经存在（我发现的那个不起眼的帖子的日期）。您可能想在动态单页 Javascript 应用程序开发人员的 IFrame 文档中注明它，因为这不容易调试。

于 2013-04-10T17:26:40.947 回答