前端Wiki/HTML5/基础/多媒体

video 视频

<video> 是 HTML5 最具代表性的标签之一。常用属性：播放控件 controls；poster 指定封面图（视频未播放时显示，比黑屏友好）；width/height 定尺寸；muted/loop/preload 与 audio 一致。

自动播放政策是实际项目必踩的坑：浏览器要求"自动播放必须无声"。所以营销页常见的做法是 autoplay muted loop playsinline 四件套——静音循环背景视频，同时 playsinline 防止 iOS 上自动全屏。

格式选择：H.264 封装的 MP4 覆盖面最广，WebM 体积更小但 Safari 支持较晚，实际项目通常双格式兜底。视频文件大，务必配合 preload="none" 或懒加载策略控制流量。

本节要点video 必会 controls 与 poster；自动播放需静音（autoplay muted loop playsinline 组合）；格式首选 MP4(H.264)，WebM 兜底；大视频注意 preload 策略。

HTML

<!-- 基础用法：封面图 + 控件 + 尺寸 -->
<video src="intro.mp4" controls poster="cover.jpg" width="640"></video>

<!-- 背景视频四件套：静音自动播放、循环、iOS 不全屏 -->
<video autoplay muted loop playsinline>
  <source src="bg.mp4" type="video/mp4">
  <source src="bg.webm" type="video/webm">
</video>

<!-- 多格式兜底 + 降级文字 -->
<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持视频播放，<a href="movie.mp4">点此下载</a>。
</video>

🔗 相关词条HTML5 浏览器标签 Web Components localStorage FileReader

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读