Vue.js获取视频时长返回NaN问题求助

你遇到的问题核心在于：mounted钩子仅保证组件DOM挂载完成，但视频文件的元数据（包括时长）此时还未加载完毕，所以直接访问duration会返回NaN。

以下是几种可靠的解决方法：

方法一：监听loadedmetadata事件 #

视频的loadedmetadata事件会在元数据（时长、尺寸等）加载完成时触发，这时候就能准确获取到时长。

修改步骤： #

1. 在<video>标签上添加事件监听：

<video 
  ref = "videoPlayer"
  @mouseover="hover = true"
  @mouseout="hover = false"
  @click="toggle_vid"
  @loadedmetadata="handleMetadataLoaded" <!-- 新增事件监听 -->
  id='video_player'>
  <source src='@/assets/filmik.mp4' type='video/mp4'>
</video>

2. 在methods中添加处理函数：

methods: {
  // 保留原有方法，新增以下函数
  handleMetadataLoaded() {
    this.videoDuration = this.$refs.videoPlayer.duration;
  }
}

3. 移除mounted中无效的赋值代码，或做容错处理：

mounted(){
  // 可选：如果视频已缓存，尝试直接获取时长
  if(this.$refs.videoPlayer.duration) {
    this.videoDuration = this.$refs.videoPlayer.duration;
  }
}

方法二：监听canplay事件（备选） #

如果loadedmetadata在某些场景下不触发，可改用canplay事件——它会在视频加载到可播放状态时触发，此时元数据也已就绪：

<video 
  ref = "videoPlayer"
  @mouseover="hover = true"
  @mouseout="hover = false"
  @click="toggle_vid"
  @canplay="handleMetadataLoaded" <!-- 替换为canplay事件 -->
  id='video_player'>
  <source src='@/assets/filmik.mp4' type='video/mp4'>
</video>

额外优化提示 #

可以在处理函数中对时长做格式化，转成用户更易读的分秒格式：

handleMetadataLoaded() {
  const duration = this.$refs.videoPlayer.duration;
  this.videoDuration = `${Math.floor(duration/60)}:${Math.floor(duration%60).toString().padStart(2, '0')}`;
}

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