video自动播放需同时设autoplay和muted；mp4需h.264+aac编码；ios全屏需playsinline与webkit-playsinline共存；src路径以html位置为准，非编辑器目录。
video 标签不自动播放？检查 autoplay 和 muted 属性
现代浏览器（chrome、edge、safari）默认禁止有声音的自动播放，autoplay 单独写没用，必须搭配 muted 才能生效。不加 muted 时，即使视频文件本身静音，浏览器也按“可能发声”处理。
-
<video autoplay muted></video>✅ 可触发自动播放（常见于首页轮播、信息流预加载） -
<video autoplay></video>❌ 大概率静默失败，控制台可能报DOMException: play() failed because the user didn't interact with the document first - 如果必须带声音自动播放，只能等用户首次交互（如点击、触摸）后再调用
video.play()，不能绕过
MP4 播不了？优先确认编码格式而非后缀名
文件名是 .mp4 不代表浏览器能播——关键看内部编码。H.264 + AAC 是最稳妥组合；H.265（HEVC）、AV1、VP9 在部分浏览器（尤其是旧版 Safari 或 firefox）会直接黑屏或报 MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED。
- 用
ffprobe your-video.mp4查编码：Stream #0:0(und): Video: h264 (High)才安全 - Safari 对 HEVC 支持有限（仅 macos/iOS 新版本），android Chrome 基本不认 AV1
- 转码建议：
ffmpeg -i in.mp4 -c:v libx264 -crf 23 -c:a aac out.mp4
移动端全屏按钮失效？检查 playsinline 和 webkit-playsinline
iOS Safari 默认强制全屏播放，playsinline 是解法，但必须同时写标准属性和 WebKit 前缀，缺一不可。否则视频点开就跳原生播放器，ui 完全失控。
- 正确写法：
<video playsinline webkit-playsinline></video> - 仅
playsinline→ iOS 上无效；仅webkit-playsinline→ Chrome Android 可能忽略 - 配合 CSS：
video { Object-fit: contain; width: 100%; height: auto; }防止拉伸变形
src 是相对路径却 404？别信开发工具里的“当前目录”
网页中 <video src="videos/demo.mp4"></video> 的解析路径，取决于 HTML 文件所在位置，不是你编辑器打开的文件夹，也不是服务器根目录。
立即学习“前端免费学习笔记（深入）”；
- 假设 HTML 在
/pages/index.html，那src="videos/demo.mp4"实际请求的是/pages/videos/demo.mp4 - 想从站点根目录加载，必须写
src="/videos/demo.mp4"（开头带/） - 本地双击打开 HTML 文件（
file://协议）时，相对路径行为更混乱，务必用本地服务器测试（如npx serve）
实际嵌入时，最易被忽略的是：iOS 上 playsinline 和 muted 必须共存才能既内联又自动播；而开发者常只加一个，结果在真机上反复调试半天才发现少了一个属性。