HTML5的<video>和<audio>标签无需插件即可嵌入音视频，核心属性包括src、controls、autoplay（需muted）、loop、poster（仅video）和preload；通过<source>支持多格式兼容；可结合CSS实现响应式适配，并用JavaScript控制播放、进度、音量等。
HTML5 的 <video> 和 <audio> 标签让网页直接嵌入音视频成为可能，无需 Flash 或第三方插件。它们结构简洁、语义清晰，配合少量属性就能实现基础播放功能，是现代网页媒体内容的基石。
核心属性与基础写法
两个标签语法高度一致，最简可用形式只需 src 和 controls：
-
src：指定媒体文件路径（支持相对或绝对 URL） -
controls：布尔属性，存在即显示原生控制条（播放/暂停、进度条、音量等） -
autoplay：多数桌面浏览器允许静音自动播放，但移动端普遍禁用；常需搭配muted才能生效 -
loop：循环播放，适合背景音效或宣传短片 -
poster（仅<video>）：未播放时显示的封面图，避免黑屏，提升首屏体验 -
preload：控制预加载行为，metadata（默认）只加载元信息；auto尝试预加载全部；none不预加载
多格式兼容与 source 元素
不同浏览器对编码格式支持不一，直接写 src 只能指定一种格式。更可靠的做法是用 <source> 提供多个选项，浏览器按顺序选择首个支持的格式：
- 音频常用格式：
audio/mpeg（MP3）、audio/ogg（Ogg Vorbis）、audio/wav - 视频常用格式：
video/mp4（H.264）、video/webm（VP8/VP9）、video/ogg（Theora） - 示例中
<source>必须放在<video>或<audio>内部，且在任何子内容之前
响应式与样式适配
原生控件会随容器缩放，但视频画幅易被拉伸变形。保持宽高比推荐使用“padding-bottom 技巧”：
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
position: relative和padding-bottom: 56.25%（对应 16:9） - 内部
<video>设position: absolute，宽高均为 100% - 若需强制填满容器且允许裁剪，可加
object-fit: cover
JavaScript 基础控制能力
通过 DOM 获取媒体元素后，可调用标准方法实现交互逻辑：
-
play()和pause()控制播放状态 -
currentTime读写当前播放时间（秒），可用于跳转或同步进度条 -
volume设置音量（0–1），muted属性控制静音开关 -
duration获取总时长（加载完成后才有效），常配合loadedmetadata事件使用 - 监听
timeupdate事件可实时更新播放进度，适合自定义进度条
