优先使用H.264编码MP4并确保路径正确，本地需用HTTP服务器而非file://协议；autoplay需配合muted，移动端加playsinline且设宽高；用JS控制播放时注意readyState和事件监听。
怎么让 <video></video> 标签在主流浏览器里正常播放
多数情况下播不了，不是代码写错了，而是视频格式或路径没对上。浏览器只支持特定编码的 MP4（H.264 + AAC）、WebM（VP8/VP9 + Vorbis/Opus），不认 MOV、AVI 或未转码的 MP4。
- 优先用
mp4，但必须确认是 H.264 编码（用ffprobe video.mp4查） - 路径别写相对错位：
src="videos/demo.mp4"要确保该路径真能被 HTML 文件访问到（开发者工具 Network 面板看 404 吗？） - 加
controls属性才显示播放控件，否则是黑屏无响应 - 本地双击打开 HTML 时，Chrome 会因安全策略拒绝加载
file://视频，得用本地服务器（如python3 -m http.server）
autoplay 不生效？和 Chrome 的策略有关
Chrome、Edge、Safari 默认禁止无用户交互的自动播放（尤其带声音的）。即使写了 autoplay，也大概率静音且暂停。
- 必须同时加
muted才可能自动播放：<video autoplay muted></video> - 如果要带声音自动播，得等用户第一次点击页面后，再用 JS 调用
play()（且不能在异步回调里直接调） - Safari 还额外要求
playsinline（iOS 上避免全屏）
怎么控制播放行为：暂停、跳转、监听状态
靠原生 JS 操作 <video></video> 元素比套第三方库更轻量，也更可控。
- 获取元素：
const v = document.querySelector('video') - 跳到 10 秒：
v.currentTime = 10（注意：可能触发seeking事件，但还没就绪时设会无效） - 监听播放结束：
v.addEventListener('ended', () => { /* 处理逻辑 */ }) - 判断是否就绪：
v.readyState >= 2表示已有足够数据可播放（0=HAVE_NOTHING,2=HAVE_FUTURE_DATA）
移动端视频不显示画面？检查 playsinline 和宽高设置
iOS Safari 默认强制全屏播放，<video></video> 在页面内只会留个 poster 或空白；Android 部分浏览器也会因宽高为 0 而不渲染。
立即学习“前端免费学习笔记（深入）”；
- 必须加
playsinline和webkit-playsinline（旧版 iOS） - 显式设
width和height（哪怕用 CSS），否则某些安卓 WebView 渲染异常 - poster 图片建议用同尺寸 JPG/PNG，避免加载延迟导致首帧黑屏
- 不要依赖
load事件——它不保证视频元数据已解析，改用loadedmetadata
实际项目里最常卡住的，是视频文件本身编码不对，或者开发时用 file:// 直接双击 HTML 测试——这两点没法靠 JS 补救，得从源头确认。
