javascript - 具有主干的 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 对象的代码。第一次我的 View 初始化时一切正常，并且“changeVideo”方法按预期工作。但是，如果我转到另一个页面并使用 Iframe 播放器返回该页面，第一个视频将按预期开始，但是当我尝试更改视频后出现错误。

Uncaught TypeError: Cannot call method 'postMessage' of null 

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

这是错误的屏幕截图(如果有帮助的话): https://www.dropbox.com/s/zmdo80yux4h7pg8/Screenshot%202013-12-04%2013.13.35.png

您还可以在此处查看实时网站 http://gorlla.herokuapp.com/ ，如果您只是单击其中一门类(class)并单击转到类(class)后您将无法转到下一个视频，并且如果您打开控制台您将看到“Uncaught TypeError: Cannot call method 'postMessage' of null “信息。

Answer 1

首先，与此无关的是，您定义了“that”两次。

其次，为什么不在您离开页面时尝试在播放器上调用 .destroy，因为(如果我理解正确的话)每次您回来时它都会重新初始化。

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

https://groups.google.com/forum/#!topic/youtube-api-gdata/bThZuUg51qg

总而言之，尝试事先进行一些清理并使用 .destroy。