video标签自动播放需同时设置autoplay和muted属性,且移动端需添加playsinline和webkit-playsinline;路径、mime类型、多格式source备选缺一不可。

video 标签不自动播放?检查 autoplay 和 muted 是否同时存在
现代浏览器(Chrome、Edge、Safari)默认禁止有声自动播放,只允许静音状态下自动播放。单独写 autoplay 会失效,必须搭配 muted。
- 正确写法:
<video autoplay muted src="demo.mp4"></video> - 如果想后续再开声音,JS 中调用
play()后再设muted = false,但此时需用户交互触发(比如点击按钮),否则会被浏览器阻止 - Safari 对
autoplay更严格:即使muted,若视频未设置playsinline(iOS 全屏限制),也可能 fallback 到暂停状态
src 属性失效或报 404?优先检查路径和 MIME 类型
视频打不开,90% 是路径错或服务端没配对 MIME 类型,不是标签写错了。
-
src路径区分大小写,Video.mp4和video.mp4在 Linux 服务器上是两个文件 - 本地双击 HTML 打开时,
file://协议下部分浏览器(如 Chrome)会拒绝加载本地视频,换成http-server或 VS Code Live Server 启服务再试 - 服务端必须返回正确的
Content-Type:MP4 对应video/mp4,WebM 对应video/webm;Nginx/Apache 需手动配置,否则浏览器可能直接下载而非播放
兼容老浏览器或不同格式?用 source 标签多备选,别只靠 src
单写 src 只能指定一种格式,而不同浏览器支持程度差异大:Safari 基本只认 MP4(H.264),Firefox/Chrome 更倾向 WebM(VP9)。
- 推荐写法:
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser doesn't support the video tag. </video>
- 浏览器按
source顺序尝试加载,遇到第一个能解码的就停,不用全下载 - 不要在
source里加autoplay或controls—— 这些属性只写在video根标签上
移动端视频无法内联播放?加上 playsinline 和 webkit-playsinline
iOS Safari 默认强制全屏播放视频,除非显式声明可内联。Android Chrome 一般默认支持,但加了更稳妥。
立即学习“前端免费学习笔记(深入)”;
- 必须同时写两个属性:
playsinline(标准) +webkit-playsinline(旧版 iOS 兼容) - 完整示例:
<video playsinline webkit-playsinline src="clip.mp4"></video> - 注意:这个属性只在
video标签上生效,source里写无效 - 如果用了
object-fit: cover或绝对定位缩放,要确认父容器有明确宽高,否则 iOS 可能渲染异常甚至白屏











