Videos in the media modal:

* Support rendering of chromeless YouTube when a video shortcode's `src` is a YouTube URL. 
* Don't instantiate an instance of `MediaElementPlayer` until after the view has been attached to the DOM and the view's `ready` event has fired.
* Don't set `poster` for videos when its value is empty. Much like `src` in the `img` tag - when empty, it will assume and load the current window's URL.
* When removing a player instance, don't call the `pause` method if the playback is not native.

See #27016.


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


git-svn-id: http://core.svn.wordpress.org/trunk@27298 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor 2014-03-07 08:32:14 +00:00
parent 88a47ecd06
commit 7f15998947
3 changed files with 73 additions and 18 deletions

View File

@ -6384,6 +6384,7 @@
_.bindAll(this, 'success', 'close');
this.listenTo( this.controller, 'close', this.close );
this.on( 'ready', this.setPlayer );
media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
},
@ -6411,7 +6412,16 @@
},
setPlayer : function () {
this.player = false;
if ( ! this.player ) {
this.player = new MediaElementPlayer( this.media, this.settings );
}
},
/**
* @abstract
*/
setMedia : function () {
return this;
},
/**
@ -6449,8 +6459,11 @@
close : function() {
if ( this.player ) {
this.mejs.pause();
if ( _.isUndefined( this.mejs.pluginType ) ) {
this.mejs.pause();
}
this.remove();
this.player = false;
}
},
@ -6478,9 +6491,9 @@
media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
setTimeout( function() { self.resetFocus(); }, 10 );
this.setPlayer( settings );
this.settings = settings;
return this;
return this.setMedia();
},
resetFocus: function() {
@ -6503,12 +6516,11 @@
className: 'audio-details',
template: media.template('audio-details'),
setPlayer: function( settings ) {
setMedia: function() {
var audio = this.$('.wp-audio-shortcode').get(0);
audio = this.prepareSrc( audio );
this.media = this.prepareSrc( audio );
this.player = new MediaElementPlayer( audio, settings );
return this;
}
});
@ -6528,12 +6540,17 @@
className: 'video-details',
template: media.template('video-details'),
setPlayer: function( settings ) {
var video = this.$('.wp-video-shortcode').get(0);
setMedia: function() {
var video = this.$('.wp-video-shortcode');
video = this.prepareSrc( video );
if ( ! video.hasClass('youtube-video') ) {
video = this.prepareSrc( video.get(0) );
} else {
video = video.get(0);
}
this.media = video;
this.player = new MediaElementPlayer( video, settings );
return this;
}
});

File diff suppressed because one or more lines are too long

View File

@ -739,11 +739,41 @@ function wp_print_media_templates() {
var 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 ) {
if ( data.model.width && w !== data.model.width ) {
h = Math.ceil( ( h * w ) / data.model.width );
}
if ( data.model.src ) { #>
if ( data.model.src ) {
if ( data.model.src.match(/youtube|youtu\.be/) ) {
#>
<video controls
class="wp-video-shortcode youtube-video"
width="{{{ w }}}"
height="{{{ h }}}"
<?php
$props = array( 'poster' => '', 'preload' => 'metadata' );
foreach ( $props as $key => $value ):
if ( empty( $value ) ) {
?><#
if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
#> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<#
} #>
<?php } else {
echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"<?php
}
endforeach;
?><#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><#
}
<?php endforeach ?>#>
>
<source type="video/youtube" src="{{{ data.model.src }}}" />
</video>
<#
} else {
#>
<video controls
class="wp-video-shortcode"
width="{{{ w }}}"
@ -752,8 +782,15 @@ function wp_print_media_templates() {
<?php
$props = array( 'poster' => '', 'preload' => 'metadata' );
foreach ( $props as $key => $value ):
echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"
<?php endforeach;
if ( empty( $value ) ) {
?><#
if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
#> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<#
} #>
<?php } else {
echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"<?php
}
endforeach;
?><#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
@ -761,12 +798,13 @@ function wp_print_media_templates() {
}
<?php endforeach ?>#>
/>
<# rendered = true; #>
<label class="setting">
<span>SRC</span>
<input type="text" disabled="disabled" data-setting="src" value="{{{ data.model.src }}}" />
</label>
<# } #>
<# }
rendered = true;
} #>
<?php
$default_types = wp_get_video_extensions();