Video played 属性

在 web 前端开发中，处理视频播放是一个常见的需求。HTML5 提供了 <video> 元素来实现视频播放，而其中的 played 属性则可以用来获取视频已播放的时间范围。在本文中，我们将深入探讨 played 属性的用法及相关知识。

什么是 played 属性

played 属性是 <video> 元素的一个只读属性，它返回一个 TimeRanges 对象，包含了视频已播放的时间范围。TimeRanges 对象是一个类数组对象，包含了零个或多个时间范围。每个时间范围由 start 和 end 属性组成，分别表示时间范围的开始和结束时间。

如何使用 played 属性

要使用 played 属性，首先需要获取到 <video> 元素的引用。可以通过 document.getElementById 或 document.querySelector 方法来获取到 <video> 元素，然后通过 played 属性来获取已播放的时间范围。

<video id="myVideo" src="video.mp4"></video>

<script>
  const video = document.getElementById('myVideo');
  const playedTimeRanges = video.played;
  console.log(playedTimeRanges);
</script>

在上面的示例中，我们首先创建了一个 <video> 元素，并为其设置了 id 和 src 属性。然后通过 document.getElementById 方法获取到了该 <video> 元素的引用，接着通过 played 属性获取了视频已播放的时间范围，并将其输出到控制台。

示例：获取视频已播放的总时长

有时候我们需要获取视频已播放的总时长，可以通过遍历 TimeRanges 对象中的时间范围，计算得到视频已播放的总时长。

let totalPlayedTime = 0;
for (let i = 0; i < playedTimeRanges.length; i++) {
  totalPlayedTime += playedTimeRanges.end(i) - playedTimeRanges.start(i);
}
console.log('Total played time: ' + totalPlayedTime + ' seconds');

在上面的示例中，我们遍历了 TimeRanges 对象中的时间范围，计算每个时间范围的时长并累加，最终得到视频已播放的总时长，并将其输出到控制台。

结语

通过本文的介绍，我们了解了 played 属性的基本用法以及如何获取视频已播放的时间范围。在实际开发中，可以利用这一属性来实现一些有趣的功能，如显示视频播放进度、统计视频播放时长等。希望本文对您有所帮助，谢谢阅读！