HTML | DOM 视频时长属性

HTML5引入了新的视频元素<video>用于嵌入视频到网页中，同时还提供了视频的相关属性。

其中，视频时长属性提供了视频文件的总时长，方便程序员进行相关操作。

video.duration

video.duration属性返回视频的总时长，单位为秒。可以使用JavaScript来获取并操作该属性：

const myVideo = document.getElementById("myVideo");
console.log(myVideo.duration); // 输出视频总时长

示例

<video id="myVideo" width="320" height="240" controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<script>
  const myVideo = document.getElementById("myVideo");
  console.log(myVideo.duration); // 输出视频总时长
</script>

注意事项

• video.duration属性值为double类型，取值范围为0到正无穷大。
• 在视频加载完成之前，video.duration为NaN。
• 在使用该属性前，必须先确保视频已经加载成功。
• 由于视频需要加载时间，因此最好使用canplaythrough事件来确保在视频可以完全播放前，duration属性可用。

结论

HTML | DOM 视频时长属性提供了方便的操作视频时长的方法，可以通过JavaScript来获取视频总时长，并进行相关操作。需要注意的是，视频加载、canplaythrough事件等因素都会对该属性的可用性产生影响，因此在使用该属性前需要进行相关的判断和处理。