video标签必须设置src或source才能播放，否则不加载内容；controls启用原生控件；autoplay需配合muted和playsinline才可能生效；poster仅显示静态封面且依赖服务端正确响应头。

video 标签必须设置 src 或 source 才能播放

空的 <video></video> 不会加载任何内容，浏览器也不会显示占位图或错误提示。常见误操作是只写标签、漏掉视频源。

• src 属性直接指向一个视频地址，适合单格式场景：

  <video src="demo.mp4" controls></video>

• 多格式兼容推荐用 <source></source> 子元素，按顺序尝试，浏览器选第一个能解码的：

  <video controls>
    <source src="demo.mp4" type="video/mp4">
    <source src="demo.webm" type="video/webm">
  </video>

• 注意：如果 src 和 <source></source> 同时存在，<source></source> 会被忽略

controls 属性不是“开关”，而是启用原生控件组

加了 controls 就显示播放/暂停、进度条、音量、全屏按钮；不加就什么都没有——不会自动退化成自定义 UI，也不会保留右键菜单。

• 它不接受值，写成 controls="false" 或 controls="0" 依然生效
• 想完全隐藏控件但保留可交互性（比如用 JS 控制），必须省略该属性，并手动调用 play()、pause() 等方法
• 部分安卓 WebView 或 iOS Safari 在无 controls 时禁止自动播放，即使设置了 autoplay muted

autoplay、muted、playsinline 这三个属性要一起配着用

现代移动浏览器基本禁止有声自动播放，单独设 autoplay 几乎无效；桌面端也可能被用户策略拦截。

CDP浏览器大师

CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

• 必须同时加 muted 才可能触发自动播放：

  <video autoplay muted playsinline src="loop.mp4"></video>

• playsinline 防止 iOS Safari 强制全屏（尤其在 <iframe></iframe> 里嵌入时）
• Chrome 94+ 还要求页面有用户手势（如点击）后才能解除静音并恢复声音，不能靠 JS 直接调 video.muted = false 立即生效

poster 属性只在未加载/未播放时显示，且不支持动图

poster 是静态封面图，不是第一帧截图，也不是 loading 占位符。视频一旦开始加载（哪怕还没解码出画面），poster 就消失。

立即学习“前端免费学习笔记（深入）”；

• 路径必须可访问，404 会导致 poster 区域空白，不会 fallback 到其他图
• 不支持 GIF 或 WebP 动图，仅渲染为静态图像（即使你传了 .gif 路径）
• 如果希望首帧作为封面，需提前用 FFmpeg 抽帧生成 JPG：

  ffmpeg -i input.mp4 -ss 00:00:01.000 -vframes 1 poster.jpg

真正容易被忽略的是：视频是否能播，80% 取决于服务端响应头是否正确。比如缺失 Accept-Ranges: bytes 会导致 Chrome 无法拖拽进度条；MIME 类型错配（如 .mp4 返回 text/plain）会让 <source></source> 直接跳过该条目。这些不在 HTML 标签里体现，但决定你写的代码有没有效。