video标签原生支持网页视频播放，但需确保路径正确、格式兼容（优先MP4/H.264）、添加controls属性启用操作控件，并建议使用preload="metadata"和本地服务调试以规避file://协议限制。
video 标签直接写进 HTML 就能播，但路径和格式得对
浏览器原生 <video></video> 标签不需要 JS 或插件，但常见问题几乎都出在路径写错或视频格式不被支持。本地双击打开 index.html 时，file:// 协议下部分浏览器（如 Chrome）会拒绝加载本地 .mp4 文件——这不是代码问题，是安全策略。
- 确保视频文件和
index.html在同一目录，或使用相对路径，例如：<source src="video.mp4" type="video/mp4"></source> - 优先用
.mp4（H.264 编码），兼容性最好；避免用.avi、.mov等浏览器不原生支持的格式 - 如果用绝对路径，必须以
/开头（网站根目录）或完整 URL，不能写C:\xxx\video.mp4 - 开发阶段建议起一个本地服务（比如 Python 的
python -m http.server），绕过file://限制
controls 属性不是可选的，没它用户根本没法操作
很多人写了 <video></video> 却发现页面上啥也不显示，或者只有一片黑——大概率是漏了 controls。这个属性不是“美化选项”，而是启用播放、暂停、音量、进度条等基本交互的开关。
- 最小可用写法：
<video controls><source src="demo.mp4" type="video/mp4"></source></video> - 不加
controls，即使视频能自动播放（autoplay），用户也无法暂停、拖拽或调音量 - 想自动播放且静音（绕过浏览器 autoplay 策略），得同时加
autoplay muted，仅autoplay在多数浏览器里会被忽略
preload="metadata" 是平衡加载速度和首帧延迟的关键
preload 控制浏览器何时开始加载视频数据。设成 auto 可能拖慢页面首屏渲染；设成 none 又会导致点击播放后卡顿几秒——尤其在弱网下。
-
preload="metadata"是最稳妥的选择：只预加载时长、宽高、封面帧等元信息，用户点播放再拉视频流 - 移动端慎用
autoplay，iOS Safari 强制要求用户手势触发播放，否则静音也不行 - 如果视频很大（>50MB），考虑加
poster属性指定封面图，避免黑屏等待
Chrome 报错 “Failed to load resource: net::ERR_BLOCKED_BY_CLIENT” 不是路径问题
这个错误看着像 404，实际常是广告拦截插件（如 uBlock Origin）把 .mp4 当作跟踪资源给屏蔽了。也可能是服务器没配好 MIME 类型，但本地开发时更可能是前者。
立即学习“前端免费学习笔记（深入）”；
- 先禁用所有浏览器插件，刷新测试；若恢复，就去插件设置里放行该域名或文件类型
- 检查开发者工具 Network 面板，看视频请求的状态码：如果是 200 但预览为空，大概率是编码问题（比如用了 HEVC/H.265）
- 用
ffprobe video.mp4确认编码：Stream #0:0: Video: h264 (High)才安全；hevc或av1兼容性差
src 都得亲手验证一遍。 
