如何用JavaScript获取上传视频时长？现有代码结果错误

我想实现选择上传视频文件后自动显示视频时长的功能，但编写的JavaScript代码返回的时长结果不正确。

现有代码 #

JavaScript代码 #

var myVideos = [];

window.URL = window.URL || window.webkitURL;

document.getElementById('form__video-upload').onchange = setFileInfo;

function setFileInfo(){
    var files = this.files;
    myVideos.push(files[0]);
    var video = document.createElement('video');
    video.preload = 'metadata';

    video.onloadedmetadata = function (){
        window.URL.revokeObjectURL(video.src);

        var duration = Math.floor(video.duration).toString();
    
        myVideos[myVideos.length-1].duration = duration;
        updateInfos();
    }

    video.src = URL.createObjectURL(files[0]);
}

function minTommss(minutes){
    var sign = minutes < 0 ? "-":"";
    var min = Math.floor(Math.abs(minutes));
    var sec = Math.floor((Math.abs(minutes) * 60 ) % 60);
    return sign + (min < 10 ? "0" : "") + (sec < 10 ? "0" : "") + sec;
}
function updateInfos(){
    var infos = document.getElementById('infos');

    for(var i = 0; i < myVideos.length; i++){
        infos.value += myVideos[i].duration;
    }
}

HTML代码 #

<input type="file" id="form__video-upload">

问题分析与修复方案 #

主要问题点 #

• minTommss函数未被调用：你编写了格式化时长的函数，但实际没有使用，导致直接输出秒数整数，格式不符合预期。
• infos元素缺失：HTML里没有定义id="infos"的元素，updateInfos函数无法找到目标元素显示时长。
• File对象属性修改限制：直接给原生File对象添加duration属性可能存在兼容性问题，建议用自定义对象包裹File信息和时长。
• 时长计算与格式化错误：minTommss函数逻辑有误，它将传入参数当作分钟处理，但video.duration的单位是秒，且返回格式缺少分钟与秒的分隔符（应为00:00而非0000）。
• 重复上传时的累加问题：updateInfos函数每次直接累加所有时长，未清空原有内容，导致显示混乱。

修复后的代码 #

HTML（补充显示元素）

<input type="file" id="form__video-upload">
<!-- 添加用于显示时长的文本域 -->
<textarea id="infos" rows="4" cols="50"></textarea>

JavaScript

var myVideos = [];

window.URL = window.URL || window.webkitURL;

document.getElementById('form__video-upload').onchange = setFileInfo;

function setFileInfo(){
    var files = this.files;
    if (!files[0]) return;
    
    // 用自定义对象包裹文件信息和时长，避免修改原生File对象
    const videoItem = {
        file: files[0],
        duration: null
    };
    myVideos.push(videoItem);
    
    var video = document.createElement('video');
    video.preload = 'metadata';

    video.onloadedmetadata = function (){
        window.URL.revokeObjectURL(video.src);
        // 将秒数传入格式化函数，转换为mm:ss格式
        videoItem.duration = formatDuration(video.duration);
        updateInfos();
    };

    // 处理视频加载失败的情况
    video.onerror = function() {
        videoItem.duration = "无法获取时长";
        updateInfos();
        window.URL.revokeObjectURL(video.src);
    };

    video.src = URL.createObjectURL(files[0]);
}

// 修复格式化函数，将秒数转换为mm:ss格式
function formatDuration(seconds){
    if (isNaN(seconds)) return "无效时长";
    var sign = seconds < 0 ? "-":"";
    var totalSeconds = Math.abs(Math.floor(seconds));
    var min = Math.floor(totalSeconds / 60);
    var sec = totalSeconds % 60;
    return sign + 
           (min < 10 ? "0" : "") + min + ":" + 
           (sec < 10 ? "0" : "") + sec;
}

function updateInfos(){
    var infos = document.getElementById('infos');
    // 清空原有内容，按清晰格式显示每个视频的文件名和时长
    infos.value = "";
    myVideos.forEach((item, index) => {
        infos.value += `视频${index+1}：${item.file.name} - ${item.duration}\n`;
    });
}

修复说明 #

• 改用自定义对象包裹文件和时长，避免修改原生File对象的潜在兼容性问题。
• 修复formatDuration函数逻辑，正确将秒数转换为mm:ss的标准时长格式。
• 补充视频加载失败的错误处理，避免无响应情况。
• updateInfos函数现在会清空原有内容，按清晰格式展示每个视频的信息。
• HTML中补充了infos元素，确保时长有显示载体。

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