Changeset 27450

Timestamp:

03/07/2014 05:51:25 AM (11 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:

• media-views.js (modified) (7 diffs)
• mediaelement/wp-mediaelement.js (modified) (1 diff)

trunk/src/wp-includes/js/media-views.js

@@ -6371 +6371 @@
 
     /**
-     * wp.media.view.AudioDetails
+     * wp.media.view.MediaDetails
      *
      * @contructor
@@ -6380 +6380 @@
      * @augments Backbone.View
      */
-    media.view.AudioDetails = media.view.Settings.AttachmentDisplay.extend({
-        className: 'audio-details',
-        template:  media.template('audio-details'),
-
+    media.view.MediaDetails = media.view.Settings.AttachmentDisplay.extend({
         initialize: function() {
-            _.bindAll(this, 'player', 'close');
+            _.bindAll(this, 'success', 'close');
 
             this.listenTo( this.controller, 'close', this.close );
@@ -6404 +6401 @@
         },
 
+        prepareSrc : function (media) {
+            media.src = [
+                media.src,
+                media.src.indexOf('?') > -1 ? '&' : '?',
+                (new Date()).getTime()
+            ].join('');
+
+            return media;
+        },
+
+        setPlayer : function () {
+            this.player = false;
+        },
+
+        /**
+         * Override the MediaElement method for removing a player.
+         *  MediaElement tries to pull the audio/video tag out of
+         *  its container and re-add it to the DOM.
+         */
+        remove: function() {
+            var t = this.player, featureIndex, feature;
+
+            // invoke features cleanup
+            for ( featureIndex in t.options.features ) {
+                feature = t.options.features[featureIndex];
+                if ( t['clean' + feature] ) {
+                    try {
+                        t['clean' + feature](t);
+                    } catch (e) {}
+                }
+            }
+
+            if ( ! t.isDynamic ) {
+                t.$node.remove();
+            }
+
+            if ( 'native' !== t.media.pluginType ) {
+                t.media.remove();
+            }
+
+            delete mejs.players[t.id];
+
+            t.container.remove();
+            t.globalUnbind();
+            delete t.node.player;
+        },
+
         close : function() {
-            this.mejs.pause();
-        },
-
-        player : function (mejs) {
+            if ( this.player ) {
+                this.mejs.pause();
+                this.remove();
+            }
+        },
+
+        success : function (mejs) {
+            var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
+
+            if ( 'flash' === mejs.pluginType && autoplay ) {
+                mejs.addEventListener( 'canplay', function () {
+                    mejs.play();
+                }, false );
+            }
+
             this.mejs = mejs;
         },
@@ -6414 +6469 @@
         render: function() {
             var self = this, settings = {
-                success : this.player
+                success : this.success
             };
 
@@ -6424 +6479 @@
             setTimeout( function() { self.resetFocus(); }, 10 );
 
-            new MediaElementPlayer( this.$('.wp-audio-shortcode').get(0), settings );
+            this.setPlayer( settings );
 
             return this;
@@ -6435 +6490 @@
 
     /**
-     * wp.media.view.VideoDetails
+     * wp.media.view.AudioDetails
      *
      * @contructor
+     * @augments wp.media.view.MediaDetails
      * @augments wp.media.view.Settings.AttachmentDisplay
      * @augments wp.media.view.Settings
@@ -6444 +6500 @@
      * @augments Backbone.View
      */
-    media.view.VideoDetails = media.view.Settings.AttachmentDisplay.extend({
+    media.view.AudioDetails = media.view.MediaDetails.extend({
+        className: 'audio-details',
+        template:  media.template('audio-details'),
+
+        setPlayer: function( settings ) {
+            var audio = this.$('.wp-audio-shortcode').get(0);
+
+            audio = this.prepareSrc( audio );
+
+            this.player = new MediaElementPlayer( audio, settings );
+            return this;
+        }
+    });
+
+    /**
+     * wp.media.view.VideoDetails
+     *
+     * @contructor
+     * @augments wp.media.view.MediaDetails
+     * @augments wp.media.view.Settings.AttachmentDisplay
+     * @augments wp.media.view.Settings
+     * @augments wp.media.View
+     * @augments wp.Backbone.View
+     * @augments Backbone.View
+     */
+    media.view.VideoDetails = media.view.MediaDetails.extend({
         className: 'video-details',
         template:  media.template('video-details'),
 
-        initialize: function() {
-            _.bindAll(this, 'success');
-
-            this.listenTo( this.controller, 'close', this.close );
-
-            media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
-        },
-
-        prepare: function() {
-            var attachment = false;
-
-            if ( this.model.attachment ) {
-                attachment = this.model.attachment.toJSON();
-            }
-            return _.defaults({
-                model: this.model.toJSON(),
-                attachment: attachment
-            }, this.options );
-        },
-
-        close : function() {
-            this.mejs.pause();
-            this.player.remove();
-        },
-
-        success : function (mejs) {
-            this.mejs = mejs;
-        },
-
-        render: function() {
-            var video, self = this, settings = {
-                success : this.success
-            };
-
-            if ( ! _.isUndefined( window._wpmejsSettings ) ) {
-                settings.pluginPath = _wpmejsSettings.pluginPath;
-            }
-
-            media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
-            setTimeout( function() { self.resetFocus(); }, 10 );
-
-            video = this.$('.wp-video-shortcode').get(0);
-            video.src = [
-                video.src,
-                video.src.indexOf('?') > -1 ? '&' : '?',
-                (new Date()).getTime()
-            ].join('');
+        setPlayer: function( settings ) {
+            var video = this.$('.wp-video-shortcode').get(0);
+
+            video = this.prepareSrc( video );
 
             this.player = new MediaElementPlayer( video, settings );
             return this;
-        },
-
-        resetFocus: function() {
-            this.$( '.embed-media-settings' ).scrollTop( 0 );
         }
     });

trunk/src/wp-includes/js/mediaelement/wp-mediaelement.js

@@ -8 +8 @@
         var settings = {};
 
-        if ( typeof _wpmejsSettings !== 'undefined' )
+        if ( typeof _wpmejsSettings !== 'undefined' ) {
             settings.pluginPath = _wpmejsSettings.pluginPath;
+        }
+
+        settings.success = function (mejs) {
+            var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
+            if ( 'flash' === mejs.pluginType && autoplay ) {
+                mejs.addEventListener( 'canplay', function () {
+                    mejs.play();
+                }, false );
+            }
+        };
 
         $('.wp-audio-shortcode, .wp-video-shortcode').mediaelementplayer( settings );