如何从视频src链接中提取视频时长？

首先明确：无法直接从视频URL字符串中提取时长，因为时长属于视频文件的内部元数据，并不包含在URL里。要获取时长，必须通过浏览器的Video API加载视频的元数据信息，具体实现如下：

实现步骤与代码示例 #

我们可以创建一个隐藏的video元素（无需渲染到页面），仅加载视频的元数据来获取时长：

// 假设视频链接已存储在link变量中
const getVideoDuration = async (link) => {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video');
    video.preload = 'metadata'; // 仅加载元数据，不下载完整视频

    // 元数据加载完成时触发
    video.onloadedmetadata = () => {
      const duration = video.duration; // 获取时长（单位：秒）
      const formattedDuration = formatDuration(duration);
      resolve(formattedDuration);
      video.remove(); // 释放资源
    };

    // 加载失败时处理
    video.onerror = (error) => {
      reject(error);
      video.remove();
    };

    video.src = link;
  });
};

// 辅助函数：将秒数格式化为 HH:MM:SS 或 MM:SS
const formatDuration = (seconds) => {
  if (isNaN(seconds)) return '00:00';

  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  return hours > 0 
    ? `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
    : `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

// 使用示例：获取时长并展示到页面
getVideoDuration(link)
  .then(duration => {
    // 将时长插入到页面指定元素，比如id为duration-container的元素
    document.getElementById('duration-container').textContent = `视频时长：${duration}`;
  })
  .catch(err => {
    console.error('获取视频时长失败：', err);
  });

注意事项 #

• 跨域问题：如果视频存储服务器未配置CORS（跨域资源共享）规则，浏览器会阻止加载元数据。以你提供的Firebase存储为例，需要在Firebase控制台配置对应的CORS规则，允许你的网站域名访问资源。
• 性能优化：设置preload='metadata'只会加载视频文件的头部元数据，不会下载完整视频，性能开销极低。
• 异常处理：务必处理加载失败的情况，比如链接无效、视频文件损坏、网络错误等。

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