HTML 音视频
学习 audio 和 video 标签 · 难度：入门 · +10XP
HTML 音视频
<audio>和<video>标签让网页原生支持多媒体播放，无需Flash等插件。
视频 <video>
<video width="640" controls poster="thumb.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
您的浏览器不支持video标签
</video>视频属性
| 属性 | 作用 |
|---|---|
controls | 显示播放控制条 |
autoplay | 自动播放（通常需配合muted） |
muted | 静音播放 |
loop | 循环播放 |
poster | 视频封面图 |
preload | 预加载策略(none/metadata/auto) |
音频 <audio>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
</audio>支持格式
| 格式 | 类型 | 浏览器 |
|---|---|---|
| MP4 | video/mp4 | 所有浏览器 |
| WebM | video/webm | Chrome/Firefox/Edge |
| MP3 | audio/mpeg | 所有浏览器 |
| OGG | audio/ogg | Chrome/Firefox |
???? 练习
- 创建带控制条的视频播放器
- 添加自动静音播放的背景视频