前端能否使用video标签获取视频的总时长？

是的，前端可以使用 <video> 标签获取视频的总时长，但需要注意时机问题。

---

✅ 核心方法：video.duration

HTML5 的 <video> 元素提供了一个只读属性 duration，单位为秒，表示视频的总时长。

const video = document.querySelector('video');
console.log(video.duration); // 例如：123.45（秒）

---

⚠️ 关键前提：必须等元数据加载完成

视频的 duration 不是立即可用的。如果在视频刚创建或刚开始加载时就读取，会得到：

• NaN（Not a Number）
• 或 Infinity

这是因为浏览器尚未解析视频文件的元数据（metadata），其中包含时长信息。

---

✅ 正确做法：监听 loadedmetadata 事件

<video id="myVideo" src="example.mp4"></video>

<script>
  const video = document.getElementById('myVideo');

  video.addEventListener('loadedmetadata', () => {
    console.log('视频总时长（秒）:', video.duration);
    
    // 可选：格式化为 mm:ss
    const minutes = Math.floor(video.duration / 60);
    const seconds = Math.floor(video.duration % 60);
    console.log(`格式化时长: ${minutes}:${seconds.toString().padStart(2, '0')}`);
  });
</script>

✅ loadedmetadata 事件触发时，表示视频的元数据（包括时长、尺寸、帧率等）已加载完毕，此时 duration 才可靠。

---

🔁 其他可选事件（效果类似）

• loadeddata：视频第一帧已加载，通常也意味着元数据就绪。
• canplay：可以开始播放（但可能不如 loadedmetadata 及时）。

但最推荐的是 loadedmetadata，因为它专为元数据加载设计。

---

❗ 注意事项

1. 跨域问题：
   如果视频来自其他域名，且服务器未设置 CORS 头（如 Access-Control-Allow-Origin），浏览器可能无法读取 duration（出于安全限制）。

2. 直播流（HLS/DASH）：
   对于直播或无限时长的流媒体，duration 可能为 Infinity。

3. 部分加载（Range 请求）：
   某些服务器不支持字节范围请求（Byte-Range Requests），可能导致元数据无法正确加载。

---

✅ 总结

问题	答案
能否用 <video> 获取视频总时长？	能
用什么属性？	video.duration（单位：秒）
什么时候能获取？	监听 loadedmetadata 事件后
是否兼容所有浏览器？	✅ 所有现代浏览器均支持

💡 只要确保在 loadedmetadata 之后读取 duration，就能稳定获取视频总时长。