如何实现用户上传视频并点击按钮加载至video标签预览？

你说得没错，直接把File对象赋值给video元素的src属性确实无法生效——video的src需要接收URL地址，而非File实例。正确的做法是使用URL.createObjectURL()方法将本地文件对象转换为浏览器可识别的临时Blob URL，以此实现视频预览。

修正后的HTML代码 #

<html>
    <body>
        <input type="file" accept="video/mp4" id="videoinput">
        <!-- 添加controls属性方便播放控制，同时闭合video标签 -->
        <video id="videopreview" controls></video>
        <button onclick="loadvideo()">加载视频</button>
        <!-- 修正script标签的语法错误 -->
        <script src="myscript.js"></script>
    </body>
</html>

修正后的JavaScript代码 #

function loadvideo() {
    // 获取上传的文件对象
    const videoFile = document.getElementById('videoinput').files[0];
    const videoElement = document.getElementById('videopreview');
    
    if (!videoFile) {
        alert('请先选择视频文件');
        return;
    }

    // 生成临时Blob URL并赋值给video的src
    const videoUrl = URL.createObjectURL(videoFile);
    videoElement.src = videoUrl;

    // 可选：视频加载完成后释放临时URL资源，避免内存泄漏
    videoElement.onloadeddata = function() {
        URL.revokeObjectURL(videoUrl);
    }
}

关键说明 #

• URL.createObjectURL()：将File/Blob对象转换为临时本地URL，浏览器会自动管理该URL的生命周期，手动调用URL.revokeObjectURL()可更早释放资源。
• 原代码问题：HTML中script标签语法错误（type属性写法错误且未闭合）、video标签未闭合、缺少播放控制按钮（controls属性）；JS未做文件存在性判断。

内容的提问来源于stack exchange，提问作者user22871601