HTML video：播放控件、自动播放、响应式尺寸与故障排查

HTML 参考手册

创建时间 2026-10-30 最后修改 2026-10-30

HTML video 在网页中嵌入视频播放器。使用 src 或子元素 source 设置文件 URL，并添加 controls 以便用户可以播放和暂停。即使存在自动播放，浏览器策略也可能阻止自动播放。

选择播放体验的属性

属性	目的	检查内容
`controls`	显示原生播放控件	为普通内容视频提供。不同浏览器显示和可用按钮可能不同。
`muted`	静音开始	不要期望能够自动播放带声音。静音也不能保证自动播放。
`autoplay`, `loop`	自动开始并在结束后重复播放	允许读者停止播放，并考虑动画是否会干扰阅读。
`playsinline`	在元素位置请求播放	在移动设备上有用，但不能保证在每个设备上显示行为完全相同。
`poster`	播放前显示的图片 URL	使用可访问的图片，而不是视频 URL。
`preload`	关于预加载数据的提示	none 表示不预加载；metadata 请求如持续时间等信息；auto 允许加载整个文件。这是浏览器可能忽略的提示。

controls、muted、autoplay 和 loop 是布尔属性，属性存在就表示启用。autoplay="false" 无法关闭自动播放，必须移除 autoplay 属性。请求自动播放需要加载媒体，因此仅设置 preload="none" 也无法阻止下载。

运行完整的视频示例

将此代码保存为 video.html 并在浏览器中打开。它加载 MDN 文档中使用的公共花卉示例，需要联网。对于您自己的服务，请托管您有权使用的视频并替换 URL。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML 视频播放</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    video { display: block; width: 640px; max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <h1>花朵视频</h1>
  <video id="flower" controls playsinline preload="metadata" aria-label="随风摇摆的花朵视频">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
    此浏览器不支持 video 元素。
  </video>
  <p>画面说明：花朵和周围的草叶随风摇摆。</p>
  <p><a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4"
    target="_blank" rel="noopener noreferrer">打开 MP4 视频文件</a></p>
</body>
</html>

检查是否有带播放按钮的播放器并启动它。花卉应该移动，播放位置应该前进。默认示例没有自动播放或循环属性。
暂停播放以停止运动。在窄窗口中，播放器应在内容宽度内缩小。
为了比较重复，只需在开头的视频标签中添加 loop 属性，然后重新打开文件。检查播放是否在到达结束后返回到开始位置，然后移除该属性以恢复原始行为。

source 提供文件格式，以便浏览器可以选择一个支持的候选格式。准备同一视频的真实 WebM 和 MP4 文件；更改文件名扩展名并不会转换格式。播放还取决于 MP4 等容器中使用的视频和音频编解码器。

自动播放和移动设备尺寸

如果您需要自动播放，请通过在打开的视频标签中添加 autoplay muted 来进行比较。保留 playsinline 和 controls。用户偏好、电源节能策略、站点交互历史或其他浏览器规则可能会拒绝自动播放，因此请保留播放按钮。

CSS width: 640px 是所需的显示宽度，而 max-width: 100% 用于限制窄父元素中的溢出。height: auto 保持视频的宽高比。如果您定义了固定比例的框架，object-fit: contain 可保留整个场景，而 cover 则通过裁剪部分边缘来填充框架；请检查重要内容是否仍然可见。

排查播放问题并检查可访问性

文件网址: 直接打开视频链接，并确认文件存在且无需登录即可访问。检查是否误将本地路径当作服务器路径，以及文件名大小写是否匹配。
格式和响应: 检查服务器是否发送正确的video/mp4 或 video/webm MIME 类型，并使用受支持的编解码器。开发者工具中的网络面板可以帮助检查失败的请求和响应头。
自动播放: 如果点击播放有效，将自动播放限制与损坏的文件区分开来。
回退指导： 视频内的文本是为不支持该元素的浏览器准备的。在现代浏览器中，加载失败不会自动将其显示为错误消息。因此，示例将在播放器外部也放置文件链接和场景描述。
包含对白的视频应提供准确字幕，并按需要提供文字稿。使用 track 元素和 WebVTT 文件关联字幕。对仅通过视觉传达的重要信息，还应考虑提供文字说明或音频描述。

请参阅 MDN 视频参考了解属性，以及 MDN 视频字幕指南了解字幕文件。

HTML 参考手册