HTML5怎么添加本地视频_HTML5插入本地视频文件实现播放的方法【教程】
video标签需用相对或绝对URL路径，禁用file://协议；应部署于本地服务器或转base64；src须为同目录/子目录相对路径，推荐H.264+AAC编码、小写短横命名，并配置正确MIME类型。
base64；src须为同目录/子目录相对路径，推荐H.264+AAC编码、小写短横命名，并配置正确MIME类型。video 标签路径必须是相对或绝对 URL，不能直接用 file:// 协议
浏览器出于安全限制，直接双击打开 HTML 文件（file:// 协议）时， 标签无法加载本地视频文件，会静默失败或报 DOMException: The element has no supported sources。这不是写法错误，而是协议限制。
解决方法只有两个：
- 把 HTML 和视频文件一起放到本地服务器下运行（推荐用
python3 -m http.server 8000或 VS Code Live Server 插件） - 将视频转为 base64 内联（仅适合极小文件，如几秒的提示动画）
正确写法：src 指向同目录或子目录下的视频文件
假设项目结构如下：
my-page/
├── index.html
└── videos/
└── demo.mp4
在 index.html 中这样写：
注意点：
-
src是相对路径，不是./videos/demo.mp4也不是file:///.../demo.mp4 -
type属性虽可省略，但显式声明type="video/mp4"能避免某些浏览器反复探测格式 - 不要用中文路径或空格，否则容易 404；建议全小写 + 短横线命名，如
intro-video.mp4
常见不支持格式问题：不是所有 .mp4 都能播
MP4 容器本身没问题，但编码格式可能不被浏览器支持。Chrome/Firefox/Safari 对 H.264 + AAC 组合兼容最好，而 H.265（HEVC）、AV1、VP9 编码的 MP4 在部分浏览器中会黑屏无报错。
验证和转换建议：
- 用
ffprobe demo.mp4查看编码：Stream #0:0(und): Video: h264 (Main)是安全的；hevc或av1则需转码 - 用 FFmpeg 转成标准格式：
ffmpeg -i input.mp4 -c:v libx264 -crf 23 -c:a aac output.mp4 - 移动端 Safari 对 MP4 的
moov原子位置敏感，需确保它在文件开头（加-movflags +faststart）
自动播放与静音：iOS 和 Chrome 强制要求 muted
如果加了 autoplay，现代浏览器基本都会拦截，除非同时满足：
-
muted属性存在（） - 用户已与页面有交互（如点击过按钮），之后再调用
play()才可能成功
单独写 autoplay 几乎无效，尤其在 iOS 上。更稳妥的做法是：
实际部署时，最常被忽略的是服务器 MIME 类型配置——如果用 Nginx/Apache，要确保
.mp4 返回 video/mp4，否则视频加载会卡在“pending”。本地起的 Python HTTP 服务默认支持，但自己搭的静态服务容易漏掉这点。
