javascript - BackboneJS Youtube播放器仅渲染一次

Question

我有一个BackboneJS应用程序，可在 View 上显示Youtube视频。因此，当用户单击缩略图时，Youtube-iframe将打开并播放视频。当用户关闭它并想再次播放时，什么也没有发生。为了再次显示它，用户必须刷新不好的页面。

我的 View 如下所示:

function (App, Backbone, ArtistVideos, Artistimg, Artistname) {

    var ArtistVideoPopup = App.module();

    ArtistVideoPopup.View = Backbone.View.extend({
        template: 'artistYoutubeVideo',
        initialize: function () {

        },      
        beforeRender: function() {
            $("#vid").before("<div id='vidoverlay'></div>");
            $("#vid").after("<div id='closeDiv'><button title='Luk (Esc)' type='button' class='mdk-close'>×</button></div>")

            var artistimgCollection = new Artistimg.ArtistimgCollection();
            artistimgCollection.artist_id = this.artist_id;
            this.insertView('.artistImage', new Artistimg.View({collection: artistimgCollection}));
            artistimgCollection.fetch();

            var artistnameCollection = new Artistname.ArtistnameCollection();
            artistnameCollection.artist_id = this.artist_id;
            this.insertView('.artistName', new Artistname.View({collection: artistnameCollection}));
            artistnameCollection.fetch();

            var artistvideosModel = new ArtistVideos.ArtistVideosModel();
            artistvideosModel.artist_id = this.artist_id;
            artistvideosModel.video_youtube_id = this.video_youtube_id;
            artistvideosModel.fetch();
        },  

        afterRender: function() {

            $('ul.acmenu li a.selected').removeClass('selected');
            $('ul.acmenu li a.artistVideos').addClass('selected');          

            var tag = document.createElement('script');

            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var player;
            window.onYouTubeIframeAPIReady = _.bind(function() {
              player = new YT.Player('vid', {
                height: '480',
                width: '853',
                videoId: this.video_youtube_id,
                events: {
                  onReady: onPlayerReady,
                  onStateChange: onPlayerStateChange
                }
             })
            }, this);

            function onPlayerReady(event) {
                event.target.playVideo();
            }

            var done = false;
            function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING && !done) {
                    //setTimeout(stopVideo, 6000);
                    done = true;
                }
            }
            function stopVideo() {
                player.stopVideo();
            }

            $(".mdk-close").click(function(){
                $(this).hide();
                $("#vidoverlay").fadeOut(500);
                $("#vid").fadeOut(500);
                var video = $("#vid").attr("src");
                $("#vid").attr("src","");
                $("#vid").attr("src",video);

            });             

        }

    });

    return ArtistVideoPopup;
}

如前所述，它仅渲染一次!关闭后，在重新加载整个页面之前，不会出现video-iframe。

有人知道这里可能是什么问题吗？请帮忙...

提前致谢...

Answer 1

我还没有真正测试过，但是请试一下:

function (App, Backbone, ArtistVideos, Artistimg, Artistname) {

    var ArtistVideoPopup = App.module();

    // Create a new Deferred for the YouTube IFrame API
    var loadYouTubeAPI = $.Deferred();

    // When the API is ready then resolve the Deferred's promise()
    window.onYouTubeIframeAPIReady = loadYouTubeAPI.resolve;

    // Convert the Deferred into its own promise() so nothing else can
    // resolve or reject it before onYouTubeIframeAPIReady is called
    loadYouTubeAPI = loadYouTubeAPI.promise();

    // Begin download of YouTube IFrame API
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // Helpful function to get the player state as a string from an int
    var playerState = function(data){
        switch (data) {
            case -1: return 'unstarted';
            case  0: return 'ended';
            case  1: return 'playing';
            case  2: return 'paused';
            case  3: return 'buffering';
            case  5: return 'cued';
            default: return 'quantum';
        }
    }

    ArtistVideoPopup.View = Backbone.View.extend({
        template: 'artistYoutubeVideo',
        initialize: function(){
            _.bindAll(this, 'onAPIReady', 'closePlayer');
            this.$iframe = $('#vid');
            this.iframe  = this.$iframe.get(0);
            loadYouTubeAPI.then(this.onAPIReady);
        },
        onAPIReady: function(){
            this.player = new YT.Player(this.iframe, {
                height: '480',
                width:  '853',
                videoId: this.video_youtube_id,
                events: {
                    onReady: this.onPlayerReady,
                    onStateChange: this.onPlayerStateChange
                }
            });
        },
        onPlayerReady: function(e){
            e.target.playVideo();
        },
        onPlayerStateChange: function(e){
            console.log(playerState(e.data));
        },
        closePlayer: function(e){
            $(e.currentTarget).hide();
            $("#vidoverlay").fadeOut(500);
            this.$iframe.fadeOut(500).done(this.onPlayerClose);
        },
        onPlayerClose: function(){
            if (this.player) {
                this.player.stopVideo();
            }
        },
        beforeRender: function() {
            this.$iframe
                .before("<div id='vidoverlay'></div>")
                .after("<div id='closeDiv'><button title='Luk (Esc)' type='button' class='mdk-close'>×</button></div>")

            var artistimgCollection = new Artistimg.ArtistimgCollection();
            artistimgCollection.artist_id = this.artist_id;
            this.insertView('.artistImage', new Artistimg.View({collection: artistimgCollection}));
            artistimgCollection.fetch();

            var artistnameCollection = new Artistname.ArtistnameCollection();
            artistnameCollection.artist_id = this.artist_id;
            this.insertView('.artistName', new Artistname.View({collection: artistnameCollection}));
            artistnameCollection.fetch();

            var artistvideosModel = new ArtistVideos.ArtistVideosModel();
            artistvideosModel.artist_id = this.artist_id;
            artistvideosModel.video_youtube_id = this.video_youtube_id;
            artistvideosModel.fetch();
        },
        afterRender: function() {
            this.$iframe.show();
            $('ul.acmenu li a.selected').removeClass('selected');
            $('ul.acmenu li a.artistVideos').addClass('selected');
            $("#closeDiv").on('click', '.mdk-close', this.onPlayerClose);
        }
    });
    return ArtistVideoPopup;
}