带有主干的Youtube IFrame API

Question

我正在尝试在主干应用程序中使用YoutTube的Iframe API，我不确定我的方法是否正确。

var VideoView = Backbone.Marionette.ItemView.extend({
        initialize: function(){
            var that = this;
            this.currentVideoIndex = 0;
            Events.on("changeVideo", function (target){
                that.changeVideo(target.id);
            });
            _.bindAll(this);
            this.player = new window.YT.Player('player', {
                videoId: this.model.videos[0],
                width: 700,
                height: 400,
                events: {
                    'onStateChange': that.onPlayerStateChange
                },
                playerVars: {
                    autoplay: 1,
                    controls: 1,
                    modestbranding: 1,
                    rel: 0,
                    showInfo: 0
                }
            });
        },
         onPlayerStateChange: function(event) {
                if(event.data == 0 ){
                    this.currentVideoIndex = this.currentVideoIndex + 1;
                    this.player.loadVideoById(this.model.videos[this.currentVideoIndex]);                        
         },
        changeVideo: function(event){
            var newIndex  = this.model.videos.indexOf(event);
            this.currentVideoIndex = newIndex;
            this.player.loadVideoById(event);
        }
    });

这是我用来创建一个新YT.Player对象的代码。当我的视图第一次初始化时，一切都很好，"changeVideo"方法也按预期工作。然而，如果我转到另一个页面，并使用Iframe播放器返回页面，第一个视频会按预期开始，但当我尝试更改视频时，我会出错。

Uncaught TypeError: Cannot call method 'postMessage' of null 

在这两种情况下，我的OnPlayerState更改方法都能按预期工作——在当前视频结束后，下一个视频开始播放。

如果有帮助的话，下面是错误的屏幕截图：https://www.dropbox.com/s/zmdo80yux4h7pg8/Screenshot%202013-12-04%2013.35.png

你也可以在这里看到一个实时网站http://gorlla.herokuapp.com/，如果你只点击其中一门课程，然后点击继续上课，你将无法进入下一个视频，如果你打开控制台，你会看到"Uncaught TypeError:无法调用null的方法'postMessage'"消息。

Answer 1

首先，不相关的是，您定义了两次"that"。

其次，当你离开页面时，为什么不试着在播放器上调用.dedestroy呢？因为（如果我理解正确的话）每次你回来时，它都会被重新初始化。

我不得不说，我看到的与此类似的大多数错误都与Chrome管理iFrame状态的方式有关。例如，如果iFrame没有附加到DOM，它将为null。但不确定这在其他浏览器上是如何工作的。您是从其他地方手动删除DOM元素吗？我遇到了类似的问题，发现这个页面很有用：

https://groups.google.com/forum/#！主题/youtube api gdata/bThZuUg51qg

总之，试着在上手前做一些清理，然后玩.ddestroy.