JavaScript 参考手册 目录

Video played 属性

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

什么是 played 属性

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

如何使用 played 属性

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

------ ------------ ------------------------

--------
  ----- ----- - -----------------------------------
  ----- ---------------- - -------------
  ------------------------------
---------

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

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

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

--- --------------- - --
--- ---- - - -- - - ------------------------ ---- -
  --------------- -- ----------------------- - --------------------------
-
------------------ ------ ----- - - --------------- - - ----------

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

结语

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


下一篇:概览