带有主干的 Youtube IFrame API答案

【问题标题】：Youtube IFrame API with backbone带有主干的 Youtube IFrame API
【发布时间】：2013-12-04 18:18:36
【问题描述】：

我正在尝试在我的主干应用程序中使用 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.13.35.png

您还可以在这里看到一个实时网站http://gorlla.herokuapp.com/，如果您在无法转到下一个视频后单击其中一门课程并单击转到课堂，如果您打开控制台，您将请参阅“未捕获的 TypeError：无法调用 null 的方法‘postMessage’”消息。

【问题讨论】：

我愿意提供帮助，但 postMessage 不在您在此处提供的代码中，并且您的网站当前未加载任何 javascript。
正在尝试您的网站，但不知道如何转到下一个视频。
我打开了gorlla.herokuapp.com 并转到课程Obamacare: Explained，点击go to class，然后点击Youtoons Obamacare 和Khan Academy。一切正常。火狐 27.

标签： javascript iframe backbone.js youtube-api

【解决方案1】：

首先，不相关的，你定义了“那个”两次。

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

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

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

总而言之，尝试在手前进行一些清理并使用 .destroy。

【讨论】：