vue3 ts中 video获取视频总时长为Infinity

在Vue3 TypeScript项目中，如果你发现`<video>`元素的`duration`属性返回`Infinity`，这通常表示有几个可能的原因：

1. **视频加载失败或尚未完成加载**：如果视频文件还没有完全下载到浏览器缓存中，或者是网络请求有问题，`duration`可能会暂时显示为`Infinity`。

2. **视频数据损坏**：视频文件本身可能存在损坏或者编码错误，导致无法正确解析时长信息。

3. **JavaScript访问限制**：有时由于安全策略（比如同源策略），前端脚本可能无法立即读取到视频的真实时长，需要等到视频加载完成后才能获取准确值。

4. **未设置`preload`属性**：如果没有设置`preload`属性，或者设置了`preload="none"`，则浏览器可能不会预加载视频内容，直到播放才开始加载，这时`duration`也是`Infinity`。

解决方法：
- 确保视频已经成功加载：你可以监听`loadedmetadata`事件，在这个事件触发时，视频的元数据应该已经被解析，此时可以安全地读取`duration`。
- 检查网络连接和视频资源：确保文件完整且可以正常下载。
- 如果出于安全原因，考虑在服务器端提供视频时长信息或者设置正确的跨域策略。
- 对于懒加载的视频，可以在需要时动态加载并计算时长。

watch(() => {
  const video = this.$refs.video as HTMLVideoElement;
  if (video && video.readyState >= HTMLMediaElement.HAVE_METADATA) {
    this.videoDuration = video.duration;
  }
}, { immediate: true });