video 标签是 html5 原生语义化视频标签，不依赖 flash；需用 source 提供多格式、preload 控制预加载、playsinline 适配 ios 全屏限制；autoplay 必须配合 muted 才生效，且受浏览器策略和服务器 mime 类型配置严格约束。
video 标签是插入 HTML5 视频的唯一标准方式
HTML5 不再依赖 Flash，<video></video> 是原生支持视频播放的语义化标签。它不自动下载或播放，行为完全由属性控制；没加 controls 属性时，页面上不会显示任何控件，甚至可能“看不见”视频——这不是 bug，是设计如此。
-
src属性直接指定单个视频地址（如src="demo.mp4"），但不推荐在生产环境单独使用，因为浏览器兼容性差 - 更可靠的做法是用
<source></source>子标签提供多格式备选：mp4（H.264）、webm（VP8/VP9）、ogv（Theora） -
preload值为"none"可阻止页面加载时预抓取视频，节省带宽；设为"metadata"则只加载时长、尺寸等基本信息 - 移动端 Safari 强制要求
playsinline属性，否则视频会全屏播放（iOS 10+）
<video width="640" height="360" controls playsinline preload="metadata"> <source src="demo.mp4" type="video/mp4"> <source src="demo.webm" type="video/webm"> 您的浏览器不支持 video 标签。 </video>
常见报错：Failed to load resource 或 “Invalid source”
这类错误基本不是代码写错，而是路径或 MIME 类型配置问题。服务器返回的响应头 Content-Type 必须与 type 属性严格匹配，例如 type="video/mp4" 对应的响应头必须是 Content-Type: video/mp4。本地双击打开 HTML 文件（file:// 协议）时，多数浏览器会拒绝加载视频——这是安全限制，不是你代码的问题。
- 开发阶段务必用本地服务启动，比如 Python 的
python -m http.server 8000，而非直接打开 .html 文件 - 检查开发者工具 Network 面板，点击视频请求，看 Response Headers 中的
Content-Type是否正确 - 如果用 Nginx，需在配置中加入：
types { video/mp4 mp4; video/webm webm; } - MP4 文件本身编码不合规范也会导致静音或黑屏，可用
ffprobe demo.mp4查看流信息，确认含h264视频流和aac音频流
autoplay 和 muted 是绕过浏览器自动播放策略的必要组合
Chrome、Firefox、Safari 等现代浏览器默认禁止有声音的自动播放。只写 autoplay 很可能失效，控制台还会报 DOMException: play() failed because the user didn't interact with the document first。
- 必须同时添加
muted属性才能触发自动播放，哪怕你后续用 JS 解除静音 -
autoplay+muted在 iOS Safari 上仍受限制：仅当视频在视口内且用户已与页面交互过才可能生效 - 不要依赖
autoplay实现关键功能（如引导动画），它本质是“尽力而为”，不是确定性行为 - 若需用户点击后播放，用 JS 调用
videoEl.play()即可，此时无需muted
<video autoplay muted loop playsinline> <source src="loop.mp4" type="video/mp4"> </video>
audio 标签用法几乎一致，但更简单
<audio></audio> 和 <video></video> 共享大部分属性和事件模型，区别仅在于默认无画面、不占布局空间（除非显式设 height）。它同样需要 <source></source> 多格式支持，同样受 autoplay + muted 策略约束（尽管音频没有“画面”，但规则照旧）。
立即学习“前端免费学习笔记（深入）”；
- 常用格式优先级：MP3（最广兼容）、WAV（无压缩，体积大）、OGG（开源免费，但 Safari 支持差）
-
preload="auto"对音频意义不大，尤其长音频，容易浪费流量；建议用"metadata"或"none" - 想隐藏控件只留 JS 控制？去掉
controls，用play()、pause()、currentTime等 API 操作
