带有主干的Youtube IFrame API

Youtube IFrame API with backbone

本文关键字:Youtube IFrame API      更新时间:2024-03-16

我正在尝试在主干应用程序中使用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'"消息。

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

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

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

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

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