讲解
HTML5 的 <audio> 和 <video> 让浏览器不依赖任何插件就能播放媒体。两者用法高度一致：src 指向媒体文件，controls 显示浏览器自带的播放控制条——不写 controls 用户就看不到任何播放按钮，自定义播放器才省略它。两个元素都不是空标签，标签之间的内容（比如「您的浏览器不支持视频」加下载链接）只在浏览器不支持时显示。
更稳的写法是用 <source> 子元素提供多个格式：浏览器从上往下挑第一个自己能播的格式。视频通行 MP4（H.264，兼容性最好）+ WebM（更小，现代浏览器支持）；音频通行 MP3 + OGG。type 属性（如 type="video/webm"）帮助浏览器不下载就能判断能否播放。视频常用属性还有：poster 指定播放前的封面图、width/height 定尺寸防布局跳动、preload="metadata" 只预载时长等基本信息（取值还有 none 和 auto）、loop 循环、muted 静音。
autoplay 有个必须知道的现实：现代浏览器普遍禁止带声音的自动播放，唯一可靠的自动播放姿势是 autoplay muted 一起写（静音自动播，常见于背景视频）。无障碍方面，<track kind="subtitles" src="subs-zh.vtt" srclang="zh" label="中文字幕"> 为视频挂 WebVTT 字幕文件，听障用户和静音观看场景都依赖它——正规视频内容应尽量提供字幕。
示例
<!-- 视频：多格式回退 + 封面 + 字幕 -->
<video controls width="800" height="450" poster="cover.jpg" preload="metadata">
<source src="lesson.webm" type="video/webm" />
<source src="lesson.mp4" type="video/mp4" />
<track kind="subtitles" src="subs-zh.vtt" srclang="zh" label="中文字幕" default />
您的浏览器不支持 HTML5 视频，<a href="lesson.mp4">点此下载观看</a>。
</video>
<!-- 音频：双格式 -->
<audio controls preload="none">
<source src="episode01.ogg" type="audio/ogg" />
<source src="episode01.mp3" type="audio/mpeg" />
您的浏览器不支持 HTML5 音频。
</audio>
<!-- 背景视频：静音 + 自动播放 + 循环，缺一不可 -->
<video autoplay muted loop playsinline width="1280" height="720" poster="bg-cover.jpg">
<source src="bg.mp4" type="video/mp4" />
</video>
playsinline 让 iPhone 在页面内播放而不是强制全屏，背景视频场景必备。
常见坑
- 只写 autoplay 不带 muted：带声音自动播会被浏览器直接拦下，视频停在第一帧。自动播放的正确组合是 autoplay + muted（+ playsinline）。
- 省略 controls 又没做自定义控制：用户面对一个播不了也停不掉的媒体框。不写 controls 的前提是你用 JS 实现了全套控制。
- 只提供一种格式还选错：Safari 对 WebM 的支持历史曲折，单一 WebM 可能无法播放。MP4（H.264）是必须保底的格式。
- 大视频不设 preload 策略：默认 preload 因浏览器而异，页面里多个大视频可能悄悄吃掉大量流量。列表场景用 preload="none" 或 "metadata"。
小结
audio/video 配 controls 即可播放，source 多格式回退（视频保底 MP4），poster/width/height 稳住版面；自动播放必须静音，字幕用 track + WebVTT。下一章学习嵌入外部页面的 iframe。