WordPress.org

Make WordPress Core

Changeset 27450


Ignore:
Timestamp:
03/07/2014 05:51:25 AM (6 years ago)
Author:
wonderboymusic
Message:

Support the autoplay attribute, even when the plugin type for a MediaElement instance is Flash. In the media modal, wp.media.view.VideoDetails and wp.media.view.AudioDetails now extend a unified wp.media.view.MediaDetails class which contains all of the player creation and destruction logic. The remove() method mimics the mejs.MediaElementPlayer.remove() method, but does not re-add the audio/video tag to the DOM. The MEjs method is especially problematic when the tag has autoplay="true" and the view has been detached but not destroyed.

Fixes #25077.
See #27016.

Location:
trunk/src/wp-includes/js
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/media-views.js

    r27445 r27450  
    63716371
    63726372    /**
    6373      * wp.media.view.AudioDetails
     6373     * wp.media.view.MediaDetails
    63746374     *
    63756375     * @contructor
     
    63806380     * @augments Backbone.View
    63816381     */
    6382     media.view.AudioDetails = media.view.Settings.AttachmentDisplay.extend({
    6383         className: 'audio-details',
    6384         template:  media.template('audio-details'),
    6385 
     6382    media.view.MediaDetails = media.view.Settings.AttachmentDisplay.extend({
    63866383        initialize: function() {
    6387             _.bindAll(this, 'player', 'close');
     6384            _.bindAll(this, 'success', 'close');
    63886385
    63896386            this.listenTo( this.controller, 'close', this.close );
     
    64046401        },
    64056402
     6403        prepareSrc : function (media) {
     6404            media.src = [
     6405                media.src,
     6406                media.src.indexOf('?') > -1 ? '&' : '?',
     6407                (new Date()).getTime()
     6408            ].join('');
     6409
     6410            return media;
     6411        },
     6412
     6413        setPlayer : function () {
     6414            this.player = false;
     6415        },
     6416
     6417        /**
     6418         * Override the MediaElement method for removing a player.
     6419         *  MediaElement tries to pull the audio/video tag out of
     6420         *  its container and re-add it to the DOM.
     6421         */
     6422        remove: function() {
     6423            var t = this.player, featureIndex, feature;
     6424
     6425            // invoke features cleanup
     6426            for ( featureIndex in t.options.features ) {
     6427                feature = t.options.features[featureIndex];
     6428                if ( t['clean' + feature] ) {
     6429                    try {
     6430                        t['clean' + feature](t);
     6431                    } catch (e) {}
     6432                }
     6433            }
     6434
     6435            if ( ! t.isDynamic ) {
     6436                t.$node.remove();
     6437            }
     6438
     6439            if ( 'native' !== t.media.pluginType ) {
     6440                t.media.remove();
     6441            }
     6442
     6443            delete mejs.players[t.id];
     6444
     6445            t.container.remove();
     6446            t.globalUnbind();
     6447            delete t.node.player;
     6448        },
     6449
    64066450        close : function() {
    6407             this.mejs.pause();
    6408         },
    6409 
    6410         player : function (mejs) {
     6451            if ( this.player ) {
     6452                this.mejs.pause();
     6453                this.remove();
     6454            }
     6455        },
     6456
     6457        success : function (mejs) {
     6458            var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
     6459
     6460            if ( 'flash' === mejs.pluginType && autoplay ) {
     6461                mejs.addEventListener( 'canplay', function () {
     6462                    mejs.play();
     6463                }, false );
     6464            }
     6465
    64116466            this.mejs = mejs;
    64126467        },
     
    64146469        render: function() {
    64156470            var self = this, settings = {
    6416                 success : this.player
     6471                success : this.success
    64176472            };
    64186473
     
    64246479            setTimeout( function() { self.resetFocus(); }, 10 );
    64256480
    6426             new MediaElementPlayer( this.$('.wp-audio-shortcode').get(0), settings );
     6481            this.setPlayer( settings );
    64276482
    64286483            return this;
     
    64356490
    64366491    /**
    6437      * wp.media.view.VideoDetails
     6492     * wp.media.view.AudioDetails
    64386493     *
    64396494     * @contructor
     6495     * @augments wp.media.view.MediaDetails
    64406496     * @augments wp.media.view.Settings.AttachmentDisplay
    64416497     * @augments wp.media.view.Settings
     
    64446500     * @augments Backbone.View
    64456501     */
    6446     media.view.VideoDetails = media.view.Settings.AttachmentDisplay.extend({
     6502    media.view.AudioDetails = media.view.MediaDetails.extend({
     6503        className: 'audio-details',
     6504        template:  media.template('audio-details'),
     6505
     6506        setPlayer: function( settings ) {
     6507            var audio = this.$('.wp-audio-shortcode').get(0);
     6508
     6509            audio = this.prepareSrc( audio );
     6510
     6511            this.player = new MediaElementPlayer( audio, settings );
     6512            return this;
     6513        }
     6514    });
     6515
     6516    /**
     6517     * wp.media.view.VideoDetails
     6518     *
     6519     * @contructor
     6520     * @augments wp.media.view.MediaDetails
     6521     * @augments wp.media.view.Settings.AttachmentDisplay
     6522     * @augments wp.media.view.Settings
     6523     * @augments wp.media.View
     6524     * @augments wp.Backbone.View
     6525     * @augments Backbone.View
     6526     */
     6527    media.view.VideoDetails = media.view.MediaDetails.extend({
    64476528        className: 'video-details',
    64486529        template:  media.template('video-details'),
    64496530
    6450         initialize: function() {
    6451             _.bindAll(this, 'success');
    6452 
    6453             this.listenTo( this.controller, 'close', this.close );
    6454 
    6455             media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
    6456         },
    6457 
    6458         prepare: function() {
    6459             var attachment = false;
    6460 
    6461             if ( this.model.attachment ) {
    6462                 attachment = this.model.attachment.toJSON();
    6463             }
    6464             return _.defaults({
    6465                 model: this.model.toJSON(),
    6466                 attachment: attachment
    6467             }, this.options );
    6468         },
    6469 
    6470         close : function() {
    6471             this.mejs.pause();
    6472             this.player.remove();
    6473         },
    6474 
    6475         success : function (mejs) {
    6476             this.mejs = mejs;
    6477         },
    6478 
    6479         render: function() {
    6480             var video, self = this, settings = {
    6481                 success : this.success
    6482             };
    6483 
    6484             if ( ! _.isUndefined( window._wpmejsSettings ) ) {
    6485                 settings.pluginPath = _wpmejsSettings.pluginPath;
    6486             }
    6487 
    6488             media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
    6489             setTimeout( function() { self.resetFocus(); }, 10 );
    6490 
    6491             video = this.$('.wp-video-shortcode').get(0);
    6492             video.src = [
    6493                 video.src,
    6494                 video.src.indexOf('?') > -1 ? '&' : '?',
    6495                 (new Date()).getTime()
    6496             ].join('');
     6531        setPlayer: function( settings ) {
     6532            var video = this.$('.wp-video-shortcode').get(0);
     6533
     6534            video = this.prepareSrc( video );
    64976535
    64986536            this.player = new MediaElementPlayer( video, settings );
    64996537            return this;
    6500         },
    6501 
    6502         resetFocus: function() {
    6503             this.$( '.embed-media-settings' ).scrollTop( 0 );
    65046538        }
    65056539    });
  • trunk/src/wp-includes/js/mediaelement/wp-mediaelement.js

    r26209 r27450  
    88        var settings = {};
    99
    10         if ( typeof _wpmejsSettings !== 'undefined' )
     10        if ( typeof _wpmejsSettings !== 'undefined' ) {
    1111            settings.pluginPath = _wpmejsSettings.pluginPath;
     12        }
     13
     14        settings.success = function (mejs) {
     15            var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
     16            if ( 'flash' === mejs.pluginType && autoplay ) {
     17                mejs.addEventListener( 'canplay', function () {
     18                    mejs.play();
     19                }, false );
     20            }
     21        };
    1222
    1323        $('.wp-audio-shortcode, .wp-video-shortcode').mediaelementplayer( settings );
Note: See TracChangeset for help on using the changeset viewer.