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？浏览器策略拦了？还是编码格式压根不支持？挨个排除比重写代码快得多。
