video标签自动播放需autoplay与muted共存，移动端限制更严；须用HTTP服务器而非file://协议；推荐H.264编码MP4格式，配合多格式回退；加载失败优先查路径与MIME类型；play()需监听loadedmetadata后调用并catch错误。

video 标签不自动播放的常见原因

浏览器默认阻止自动播放（尤其带声音的），autoplay 单独写没用，必须配合 muted 才可能生效。移动端 iOS 和部分安卓 WebView 更严格，即使静音也可能被拦截。

• autoplay 必须和 muted 同时存在，否则多数现代浏览器直接忽略
• 如果视频源是本地文件（file:// 协议），Chrome 等浏览器会因安全策略拒绝加载，需用本地服务器（如 python3 -m http.server）打开
• 确保视频格式是浏览器支持的：优先用 .mp4（H.264 编码），避免直接丢 .avi 或 .mkv

怎么让 video 标签兼容性更好

不同浏览器对编码格式、容器封装的支持有差异，靠单个 src 属性容易在某些设备上黑屏或报错 VIDEO_ERROR_DECODE。

• 用 <source></source> 多次声明不同格式，浏览器按顺序试播第一个能解码的：

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

• type 属性不能省——它不是可选提示，而是浏览器是否跳过该 <source></source> 的判断依据
• 如果只提供 .mp4，建议用 H.264 + AAC 编码组合，FFmpeg 命令参考：ffmpeg -i in.mov -c:v libx264 -c:a aac -movflags +faststart out.mp4

video 加载失败时怎么快速定位问题

页面显示空白或出现“❌”图标，但控制台没报错，大概率是资源路径或 MIME 类型问题。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 右键检查元素 → 点开 <video></video> → 查看 src 地址是否 404（注意大小写、斜杠方向、相对路径基准）
• 在 Network 面板过滤 media，看请求状态码和响应头 Content-Type：服务端返回 text/plain 而不是 video/mp4 会导致 Chrome 拒绝解析
• 本地开发时用 http-server 或 VS Code Live Server 插件，别双击 HTML 文件打开——file:// 下 <video></video> 的 load 事件常不触发

用 JavaScript 控制 video 时的坑点

想用 play() 方法手动播放？别在页面加载完立刻调，得等 canplaythrough 或至少 loadedmetadata 事件之后。

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

• video.play() 返回 Promise，失败时会 reject，必须 catch，否则控制台报错且无提示：

  video.addEventListener('loadedmetadata', () => {
    video.play().catch(e => console.warn('play failed:', e));
  });

• currentTime 设太大会导致 seeking 状态卡住，尤其在未缓冲区域；设前先检查 video.duration !== Infinity，否则可能是元信息没加载完
• 移动端 iOS Safari 对 playsinline 属性敏感：没加的话，点击播放会全屏，加了才能内联播放（需同时配 webkit-playsinline）

实际部署时最容易被忽略的是服务端配置——视频文件要能被正确识别为 video/* MIME 类型，静态资源服务器不配好，前端再怎么写 <video></video> 都白搭。