调用setAttendancePromptTimeLimit获取视频时长返回NaN问题咨询

算力阿峰

2026-9-30

问题原因

你遇到的NaN是视频元数据加载时机不同步导致的，具体逻辑差异如下：

showVideoDuration()里的打印逻辑是绑定在loadedmetadata事件回调中执行的，这个事件会在浏览器加载完视频的时长、分辨率等核心元数据后才触发，此时HTMLMediaElement.duration属性已经被赋值为有效数值，所以能正常输出16.1的结果。
setAttendancePromptTimeLimit()是在init()方法里同步执行的，此时视频元数据还未加载完成，根据Web API规范，元数据加载完成前duration属性的默认值就是NaN，所以打印结果为非数字。

修复方案

你可以任选以下两种方案修复：

把setAttendancePromptTimeLimit()的执行逻辑也绑定到loadedmetadata事件，等元数据加载完成后再调用：

// 修改showVideoDuration方法，元数据加载完成后再执行考勤逻辑
showVideoDuration = function(cb){
  const handleMetaLoaded = () => {
    console.log(this.getPlayerDuration())
    // 新增调用，保证此时duration有值
    this.setAttendancePromptTimeLimit()
  }
  arguments.length ? cb : this.addListener(this.vidPlayer, 'loadedmetadata', handleMetaLoaded)
}

init = () => {
  this.showVideoDuration()  
}

在setAttendancePromptTimeLimit()里先做有效性判断，避免拿到无效值：

setAttendancePromptTimeLimit = cb => {
  const duration = this.getPlayerDuration()
  if (!isNaN(duration)) {
    // 正常执行业务逻辑
    console.log(duration)
  } else {
    // 未加载完成则绑定事件监听，延迟执行
    this.addListener(this.vidPlayer, 'loadedmetadata', () => {
      console.log(this.getPlayerDuration())
    })
  }
}