wp_underscore_video_template

函式
wp_underscore_video_template ( No parameters )

wp_underscore_video_template: 這個函式用來返回WordPress中視訊播放器的下劃線模板。該模板用於在網站的前端渲染視訊播放器。

當data.model被傳遞時,輸出用於Underscore模板的視訊標籤的標記。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function wp_underscore_video_template() {
$video_types = wp_get_video_extensions();
?>
<# var w_rule = '', classes = [],
w, h, settings = wp.media.view.settings,
isYouTube = isVimeo = false;
if ( ! _.isEmpty( data.model.src ) ) {
isYouTube = data.model.src.match(/youtube|youtu.be/);
isVimeo = -1 !== data.model.src.indexOf('vimeo');
}
if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
w = settings.contentWidth;
} else {
w = data.model.width;
}
if ( w !== data.model.width ) {
h = Math.ceil( ( data.model.height * w ) / data.model.width );
} else {
h = data.model.height;
}
if ( w ) {
w_rule = 'width: ' + w + 'px; ';
}
if ( isYouTube ) {
classes.push( 'youtube-video' );
}
if ( isVimeo ) {
classes.push( 'vimeo-video' );
}
#>
<div style="{{ w_rule }}" class="wp-video">
<video controls
class="wp-video-shortcode {{ classes.join( ' ' ) }}"
<# if ( w ) { #>width="{{ w }}"<# } #>
<# if ( h ) { #>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; ?>#>
>
<# if ( ! _.isEmpty( data.model.src ) ) {
if ( isYouTube ) { #>
<source src="{{ data.model.src }}" type="video/youtube" />
<# } else if ( isVimeo ) { #>
<source src="{{ data.model.src }}" type="video/vimeo" />
<# } else { #>
<source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# }
} #>
<?php
foreach ( $video_types as $type ) :
?>
<# if ( data.model.<?php echo $type; ?> ) { #>
<source src="{{ data.model.<?php echo $type; ?> }}" type="{{ settings.embedMimes[ '<?php echo $type; ?>' ] }}" />
<# } #>
<?php endforeach; ?>
{{{ data.model.content }}}
</video>
</div>
<?php
}
function wp_underscore_video_template() { $video_types = wp_get_video_extensions(); ?> <# var w_rule = '', classes = [], w, h, settings = wp.media.view.settings, isYouTube = isVimeo = false; if ( ! _.isEmpty( data.model.src ) ) { isYouTube = data.model.src.match(/youtube|youtu.be/); isVimeo = -1 !== data.model.src.indexOf('vimeo'); } if ( settings.contentWidth && data.model.width >= settings.contentWidth ) { w = settings.contentWidth; } else { w = data.model.width; } if ( w !== data.model.width ) { h = Math.ceil( ( data.model.height * w ) / data.model.width ); } else { h = data.model.height; } if ( w ) { w_rule = 'width: ' + w + 'px; '; } if ( isYouTube ) { classes.push( 'youtube-video' ); } if ( isVimeo ) { classes.push( 'vimeo-video' ); } #> <div style="{{ w_rule }}" class="wp-video"> <video controls class="wp-video-shortcode {{ classes.join( ' ' ) }}" <# if ( w ) { #>width="{{ w }}"<# } #> <# if ( h ) { #>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; ?>#> > <# if ( ! _.isEmpty( data.model.src ) ) { if ( isYouTube ) { #> <source src="{{ data.model.src }}" type="video/youtube" /> <# } else if ( isVimeo ) { #> <source src="{{ data.model.src }}" type="video/vimeo" /> <# } else { #> <source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" /> <# } } #> <?php foreach ( $video_types as $type ) : ?> <# if ( data.model.<?php echo $type; ?> ) { #> <source src="{{ data.model.<?php echo $type; ?> }}" type="{{ settings.embedMimes[ '<?php echo $type; ?>' ] }}" /> <# } #> <?php endforeach; ?> {{{ data.model.content }}} </video> </div> <?php }
function wp_underscore_video_template() {
	$video_types = wp_get_video_extensions();
	?>
<#  var w_rule = '', classes = [],
		w, h, settings = wp.media.view.settings,
		isYouTube = isVimeo = false;

	if ( ! _.isEmpty( data.model.src ) ) {
		isYouTube = data.model.src.match(/youtube|youtu.be/);
		isVimeo = -1 !== data.model.src.indexOf('vimeo');
	}

	if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
		w = settings.contentWidth;
	} else {
		w = data.model.width;
	}

	if ( w !== data.model.width ) {
		h = Math.ceil( ( data.model.height * w ) / data.model.width );
	} else {
		h = data.model.height;
	}

	if ( w ) {
		w_rule = 'width: ' + w + 'px; ';
	}

	if ( isYouTube ) {
		classes.push( 'youtube-video' );
	}

	if ( isVimeo ) {
		classes.push( 'vimeo-video' );
	}

#>
<div style="{{ w_rule }}" class="wp-video">
<video controls
	class="wp-video-shortcode {{ classes.join( ' ' ) }}"
	<# if ( w ) { #>width="{{ w }}"<# } #>
	<# if ( h ) { #>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; ?>#>
>
	<# if ( ! _.isEmpty( data.model.src ) ) {
		if ( isYouTube ) { #>
		<source src="{{ data.model.src }}" type="video/youtube" />
		<# } else if ( isVimeo ) { #>
		<source src="{{ data.model.src }}" type="video/vimeo" />
		<# } else { #>
		<source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
		<# }
	} #>

	<?php
	foreach ( $video_types as $type ) :
		?>
	<# if ( data.model.<?php echo $type; ?> ) { #>
	<source src="{{ data.model.<?php echo $type; ?> }}" type="{{ settings.embedMimes[ '<?php echo $type; ?>' ] }}" />
	<# } #>
	<?php endforeach; ?>
	{{{ data.model.content }}}
</video>
</div>
	<?php
}

常見問題

FAQs
檢視更多 >