本地视频需通过HTTP服务（如python3 -m http.server）访问，路径要相对且验证存在，MP4必须为H.264+AAC编码，autoplay需muted+playsinline+用户交互触发，移动端尤其注意iOS内联播放要求。
直接用 标签就能插入本地视频播放器，但多数人卡在黑屏、不自动播、移动端全屏这三步——根源不是代码写错，而是路径、协议、编码、属性组合没对上。
本地视频路径和协议必须用 HTTP 服务，不能双击打开 HTML
Chrome、Edge、Safari 在 file:// 协议下会拒绝加载本地视频，控制台报 Not allowed to load local resource。这不是 bug，是安全策略。
- 正确做法：启动一个本地 HTTP 服务器，比如终端运行
python3 -m http.server 8000，然后浏览器访问http://localhost:8000/your-page.html - 路径要相对且可验证：如果视频放在
videos/demo.mp4，src就写"videos/demo.mp4"，别漏掉videos/前缀 - 检查 Network 面板：加载失败时看是不是 404，确认文件真在那个路径下，大小不为 0
MP4 必须是 H.264 + AAC 编码，别直接丢 MOV 或剪映导出的 MP4
浏览器只认特定编码组合。很多“MP4”文件实际是 HEVC（H.265）或 ProRes 编码， 标签会静默失败——黑屏无报错，但 readyState 停在 0。
- 用
ffprobe demo.mp4查编码：Stream #0:0: Video: h264 (High)和Stream #0:1: Audio: aac (LC)才安全 - 转码推荐命令：
ffmpeg -i input.mov -c:v libx264 -crf 23 -c:a aac -b:a 128k output.mp4 - 不建议只靠
autoplay 要生效，muted + playsinline + 用户交互缺一不可
单独写 autoplay 几乎肯定失效。Chrome 和 Safari 现在要求更严：静音只是基础，移动端还强制内联播放，iOS 甚至需要用户点过页面才允许后续调用 play()。
- 基础自动播（静音）：
——playsinline是 iOS 必选项，否则强制全屏 - 带声音自动播？不行。必须等用户首次点击后，再 JS 调用：
document.addEventListener('click', () => video.play(), { once: true }) - Android WebView 可能还要加
webkit-playsinline和显式width/height，否则渲染区域为 0 导致空白
黑屏但控制条可见？先查 poster 和 loadedmetadata
控制条出来说明标签解析成功，但画面黑，大概率是首帧没解码出来，或 poster 图片尺寸/格式拖慢了初始化。
-
poster推荐用同尺寸 JPG，小于 50KB，避免加载延迟导致首帧黑屏超过 1 秒 - 别监听
load事件来触发播放，它不保证元数据就绪；改用loadedmetadata：video.addEventListener('loadedmetadata', () => { if (video.readyState >= 2) video.play() }) - 移动端注意：某些安卓机型需配合
preload="auto"（但会多耗流量），测试时关掉后台下载再看表现
真正卡住的从来不是怎么写 ，而是视频文件本身能不能被浏览器吃下去、HTTP 服务有没有起、移动端的 playsinline 有没有漏掉——这些点不验一遍，光调 JS 没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
