可直接用blob对象和url.createobjecturl()为本地视频生成临时url实现即时预览；需通过input[type="file"]获取文件，检查类型并绑定video元素，使用后及时revokeobjecturl释放内存。
可以直接通过 Blob 对象和 URL.createObjectURL() 为用户选择的视频文件生成本地可播放的临时 URL，无需上传服务器，实现即时预览。
监听文件选择并获取视频文件
使用 <input type="file"> 获取用户选取的视频文件，注意限制 accept 属性提升体验：
- 设置
accept="video/*"可过滤出常见视频格式（如 MP4、WebM、MOV） - 检查
files[0]是否存在，避免空选择导致报错 - 推荐添加
multiple属性支持多选（如需）
创建 Blob URL 并绑定到 video 元素
URL.createObjectURL(file) 会返回一个以 blob: 开头的临时地址，可直接赋值给 <video></video> 的 src 属性：
- 该 URL 仅在当前文档生命周期内有效，页面刷新或关闭后自动失效
- 务必在不再需要时调用
URL.revokeObjectURL(url)释放内存（尤其在反复预览不同视频时） - 建议在
video加载失败时监听error事件，提示用户格式不支持
基础示例代码（含清理逻辑）
以下是一个最小可用示例，包含错误处理与资源释放：
<input type="file" id="videoInput" accept="video/*"><br><video id="previewVideo" controls width="600"></video><br><br><script><br> const input = document.getElementById('videoInput');<br> const video = document.getElementById('previewVideo');<br> let currentUrl = null;<br><br> input.addEventListener('change', () => {<br> // 清理上一次的 URL<br> if (currentUrl) {<br> URL.revokeObjectURL(currentUrl);<br> }<br><br> const file = input.files[0];<br> if (!file) return;<br><br> // 检查是否为视频类型<br> if (!file.type.startsWith('video/')) {<br> alert('请选择有效的视频文件');<br> return;<br> }<br><br> currentUrl = URL.createObjectURL(file);<br> video.src = currentUrl;<br> video.load(); // 触发元数据加载，确保 controls 正常显示时长等<br> });<br><br> // 页面卸载前清理（可选增强）<br> window.addEventListener('beforeunload', () => {<br> if (currentUrl) URL.revokeObjectURL(currentUrl);<br> });<br></script>
注意事项与兼容性提醒
该方案在所有现代浏览器（Chrome、Firefox、Edge、Safari 11+）中均原生支持，但需注意：
- Safari 对某些编码格式（如 HEVC）可能不支持播放，即使文件能被选中
- 大视频文件（如 >500MB）在部分设备上可能触发内存警告或加载缓慢，可结合
file.size提前提示 - 不要将
createObjectURL返回的 URL 存入 localStorage 或用于网络请求——它仅限本地使用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
