Add a compatibility layer in wp-playlist.js to avoid VM errors from MediaElement's plugin bridge in the TinyMCE views for playlists by suppressing playback for files whose mime-type is not supported in the user's browser natively.

This is similar to how audio and video shortcodes are handled: file types are whitelisted for native playback.

See #27892.



git-svn-id: https://develop.svn.wordpress.org/trunk@28171 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/js/mce-view.js

@@ -611,7 +611,7 @@ window.wp = window.wp || {};
 				metadata: this.data
 			});
 
-			this.player = p._player;
+			this.player = p.player;
 		},
 
 		/**

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

@@ -200,4 +200,8 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+}
+
+.wp-audio-playlist .me-cannotplay span {
+	padding: 5px 15px;
 }

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

@@ -7,6 +7,7 @@
 		initialize : function (options) {
 			this.index = 0;
 			this.settings = {};
+			this.compatMode = $( 'body' ).hasClass( 'wp-admin' ) && $( '#content_ifr' ).length;
 			this.data = options.metadata || $.parseJSON( this.$('script').html() );
 			this.playerNode = this.$( this.data.type );
 
@@ -26,7 +27,9 @@
 				this.renderTracks();
 			}
 
-			this.playerNode.attr( 'src', this.current.get( 'src' ) );
+			if ( this.isCompatibleSrc() ) {
+				this.playerNode.attr( 'src', this.current.get( 'src' ) );
+			}
 
 			_.bindAll( this, 'bindPlayer', 'bindResetPlayer', 'setPlayer', 'ended', 'clickTrack' );
 
@@ -38,34 +41,58 @@
 		},
 
 		bindPlayer : function (mejs) {
-			this.player = mejs;
+			this.mejs = mejs;
-			this.player.addEventListener( 'ended', this.ended );
+			this.mejs.addEventListener( 'ended', this.ended );
 		},
 
 		bindResetPlayer : function (mejs) {
 			this.bindPlayer( mejs );
-			this.playCurrentSrc();
+			if ( this.isCompatibleSrc() ) {
+				this.playCurrentSrc();
+			}
 		},
 
-		setPlayer: function () {
+		isCompatibleSrc: function () {
-			if ( this._player ) {
+			var testNode;
-				this._player.pause();
+
-				this._player.remove();
+			if ( this.compatMode ) {
+				testNode = $( '<span><source type="' + this.current.get( 'type' ) + '" /></span>' );
+
+				if ( ! wp.media.mixin.isCompatible( testNode ) ) {
+					this.playerNode.removeAttr( 'src' );
+					this.playerNode.removeAttr( 'poster' );
+					return;
+				}
+			}
+
+			return true;
+		},
+
+		setPlayer: function (force) {
+			if ( this.player ) {
+				this.player.pause();
+				this.player.remove();
 				this.playerNode = this.$( this.data.type );
-				this.playerNode.attr( 'src', this.current.get( 'src' ) );
+			}
+
+			if (force) {
+				if ( this.isCompatibleSrc() ) {
+					this.playerNode.attr( '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 );
+			this.player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
 		},
 
 		playCurrentSrc : function () {
 			this.renderCurrent();
-			this.player.setSrc( this.playerNode.attr( 'src' ) );
+			this.mejs.setSrc( this.playerNode.attr( 'src' ) );
-			this.player.load();
+			this.mejs.load();
-			this.player.play();
+			this.mejs.play();
 		},
 
 		renderCurrent : function () {
@@ -134,14 +161,14 @@
 		},
 
 		loadCurrent : function () {
-			var last = this.playerNode.attr( 'src' ).split('.').pop(),
+			var last = this.playerNode.attr( 'src' ) && this.playerNode.attr( 'src' ).split('.').pop(),
 				current = this.current.get( 'src' ).split('.').pop();
 
-			this.player.pause();
+			this.mejs && this.mejs.pause();
 
 			if ( last !== current ) {
-				this.setPlayer();
+				this.setPlayer( true );
-			} else {
+			} else if ( this.isCompatibleSrc() ) {
 				this.playerNode.attr( 'src', this.current.get( 'src' ) );
 				this.playCurrentSrc();
 			}