wp_underscore_video_template()

💡 云策文档标注

概述

wp_underscore_video_template() 函数用于在 Underscore 模板中输出视频标签的标记，当传递 data.model 数据时。它生成一个视频元素，支持多种视频格式，并处理宽度、高度等属性。

关键要点

函数输出视频标签的 HTML 标记，适用于 Underscore 模板。
支持通过 wp_get_video_extensions() 获取的视频扩展名。
处理视频宽度和高度的动态计算，包括内容宽度调整。
为 YouTube 和 Vimeo 视频添加特定 CSS 类。
使用 data.model 对象传递视频属性，如 src、width、height 等。
包含 preload 属性设置为 metadata 的默认值。
输出视频源标签，支持多种 MIME 类型。
包含 data.model.content 用于嵌入内容。

代码示例

function wp_underscore_video_template() {
    $video_types = wp_get_video_extensions();
    ?>
    <video style="{{ w_rule }}" class="{{ classes.join(' ') }}" <# if ( _.isUndefined( data.model.poster ) ) { #> poster="{{ data.model.poster }}" <# } #> preload="metadata" <# _.each( ['autoplay', 'loop', 'muted'], function( attr ) {
        if ( ! _.isUndefined( data.model[ attr ] ) && data.model[ attr ] ) {
            #> {{ attr }} <#
        }
    }); #> >
        <# if ( data.model.src ) {
            _.each( settings.embedMimes, function( mime, type ) {
                if ( wp.media.isVideoType( type ) ) {
                    #> <source src="{{ data.model.src }}" type="{{ mime }}" /> <#
                }
            });
        } #>
        {{{ data.model.content }}}
    </video>
    <?php
}

注意事项

函数依赖于 data.model 对象，必须包含 src、width、height 等属性。
宽度和高度会根据 settings.contentWidth 动态调整。
仅支持通过 wp_get_video_extensions() 定义的视频格式。
YouTube 和 Vimeo 视频会自动添加相应的 CSS 类。
preload 属性固定为 metadata，其他属性如 autoplay、loop、muted 可选。

📄 原文内容

Outputs the markup for a video tag to be used in an Underscore template when data.model is passed.

Source

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 }}"<# } #>

	 '',

		'preload' => 'metadata',

	);

	foreach ( $props as $key => $value ) :

		if ( empty( $value ) ) {

			?>

		<#

		if ( ! _.isUndefined( data.model. ) && data.model. ) {

			#> ="{{ data.model. }}"<#

		} #>
			="{{ _.isUndefined( data.model. ) ? '' : data.model. }}"
	<#
	if ( ! _.isUndefined( data.model. ) && data.model. ) {

		#> <#

	}

	#>

>

	<# 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() ] }}" />

		<# }

	} #>
	<# if ( data.model. ) { #>

	<source src="{{ data.model.<?php echo $type; ?> }}" type="{{ settings.embedMimes[ '<?php echo $type; ?>' ] }}" />

	<# } #>
	{{{ data.model.content }}}

</video>

</div>

	</pre><p class="wporg-dot-link-list"><a href="https://developer.wordpress.org/reference/files/wp-includes/media-template.php/">View all references</a> <a href="https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/media-template.php#L56">View on Trac</a> <a href="https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/media-template.php#L56-L149">View on GitHub</a></p></section>
		<section class="wp-block-wporg-code-reference-related" data-nosnippet="true"><h2 id="related" class="is-toc-heading wp-block-heading has-heading-5-font-size" tabindex="-1" ><a href="#related">Related</a></h2> <section style="margin-top:var(--wp--preset--spacing--20)" class="wp-block-wporg-code-table" id="uses"><figure class="wp-block-table "><table><thead><tr><th scope="col">Uses</th><th scope="col">Description</th></tr></thead><tbody><tr class=""><td><a href="https://developer.wordpress.org/reference/functions/wp_get_video_extensions/">wp_get_video_extensions()</a><code>wp-includes/media.php

Returns a filtered list of supported video formats.

Used by	Description
WP_Widget_Media_Video::render_control_template_scripts()`wp-includes/widgets/class-wp-widget-media-video.php`	Render form template scripts.
wp_print_media_templates()`wp-includes/media-template.php`	Prints the templates used in the media manager.

Changelog

Version	Description
3.9.0	Introduced.

云策 WordPress 开发者社区

函数文档