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.13.35.png

如果您只是点击其中一个课程并在您无法转到下一个视频并打开控制台后再单击课程，您还可以在此处查看实时网站http://gorlla.herokuapp.com/你会看到“未捕获的TypeError：无法调用方法'postMessage'null”消息。

Answer 1

首先，无关紧要，你要两次定义'那个'。

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

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

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

总结一下，尝试先做一些清理并使用.destroy进行游戏。

Youtube IFrame API与骨干

1 个答案: