HTML Video

HTML 视频

HTML <video> 元素提供了一种标准的方式，无需外部插件即可直接在网页中嵌入和播放视频。

在 HTML 中播放视频

在 HTML5 之前，嵌入视频通常依赖于 Adobe Flash 等浏览器插件。<video> 元素的引入带来了一种原生的、无需插件的标准。

浏览器支持

<video> 元素本身受到所有现代网页浏览器的支持。

对特定视频格式的支持各不相同，这就是为什么建议提供多个来源的原因。

HTML

要嵌入视频，请使用 <video> 元素。在其内部使用 <source> 元素来指定不同的视频文件格式。

<!DOCTYPE html>
<html>
<head>
  <title>HTML Video Example</title>
</head>
<body>

<h1>Example Video</h1>

<video controls width="640" height="360" poster="posterimage.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <!-- Fallback content for older browsers -->
  <!-- 旧版浏览器的备用内容 -->
  Your browser does not support the video tag.
  You can <a href="movie.mp4">download the video</a> instead.
  <!-- 您的浏览器不支持 video 标签。
  您可以<a href="movie.mp4">下载视频</a>来观看。 -->
</video>

</body>
</html>

工作原理

<video> 元素： 视频的容器。
controls 属性： 添加标准视频控制（播放/暂停、音量、全屏、时间线）。
width 和 height 属性： 设置视频播放器的尺寸。提供这些属性有助于浏览器预留空间，防止视频加载时发生布局偏移 (CLS)。虽然 CSS 也能设置尺寸，但这些属性对于初始布局更有利。
poster 属性： 指定一个图片，用于在视频下载期间或用户播放之前显示。
<source> 元素： 列出可用的视频文件。浏览器会选择它支持的第一个格式。
src 属性（在 <source> 上）： 视频文件的路径。
type 属性（在 <source> 上）： 视频文件的 MIME 类型，有助于浏览器快速确定是否可以播放该文件。
备用内容： 放置在 <video> 开标签和 </video> 闭标签之间（但在任何 <source> 元素之后）的文本或 HTML 将只显示给不支持 <video> 元素的浏览器。

HTML

autoplay 属性建议视频应尽快自动开始播放。

<video controls width="640" height="360" autoplay muted>
  <source src="intro.mp4" type="video/mp4">
  <source src="intro.webm" type="video/webm">
  Your browser does not support the video tag.
  <!-- 您的浏览器不支持 video 标签。 -->
</video>

	重要提示：现代浏览器对自动播放有严格的策略以保护用户。除非视频设置为静音（使用 `muted` 属性）或用户之前与网站有过交互，否则自动播放通常会被阻止。务必提供用户控制 (`controls`)，因为自动播放可能不会工作。

其他有用的属性包括 loop（在视频结束时自动重新开始）和 preload（auto, metadata, none）来提示应预加载多少视频数据。

HTML 视频 - 常见格式和浏览器支持

网络上最常用的视频格式是：

格式 (编解码器)	说明和浏览器支持	MIME 类型
MP4 (H.264 + AAC)	几乎所有浏览器和设备都提供出色的支持。H.264 受专利保护，但获得广泛许可。	`video/mp4`
WebM (VP9 + Opus/Vorbis)	免版税格式，在现代浏览器（Chrome、Firefox、Edge、Opera）中支持良好。Safari 最近增加了支持。	`video/webm`
AV1 (with Opus)	较新的、免版税的编解码器，提供比 VP9/H.264 更好的压缩。在主要浏览器中的支持正在迅速增长。	`video/av1`（或在 MP4/WebM 容器内）
Ogg (Theora + Vorbis)	较旧的免版税格式，主要由 Firefox 支持。与 MP4 和 WebM 相比，现在不太常见。	`video/ogg`

建议：至少提供 MP4 (H.264) 以实现广泛兼容性，并提供 WebM (VP9 或 AV1) 以支持免版税格式的现代浏览器。

HTML 视频 - 脚本和可访问性

<video> 元素拥有丰富的 JavaScript API，用于控制播放、音量、定位以及响应各种事件（如 play, pause, ended, timeupdate）。

示例：自定义播放/暂停按钮

<video id="myVideo" width="320" height="240" src="my_video.mp4"></video>
<button id="playPauseBtn">Play</button>

<script>
  const video = document.getElementById('myVideo');
  const playPauseBtn = document.getElementById('playPauseBtn');

  playPauseBtn.addEventListener('click', () => {
    if (video.paused || video.ended) {
      video.play();
      playPauseBtn.textContent = 'Pause';
    } else {
      video.pause();
      playPauseBtn.textContent = 'Play';
    }
  });

  // Update button text when video ends or is paused by controls
  // 视频结束或通过控制暂停时更新按钮文本
  video.addEventListener('pause', () => { playPauseBtn.textContent = 'Play'; });
  video.addEventListener('play', () => { playPauseBtn.textContent = 'Pause'; });
</script>

对于可访问性，使用 <track> 元素提供字幕、隐藏式字幕、描述或章节。

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
  <!-- kind="subtitles": 表示这是一个字幕轨道 -->
  <!-- src="subtitles_en.vtt": 字幕文件路径 -->
  <!-- srclang="en": 字幕语言为英语 -->
  <!-- label="English": 在用户界面中显示的语言标签 -->
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Español">
  <!-- 您的浏览器不支持 video 标签。 -->
  Your browser does not support the video tag.
</video>

请参考 MDN Web 文档获取 <video> 元素的完整 DOM 参考。

HTML 视频相关标签

标签	描述
	定义视频播放器容器。
	为 `<video>` 元素指定多个媒体资源（不同格式或分辨率）。
	为媒体元素定义定时文本轨道（字幕、隐藏式字幕、描述）。

HTML Video

HTML 视频

在 HTML 中播放视频

浏览器支持

HTML 元素

工作原理

HTML 自动播放

HTML 视频 - 常见格式和浏览器支持

HTML 视频 - 脚本和可访问性

HTML 视频相关标签

HTML

HTML