Add a timestamp to the urls passed to `<audio>` and `<video>` in the modal to ensure that cached view instances aren't referenced by MEjs. Pause the player when closing the controller's modal.

See #27016, #26779.


Built from https://develop.svn.wordpress.org/trunk@27420


git-svn-id: http://core.svn.wordpress.org/trunk@27267 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/media-views.js

@@ -6239,7 +6239,7 @@
 			media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
 			setTimeout( function() { self.resetFocus(); }, 10 );
 
-			new MediaElementPlayer( this.$('audio').get(0), settings );
+			new MediaElementPlayer( this.$('.wp-audio-shortcode').get(0), settings );
 
 			return this;
 		},
@@ -6264,13 +6264,10 @@
 		template:  media.template('video-details'),
 
 		initialize: function() {
-			_.bindAll(this, 'player', 'played');
+			_.bindAll(this, 'player');
 
-			this.removable = false;
 			this.listenTo( this.controller, 'close', this.close );
 
-			// used in AttachmentDisplay.prototype.updateLinkTo
-			this.options.attachment = this.model.attachment;
 			media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
 		},
 
@@ -6287,20 +6284,12 @@
 		},
 
 		close : function() {
-			if ( this.removable ) {
+			this.mejs.pause();
-				this.mejs.pause();
-			}
 			this.remove();
-			this.mejs = this.mejsInstance = null;
-		},
-
-		played : function () {
-			this.removable = true;
 		},
 
 		player : function (mejs) {
 			this.mejs = mejs;
-			this.mejs.addEventListener( 'play', this.played );
 		},
 
 		render: function() {
@@ -6315,10 +6304,7 @@
 			media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
 			setTimeout( function() { self.resetFocus(); }, 10 );
 
-			if ( ! this.mejsInstance ) {
+			new MediaElementPlayer( this.$('.wp-video-shortcode').get(0), settings );
-				this.mejsInstance = new MediaElementPlayer( this.$('video').get(0), settings );
-			}
-
 			return this;
 		},
 

wp-includes/media-template.php

@@ -654,11 +654,23 @@ function wp_print_media_templates() {
 		<# var rendered = false; #>
 		<div class="media-embed">
 			<div class="embed-media-settings embed-audio-settings">
-				<# if ( data.model.src ) { #>
+				<#
-					<audio class="wp-audio-shortcode" src="{{{ data.model.src }}}"
+					var src,
+						t = (new Date()).getTime();
+
+					if ( data.model.src ) {
+						src = data.model.src + (data.model.src.indexOf('?') > -1 ? '&' : '?' ) + t;
+					#>
+					<audio controls class="wp-audio-shortcode" src="{{{ src }}}"
 						preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
-						<# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
+						<#
-						<# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
+						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+							#>autoplay<#
+						}
+
+						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+							#>loop<#
+						} #>
 					/>
 					<# rendered = true; #>
 				<label class="setting">
@@ -671,11 +683,18 @@ function wp_print_media_templates() {
 
 				foreach ( $default_types as $type ): ?>
 				<# if ( data.model.<?php echo $type ?> ) { #>
-					<# if ( ! rendered ) { #>
+					<# if ( ! rendered ) {
-					<audio class="wp-audio-shortcode" src="{{{ data.model.<?php echo $type ?> }}}"
+						src = data.model.<?php echo $type ?> + (data.model.<?php echo $type ?>.indexOf('?') > -1 ? '&' : '?' ) + t;
+					#>
+					<audio controls class="wp-audio-shortcode" src="{{{ src }}}"
 						preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
-						<# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
+						<#
-						<# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
+						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+							#>autoplay<#
+						}
+						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+							#>loop<#
+						} #>
 					/>
 					<#
 						rendered = true;
@@ -723,22 +742,35 @@ function wp_print_media_templates() {
 			<div class="embed-media-settings embed-video-settings">
 				<div class="wp-video-holder">
 				<#
-				var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
+					var src,
-					h = ! data.model.height ? 320 : data.model.height;
+						t = (new Date()).getTime(),
+						w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
+						h = ! data.model.height ? 360 : data.model.height;
 
 				if ( w !== data.model.width ) {
 					h = Math.ceil( ( h * w ) / data.model.width );
 				}
 
-				if ( data.model.src ) { #>
+				if ( data.model.src ) {
-					<video class="wp-video-shortcode"
+					src = data.model.src + (data.model.src.indexOf('?') > -1 ? '&' : '?' ) + t;
+				#>
+					<video controls class="wp-video-shortcode"
 						width="{{{ w }}}"
 						height="{{{ h }}}"
-						src="{{{ data.model.src }}}"
+						src="{{{ src }}}"
-						<# if ( ! _.isUndefined( data.model.poster ) ) { #>poster="{{{ data.model.poster }}}"<# } #>
+						<#
+						if ( ! _.isUndefined( data.model.poster ) ) {
+							#>poster="{{{ data.model.poster }}}"<#
+						} #>
 						preload="{{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}}"
-						<# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
+						<#
-						<# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
+						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+							#>autoplay<#
+						}
+
+						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+							#>loop<#
+						} #>
 					/>
 					<# rendered = true; #>
 				<label class="setting">
@@ -751,15 +783,26 @@ function wp_print_media_templates() {
 
 				foreach ( $default_types as $type ): ?>
 				<# if ( data.model.<?php echo $type ?> ) { #>
-					<# if ( ! rendered ) { #>
+					<# if ( ! rendered ) {
-					<video class="wp-video-shortcode"
+						src = data.model.<?php echo $type ?> + (data.model.<?php echo $type ?>.indexOf('?') > -1 ? '&' : '?' ) + t;
+					#>
+					<video controls class="wp-video-shortcode"
 						width="{{{ w }}}"
 						height="{{{ h }}}"
-						src="{{{ data.model.<?php echo $type ?> }}}"
+						src="{{{ src }}}"
-						<# if ( ! _.isUndefined( data.model.poster ) ) { #>poster="{{{ data.model.poster }}}"<# } #>
+						<#
+						if ( ! _.isUndefined( data.model.poster ) ) {
+							#>poster="{{{ data.model.poster }}}"<#
+						} #>
 						preload="{{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}}"
-						<# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
+						<#
-						<# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
+						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+							#>autoplay<#
+						}
+
+						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+							#>loop<#
+						} #>
 					/>
 					<#
 						rendered = true;