试图获得完整的视频时长但以 Nan 身份返回

Question

我正在尝试获取我的播放器的视频持续时间，但它 returns NaN，我不完全确定如何从这里访问它。

<video id="videoPlayerNew" class="video-js vjs-default-skin vjs-controls-enabled" poster="http://camendesign.com/code/video_for_everybody/poster.jpg" data-setup="{}" controls="">
    <source src="sample.mp4" type="video/mp4">
    <p class="vjs-no-js">Javascript was disabled or not supported</p>
</video>

<script>
    var vid = document.getElementById("videoPlayerNew");
    console.log(vid.duration);
</script>

日志告诉我：NaN

Answer 1

等待 onloadedmetadata 事件，loadedmetadata 事件在 元数据 加载后触发。

var myVideo = document.getElementById("videoPlayerNew");
myVideo.onloadedmetadata = function() {
  console.log('metadata loaded!');
  console.log(this.duration);//this refers to myVideo
};

<video id="videoPlayerNew" class="video-js vjs-default-skin vjs-controls-enabled" poster="http://camendesign.com/code/video_for_everybody/poster.jpg" data-setup="{}" controls="">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <p class="vjs-no-js">Javascript was disabled or not supported</p>
</video>

Answer 2

试试下面的代码，它会在所有内容加载后添加事件：

$(document).ready(function(){
  $("#videoPlayerNew").on( "timeupdate", function(event){
      console.log( this.duration);
    });
});

试图获得完整的视频时长但以 Nan 身份返回

Trying to get full video duration but returning as Nan

javascript

jquery

video.js