用 <video> 标签可原生播放视频，最简写法为<video src="路径" controls width="640" height="360">不支持提示</video>；多格式需用<source>子标签并指定type；自动播放须加autoplay muted，iOS需额外playsinline；路径须相对、MIME类型须正确、禁用file://协议。

直接用 <video> 标签就行，不用 JS、不依赖第三方库，浏览器原生支持。

用 <video> 标签最简写法

只要视频文件路径正确，<video> 标签开箱即用。常见错误是路径写错或格式不被支持。

• src 必须指向可访问的视频文件（如 ./assets/demo.mp4），不能是本地绝对路径（C:\xxx\yyy.mp4）
• 推荐优先提供 .mp4（H.264 编码），兼容性最好；.webm 可作为备选，但不是所有环境都必要
• 加上 controls 属性，否则用户看不到播放按钮、进度条等 UI
• 加 width 或 height 控制尺寸，否则可能撑满父容器甚至溢出

<video src="./assets/demo.mp4" controls width="640" height="360">
  您的浏览器不支持 video 标签。
</video>

多个格式 fallback 要用 <source>，别重复写 src

想兼顾不同浏览器解码能力（比如 Safari 不支持 VP9），得用 <source> 子标签，而不是给 <video> 多次设 src —— 后者只会加载第一个。

• 每个 <source> 用 src + type（如 type="video/mp4"），浏览器按顺序尝试，遇到能播的就停
• <video> 的 src 属性和 <source> 不能混用：一旦用了 <source>，就删掉 <video> 上的 src
• 文本备用内容（如“暂无视频”）必须放在 <video> 开始与结束标签之间，且不能包裹在 <source> 里

<video controls width="640">
  <source src="./assets/demo.mp4" type="video/mp4">
  <source src="./assets/demo.webm" type="video/webm">
  您的浏览器不支持该视频格式。
</video>

自动播放、静音、内联播放这些行为有严格限制

Chrome、Safari 等现代浏览器默认禁止自动播放带声音的视频，强行加 autoplay 很可能被静音跳过或完全阻断。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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

• 要自动播放，必须同时加 autoplay + muted（如 <video autoplay muted>）
• iOS Safari 要求额外加 playsinline，否则视频会全屏打开（尤其在微信内置浏览器中）
• loop 和 preload="auto" 可以加，但注意 preload 会提前下载视频，影响首屏加载速度
• 如果视频只是装饰性背景，建议用 poster 属性配一张封面图，避免白屏或闪烁

常见报错和排查点

视频不显示？控制台报 Failed to load resource 或 Media resource ... could not be decoded？先盯这几个地方：

• 检查浏览器地址栏 URL 是否以 file:// 开头 —— 本地双击打开 HTML 时，多数浏览器禁用 <video> 加载本地文件，需起一个本地服务（如 npx serve 或 VS Code Live Server 插件）
• 确认视频文件真实存在，且服务器返回的 MIME 类型正确（video/mp4，不是 text/plain）
• 用浏览器开发者工具的 Network 面板看视频请求是否 200，响应头是否有 Content-Type
• 移动端真机调试时，注意某些安卓 WebView 对 autoplay 的策略更激进，即使 muted 也可能被拦截

嵌入本身很简单，难的是让视频在各种环境里稳定加载、播放、适配 —— 尤其是路径、MIME 类型、自动播放策略这三处，最容易卡住人。