MediaElement upgrade: cleanup for generated markup for videos.

See #29110.

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


git-svn-id: http://core.svn.wordpress.org/trunk@29207 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor 2014-08-07 05:53:15 +00:00
parent afb0b3e4ef
commit b938bfb7d5
3 changed files with 38 additions and 8 deletions

View File

@ -50,7 +50,8 @@ function wp_underscore_audio_template() {
function wp_underscore_video_template() { function wp_underscore_video_template() {
$video_types = wp_get_video_extensions(); $video_types = wp_get_video_extensions();
?> ?>
<# var w, h, settings = wp.media.view.settings, <# var w_rule = '', h_rule = '',
w, h, settings = wp.media.view.settings,
isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/); isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
if ( settings.contentWidth && data.model.width >= settings.contentWidth ) { if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
@ -64,12 +65,20 @@ function wp_underscore_video_template() {
} else { } else {
h = data.model.height; h = data.model.height;
} }
if ( w ) {
w_rule = ' width: ' + w + 'px;';
}
if ( h ) {
h_rule = ' height: ' + h + 'px;';
}
#> #>
<div style="max-width: 100%; width: {{ w }}px"> <div style="max-width: 100%;{{ w_rule }}{{ h_rule }}">
<video controls <video controls
class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}" class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
width="{{ w }}" <# if ( w ) { #>width="{{ w }}"<# } #>
height="{{ h }}" <# if ( h ) { #>height="{{ h }}"<# } #>
<?php <?php
$props = array( 'poster' => '', 'preload' => 'metadata' ); $props = array( 'poster' => '', 'preload' => 'metadata' );
foreach ( $props as $key => $value ): foreach ( $props as $key => $value ):
@ -280,10 +289,21 @@ function wp_print_media_templates() {
<source type="{{ data.mime }}" src="{{ data.url }}"/> <source type="{{ data.mime }}" src="{{ data.url }}"/>
</audio> </audio>
</div> </div>
<# } else if ( 'video' === data.type ) { #> <# } else if ( 'video' === data.type ) {
<div style="max-width: 100%; width: {{ data.width }}px" class="wp-media-wrapper"> var w_rule = h_rule = '';
if ( data.width ) {
w_rule = ' width: ' + data.width + 'px;';
} else if ( wp.media.view.settings.contentWidth ) {
w_rule = ' width: ' + wp.media.view.settings.contentWidth + 'px;';
}
if ( data.height ) {
h_rule = ' height: ' + data.height + 'px;';
}
#>
<div style="max-width: 100%; {{ w_rule }}{{ h_rule }}" class="wp-media-wrapper">
<video controls class="wp-video-shortcode" preload="metadata" <video controls class="wp-video-shortcode" preload="metadata"
width="{{ data.width }}" height="{{ data.height }}" <# if ( data.width ) { #>width="{{ data.width }}"<# } #>
<# if ( data.height ) { #>height="{{ data.height }}"<# } #>
<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>> <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
<source type="{{ data.mime }}" src="{{ data.url }}"/> <source type="{{ data.mime }}" src="{{ data.url }}"/>
</video> </video>

View File

@ -1874,7 +1874,14 @@ function wp_video_shortcode( $attr, $content = '' ) {
} }
$html .= '</video>'; $html .= '</video>';
$output = sprintf( '<div style="width: %dpx; max-width: 100%%;" class="wp-video">%s</div>', $atts['width'], $html ); $width_rule = $height_rule = '';
if ( ! empty( $atts['width'] ) ) {
$width_rule = sprintf( ' width: %dpx;', $atts['width'] );
}
if ( ! empty( $atts['height'] ) ) {
$height_rule = sprintf( ' height: %dpx;', $atts['height'] );
}
$output = sprintf( '<div style="max-width: 100%%;%s%s" class="wp-video">%s</div>', $width_rule, $height_rule, $html );
/** /**
* Filter the output of the video shortcode. * Filter the output of the video shortcode.

View File

@ -1520,6 +1520,9 @@ function prepend_attachment($content) {
$atts['width'] = (int) $meta['width']; $atts['width'] = (int) $meta['width'];
$atts['height'] = (int) $meta['height']; $atts['height'] = (int) $meta['height'];
} }
if ( has_post_thumbnail() ) {
$atts['poster'] = wp_get_attachment_url( get_post_thumbnail_id() );
}
$p = wp_video_shortcode( $atts ); $p = wp_video_shortcode( $atts );
} elseif ( 0 === strpos( $post->post_mime_type, 'audio' ) ) { } elseif ( 0 === strpos( $post->post_mime_type, 'audio' ) ) {
$p = wp_audio_shortcode( array( 'src' => wp_get_attachment_url() ) ); $p = wp_audio_shortcode( array( 'src' => wp_get_attachment_url() ) );