本文介绍使用 HTML5 FileReader API 实现本地视频文件上传后即时加载到 标签中进行预览的完整方案，包含正确 DOM 结构、事件监听逻辑及关键注意事项。
本文介绍使用 html5 filereader api 实现本地视频文件上传后即时加载到 `
在 Web 开发中，若需让用户上传视频并立即预览（无需服务器上传），应避免直接将 File 对象赋值给
正确的做法是利用 FileReader 将本地文件读取为 Data URL，并将其赋值给
✅ 正确 HTML 结构
<input type="file" accept="video/mp4,video/webm,video/ogg" id="videoinput"><video id="videopreview" controls width="640" height="360" style="display: none;"></video>
- accept 属性建议扩展支持常见视频格式（如 video/webm, video/ogg），提升兼容性；
- 初始设 style="display: none;" 可避免空白视频框干扰布局，待加载成功后再显示。
✅ 推荐 JavaScript 实现（现代写法）
document.getElementById('videoinput').addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
// 验证是否为视频文件
if (!file.type.startsWith('video/')) {
alert('请上传有效的视频文件！');
return;
}
const videoElement = document.getElementById('videopreview');
const reader = new FileReader();
reader.onload = function (e2) {
videoElement.src = e2.target.result; // Data URL
videoElement.style.display = 'block';
// 可选：自动播放（注意浏览器自动播放策略限制）
// videoElement.play().catch(e => console.warn('Autoplay blocked:', e));
};
reader.onerror = () => {
console.error('文件读取失败');
};
reader.readAsDataURL(file);
});
⚠️ 关键注意事项
- 不要使用 onclick 内联事件绑定：原示例中
- FileReader.readAsDataURL() 是核心：它将二进制文件转为 Base64 编码的 Data URL（如 data:video/mp4;base64,...），可被
- 大文件性能提示：Data URL 会将整个视频加载进内存，对超大视频（如 >100MB）可能导致内存压力或卡顿；生产环境建议结合 URL.createObjectURL(file) 实现流式引用（需手动释放：URL.revokeObjectURL(src)）。
- 移动端兼容性：iOS Safari 支持良好，但部分安卓 WebView 版本需确保 accept 值准确；建议始终校验 file.type 而非仅依赖 accept。
通过以上实现，用户选择视频文件后，页面即可即时渲染预览，无需后端参与，安全、高效、体验流畅。
