html5 用标签嵌入本地视频需确保路径正确、格式兼容（推荐 h.264+aac 的 mp4），且必须在 http/https 服务器环境下运行；加 controls 才显示控件，autoplay 需配合 muted 才能生效，移动端注意 preload 无效及 ios 全屏限制。
HTML5 怎么用 <video></video> 标签嵌入本地视频
直接放进去就行，但得注意路径和格式。浏览器只认特定编码的视频，不是所有。mp4 都能播。<video></video>本身不下载、不转码，它只是“告诉浏览器：这儿有个视频，你试着解码播放”。
- 视频文件必须放在服务器环境下访问（比如用
http://或https://打开），双击.html文件用file://协议时，Chrome/Firefox 会因安全策略拒绝加载<video></video>资源 - 推荐用
mp4（H.264+AAC）格式，兼容性最好；webm可作为备选，但 Safari 老版本不支持 -
src路径写相对路径更稳，比如src="videos/demo.mp4"，别用绝对磁盘路径（C:xxx）或带空格 / 中文的路径 - 加
controls属性才有播放控件，不加就是个黑框——很多人卡在这儿，以为没加载成功
<video width="640" height="360" controls> <source src="videos/demo.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。</video>为什么 <video></video> 加载了但不自动播放
因为现代浏览器默认禁止自动播放带声音的视频，这是策略，不是 bug。哪怕写了autoplay，只要没同时满足“静音 + 用户交互过”，就会被拦截。
- 加
muted属性是硬性前提：<video autoplay muted></video> - 部分浏览器（如 iOS Safari）还要求
playsinline，否则强制全屏播放 -
autoplay在页面加载完成前就触发，如果视频还没加载完，可能闪一下就停——建议配合preload="auto"，但别滥用，会影响首屏速度 - 不要依赖
play()方法在DOMContentLoaded里调用，多数情况会失败；得等canplay或canplaythrough事件
怎么让 <video></video> 适配不同网络环境
单个 src 没法切换清晰度，得靠 <source></source> 配合 media 属性做响应式降级，或者用 JavaScript 手动切流——但纯 HTML 方案只能做简单判断。
- 可以用
media属性按视口宽度选源：<source src="v-720.mp4" media="(min-width: 768px)"></source> - 多个
<source></source>按顺序尝试，浏览器选第一个能解码的，所以把mp4放前面，webm放后面 - 别指望
media能识别网速（如prefers-reduced-data目前支持极差），真要自适应，得上HLS或DASH，但那就超出 HTML5 原生能力了 - 移动端注意：iOS 对
preload完全忽略，preload="none"也没用，它自己决定何时加载
video元素常见报错和排查点
控制台报错通常不是代码写错，而是资源或策略问题。最常看到的是 net::ERR_ABORTED 或Failed to load resource，90% 跟路径、MIME 类型、跨域有关。
立即学习 “ 前端免费学习笔记（深入）”；
-
net::ERR_CONNECTION_REFUSED：本地用file://打开，浏览器直接拒了，必须起个本地服务（如python3 -m http.server） -
The video could not be loaded：检查服务器是否返回了正确的Content-Type，Nginx/Apache 要配置mp4为video/mp4，否则 Chrome 不认 - 视频显示黑屏但有声音：可能是 H.265（HEVC）编码，只有 Safari 和部分 Edge 支持，Chrome/FF 默认不支持
- 右键“检查元素”能看到
<video></video>标签，但没画面：先看network面板里视频请求是否 200，再看console有没有DOMException: play() failed
真正麻烦的从来不是怎么写<video></video>，而是搞清当前环境到底卡在哪一层：是路径错了？服务器没配 MIME？浏览器策略拦了？还是编码格式压根不支持？挨个排除比重写代码快得多。
