使用videojs获取YouTube视频时长时返回NaN如何解决

问题原因 #

1. 你参考的代码是原生HTML5 <video> 标签的逻辑，不适用于videojs的第三方YouTube播放适配器（tech）：YouTube适配器没有实现readyState方法，所以myPlayer.readyState()返回undefined，你的判断逻辑直接触发了else分支，此时视频元数据还未加载完成，调用duration()自然返回NaN。
2. 你重复引入了Youtube.js和Youtube.min.js，两个是同一个库的不同打包版本，会导致未知运行冲突。

解决步骤 #

1. 先删除冗余的JS引入，只保留一个Youtube.min.js即可。
2. 替换原有获取时长的逻辑，使用videojs标准的ready回调结合durationchange事件监听，适配YouTube源的加载节奏：

var myPlayer = videojs('vid1');
// 等待播放器初始化完成
myPlayer.ready(function() {
  // 监听时长更新事件，YouTube源元数据加载完成后会触发该事件
  this.on('durationchange', function() {
    const duration = this.duration();
    if (!isNaN(duration)) {
      alert(duration);
      $('#duration').html("Duration: " + duration);
    }
  });
});

3. 若修改后仍然异常，请检查你本地的videojs-youtube插件版本是否和你使用的videojs 7.17.0版本兼容，版本不匹配也会导致属性获取失败。

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