云策 WordPress 开发者社区

主题开发文档

Video

查看官方原文 ↗
💡 云策文档标注

概述

WordPress 视频功能允许通过短代码 [video] 嵌入和播放视频文件，支持多种格式如 mp4、webm 等。文档详细介绍了短代码的使用方法、选项（如循环、自动播放、海报图）以及样式自定义。

关键要点

  • 使用 [video] 短代码嵌入视频，支持 mp4、m4v、webm、ogv、wmv 和 flv 格式
  • 在模板文件中使用 do_shortcode() 函数调用短代码，可结合 get_template_directory_uri() 获取主题目录下的视频文件路径
  • 短代码支持 loop、autoplay、poster、width 和 height 等选项，用于控制视频播放行为和外观
  • 通过 CSS 类名 .wp-video-shortcode 自定义视频播放器样式
  • 主题的 content_width 设置视频最大宽度

代码示例

// 基本短代码示例
[video src="pepper.mp4"]

// 在模板文件中使用 do_shortcode()
$video_file = get_template_directory_uri() . "/videos/pepper.mp4";
echo do_shortcode( '[video mp4=' . $video_file . ']' );

// 带循环和自动播放选项
echo do_shortcode( '[video mp4=' . $video_file . ' loop="on" autoplay=1]' );

// 设置海报图和尺寸
echo do_shortcode( '[video mp4=' . $video_file . ' poster=' . get_template_directory_uri() . '/images/album_cover.jpg]' );
echo do_shortcode( '[video mp4=' . $video_file . ' width=320 height=240]' );

注意事项

  • 视频文件应存储在可访问的目录中，如主题文件夹，并使用正确路径
  • width 和 height 选项可省略，此时使用视频文件原始尺寸，但受 content_width 限制
  • 样式自定义需通过 .wp-video-shortcode 类名在样式表中实现
📄 原文内容

Video

The WordPress video feature allows you to embed video files and play them back using a simple shortcode . Supported file types are mp4, m4v, webm, ogv, wmv and flv.

Video shortcode

Following shortcode displays video player that loads pepper.mp4 file:

To use the shortcode in the template file, use the do_shortcode() function. If the video file is stored in in your theme directory, get the file url directly using get_template_directory_uri() or get_stylesheet_uri() :

$video_file = get_template_directory_uri() . "/videos/pepper.mp4";
echo do_shortcode( '' );

The following video player will be loaded.

Loop and Autoplay

The shortcode video has the same option with audio. Refer to the related section for the loop and autoplay options.

The following example starts playing the video immediately after the page load and loops:

echo do_shortcode( '' );

Initial image and Styling

The following basic options are supported:

Poster

Defines image to show as placeholder before the media plays.
The following same code takes album_cover.jpg stored in (theme directory)/images folder as the initial image:

echo do_shortcode( '' );

Height

Defines height of the media. Value is automatically detected on file upload. When you omit this option, the media file height is used.

Width

Defines width of the media. Value is automatically detected on file upload. When you omit this option, the media file width is used.

The theme’s content_width sets the maximum width.

The following example will load the audio player with 320 pixels width and 240 pixels height:

echo do_shortcode( '' );

Styling

If you want to change look & feel of video player from stylesheet, you can target the class name of “wp-video-shortcode”. If you want to show the audio player like above in 320 x 240 size, insert following code into your stylesheet:

.wp-video-shortcode {
    height: 240px;
    width: 320px;
}

Supported Video format

  • mp4
  • m4v
  • webm
  • ogv
  • flv

References

For more technical details such as internal library that enables this function, refer to