Changeset 27871

Timestamp:

03/31/2014 03:34:23 PM (11 years ago)

Author:

wonderboymusic

Message:

Re-instantiate the MediaElementPlayer instance when switching mime types in playlists.

Fixes #27608.

Location:

trunk/src/wp-includes

Files:

• js/mediaelement/wp-playlist.js (modified) (6 diffs)
• media.php (modified) (1 diff)

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

@@ -5 +5 @@
 
     var WPPlaylistView = Backbone.View.extend({
-        index : 0,
-
-        itemTemplate : wp.template('wp-playlist-item'),
-
         initialize : function (options) {
-            var settings = {};
-
+            this.index = 0;
+            this.settings = {};
             this.data = options.metadata || $.parseJSON( this.$('script').html() );
             this.playerNode = this.$( this.data.type );
@@ -19 +15 @@
 
             if ( 'audio' === this.data.type ) {
-                this.currentTemplate = wp.template('wp-playlist-current-item');
+                this.currentTemplate = wp.template( 'wp-playlist-current-item' );
                 this.currentNode = this.$( '.wp-playlist-current-item' );
             }
@@ -26 +22 @@
 
             if ( this.data.tracklist ) {
+                this.itemTemplate = wp.template( 'wp-playlist-item' );
                 this.playingClass = 'wp-playlist-playing';
                 this.renderTracks();
             }
 
-            this.playerNode.attr( 'src', this.current.get('src') );
+            this.playerNode.attr( 'src', this.current.get( 'src' ) );
 
-            _.bindAll( this, 'bindPlayer', 'ended', 'clickTrack' );
+            _.bindAll( this, 'bindPlayer', 'bindResetPlayer', 'setPlayer', 'ended', 'clickTrack' );
 
             if ( ! _.isUndefined( window._wpmejsSettings ) ) {
-                settings.pluginPath = _wpmejsSettings.pluginPath;
+                this.settings.pluginPath = _wpmejsSettings.pluginPath;
             }
-            settings.success = this.bindPlayer;
+            this.settings.success = this.bindPlayer;
+            this.setPlayer();
+        },
 
-            this._player = new MediaElementPlayer( this.playerNode.get(0), settings );
+        bindPlayer : function (mejs) {
+            this.player = mejs;
+            this.player.addEventListener( 'ended', this.ended );
+        },
+
+        bindResetPlayer : function (mejs) {
+            this.bindPlayer( mejs );
+            this.playCurrentSrc();
+        },
+
+        setPlayer: function () {
+            if ( this._player ) {
+                this._player.pause();
+                this._player.remove();
+                this.playerNode = this.$( this.data.type );
+                this.playerNode.prop( 'src', this.current.get( 'src' ) );
+                this.settings.success = this.bindResetPlayer;
+            }
+            /**
+             * This is also our bridge to the outside world
+             */
+            this._player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
+        },
+
+        playCurrentSrc : function () {
+            this.renderCurrent();
+            this.player.load();
+            this.player.play();
         },
 
@@ -80 +106 @@
         },
 
-        bindPlayer : function (mejs) {
-            this.player = mejs;
-            this.player.addEventListener( 'ended', this.ended );
-        },
-
         clickTrack : function (e) {
             this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
@@ -111 +132 @@
 
         loadCurrent : function () {
+            var last = this.playerNode.attr( 'src' ).split('.').pop(),
+                current = this.current.get( 'src' ).split('.').pop();
+
             this.player.pause();
-            this.playerNode.attr( 'src', this.current.get( 'src' ) );
-            this.renderCurrent();
-            this.player.load();
+
+            if ( last !== current ) {
+                this.setPlayer();
+            } else {
+                this.playerNode.prop( 'src', this.current.get( 'src' ) );
+                this.playCurrentSrc();
+            }
         },
 
@@ -128 +156 @@
 
             this.loadCurrent();
-            this.player.play();
         }
     });

trunk/src/wp-includes/media.php

@@ -2530 +2530 @@
         'suggestedHeight' => __( 'Suggested height is %d pixels.' ),
 
-        'mediaHTML5Text'        => __( 'Add alternate sources for maximum HTML5 playback:' ),
-
         // Edit Audio
         'audioDetailsTitle'     => __( 'Audio Details' ),