html标签如何插入视频_video标签嵌入本地或网络视频【详解】-html教程-PHP中文网

本地视频需http服务、正确路径和mime类型；多可提升兼容性；平台视频必须用嵌入；autoplay须配合muted和playsinline。

html标签如何插入视频_video标签嵌入本地或网络视频【详解】

直接用 <video></video> 标签插入本地视频，90% 的失败不是语法错，而是路径、编码或服务环境没配对；嵌入 YouTube/Bilibili 等平台视频，必须用 <iframe></iframe>，硬塞链接进 src 属性只会白屏或报 CORS 错误。

本地视频白屏？先检查这三件事

浏览器加载本地视频失败，常见现象是控制栏出现但无画面、控制台报 DOMException: The element has no supported sources 或 Network 面板里视频请求状态码为 404 / 0（file:// 协议下）。

路径必须走 HTTP(S) 协议：双击 HTML 文件用 file:// 打开时，Chrome/Firefox 会拒绝加载 <video></video>，必须起本地服务——比如 VS Code 装 Live Server 插件，或运行 npx serve
src 值要用相对 URL：HTML 在 /pages/index.html，视频在 /assets/demo.mp4，就得写 src="../assets/demo.mp4" 或 src="/assets/demo.mp4"（注意开头斜杠表示根目录）
MIME 类型得对：服务器返回的响应头中 Content-Type 必须是 video/mp4，不是 text/plain 或 application/octet-stream；若用 Python 的 http.server，需手动配置 MIME 映射，否则 .mp4 会被当普通文件下载

为什么比单个src更可靠

<source></source> 不是炫技，是绕过浏览器解码兼容性差异的实际方案。比如 Chrome 桌面版不支持 HEVC 编码的 .mp4，但 Safari 支持；而 Firefox 对 WebM(VP9) 更友好。单靠 src="demo.mp4"，一旦该 MP4 实际是 HEVC 封装，就直接失败。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

每个 <source></source> 必须带 type 属性，例如 type="video/mp4" 或 type="video/webm"，浏览器靠它跳过不支持的格式，不下载就判断
顺序决定 fallback 行为：浏览器从上到下尝试，匹配成功即停；把最兼容的 video/mp4（H.264+AAC）放最后，把更轻量但支持度稍低的 video/webm 放前面，兼顾加载速度和覆盖范围
别指望 <source></source> 自动转码：它只是声明“我有这几个候选”，最终播哪个由浏览器 runtime 决定，你无法干预解码过程

YouTube/Bilibili 视频只能用 iframe 嵌入

试图把 https://www.youtube.com/watch?v=xxx 直接塞进 <video src="..."></video>，浏览器会发一个跨域请求去拉 YouTube 页面 HTML，而不是视频流——结果必然是解析失败或 403 错误。平台只允许通过官方 <iframe></iframe> 代码加载，这是策略限制，不是技术缺陷。

必须用分享页的“嵌入”代码：YouTube 是 https://www.youtube.com/embed/VIDEO_ID，Bilibili 是 https://player.bilibili.com/player.html?bvid=xxx，不能自己拼
不要删 allow 属性里的关键权限：比如 clipboard-write 关系到复制分享链接，picture-in-picture 控制画中画，删了可能让部分功能失效
移动端要加 playsinline：iOS Safari 默认全屏播放，加这个属性才能让视频内联播放（尤其用于 banner 视频），对应 <iframe></iframe> 的 allow 值里也要包含 playsinline