在浏览器中播放本地视频文件不需要依赖后端服务，通过HTML5的原生特性和浏览器提供的文件操作API就能实现，核心是利用video标签承载视频内容，结合File API读取本地文件并生成可访问的临时URL。
基础实现步骤
1. 搭建基础页面结构
首先需要在页面中添加文件选择控件和video视频播放标签，文件选择控件用于让用户选择本地的视频文件，video标签用于渲染和播放视频内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>本地视频播放</title>
</head>
<body>
<!-- 文件选择控件，限制只能选择视频类型文件 -->
<input type="file" id="videoFile" accept="video/*">
<!-- 视频播放标签，设置 controls 显示控制栏 -->
<video id="videoPlayer" width="800" height="450" controls>
您的浏览器不支持 video 标签，无法播放视频
</video>
</body>
</html>
2. 编写文件读取与视频加载逻辑
通过File API监听文件选择控件的change事件，获取用户选择的本地视频文件，然后使用URL.createObjectURL方法生成临时的本地URL，赋值给video标签的src属性即可完成加载。
// 获取文件选择控件和video标签元素
const videoFileInput = document.getElementById('videoFile');
const videoPlayer = document.getElementById('videoPlayer');
// 监听文件选择变化事件
videoFileInput.addEventListener('change', function() {
// 获取用户选择的第一个文件
const file = this.files[0];
// 如果没有选择文件则直接返回
if (!file) {
return;
}
// 校验文件类型是否为视频
if (!file.type.startsWith('video/')) {
alert('请选择视频类型的文件');
return;
}
// 生成本地文件的临时访问URL
const videoUrl = URL.createObjectURL(file);
// 将URL赋值给video标签的src属性
videoPlayer.src = videoUrl;
// 加载视频
videoPlayer.load();
// 可选：自动播放视频
// videoPlayer.play();
});
// 视频播放结束后释放临时URL，避免内存泄漏
videoPlayer.addEventListener('ended', function() {
if (videoPlayer.src) {
URL.revokeObjectURL(videoPlayer.src);
}
});
常见问题与解决方案
视频格式不支持
不同浏览器支持的视频编码格式不同，常见的兼容格式为MP4（编码为H.264+AAC），如果用户选择的视频格式浏览器不支持，video标签会无法播放。可以在加载前校验格式，或者提示用户转换格式。
// 支持的常见视频格式列表
const supportVideoTypes = ['video/mp4', 'video/webm', 'video/ogg'];
// 校验文件格式是否支持
function checkVideoType(file) {
return supportVideoTypes.includes(file.type);
}
大文件加载卡顿
如果本地视频文件体积较大，生成临时URL后加载可能会有一定延迟，可以监听video标签的loadeddata事件，在视频首帧数据加载完成后提示用户可以播放。
videoPlayer.addEventListener('loadeddata', function() {
console.log('视频首帧已加载，可以开始播放');
});
临时URL未释放导致内存占用过高
URL.createObjectURL生成的临时URL会一直占用内存，直到页面卸载或者手动调用URL.revokeObjectURL释放，因此需要在视频不需要播放时及时释放对应的URL，避免内存泄漏。
注意事项
- 本地视频的播放完全在浏览器端完成，不会上传到服务器，不会泄露用户的本地文件隐私。
- 如果用户清除了浏览器缓存或者关闭了页面，之前生成的临时URL会失效，需要重新选择文件生成新的URL。
- 部分浏览器出于安全限制，不允许通过file协议直接打开页面使用本地文件读取功能，建议通过本地服务器（如127.0.0.1）访问页面测试。
HTML5_videoFile_API本地视频播放URL_createObjectURL修改时间：2026-07-23 14:00:23