访问 VideoJS 播放时间范围

Accessing VideoJS Played TimeRanges

我正在使用 ReactJS 构建一个网络应用程序,允许员工观看各种视频培训课程,然后回答有关他们的测验问题。我想使用 HTML5 视频元素来最大限度地提高设备间的兼容性,但用户始终可以在视频中滑动以到达结尾并触发应用中的下一个操作。他们有必要在继续之前观看整个视频。

在允许用户继续之前,我需要一种方法来判断整个视频是否已播放。我正在查看 Video JS Advanced Examples 页面,我找到了我正在寻找的内容。他们有一个 'played' 数据字段,可以根据用户玩过的时间范围进行更新。问题是我不知道如何在我的应用程序中实现该功能。我可以包括并启动 VideoJS 和 运行 就好了,但我不知道如何访问视频播放器的 'played' 属性。

如果有人能给我一个方向,我将不胜感激。如果这是一个愚蠢的问题,我真的很抱歉。我对这一切还很陌生。非常感谢。

干杯,

杰登

played 来自 html5 media spec. It returns a TimeRanges object。 Video.js 通过方法提供原生视频元素的大部分功能。因此,视频元素(如 vidEl.played)上的 played 属性 成为对 Video.js 的 player 对象(如 player.played()).

时间范围的 API 有点奇怪。但本质上,它具有三个属性:lengthstartend。 这就是他们所做的: * length: 有多少个范围?在 played 的情况下,视频播放了多少个不同的部分? * start(): 一种告诉您给定范围的开始时间的方法 * end(): 一种告诉你给定范围的结束时间的方法

您可能只有一个范围,但也有可能拥有更多范围。因此,您需要遍历范围的长度。要准确了解用户播放了多少,您基本上需要遍历每个范围并计算它的持续时间 (end(i) - start(i),然后将其与视频的持续时间 (player.duration()) 进行比较。如果他们很接近,这意味着用户已经观看了整个视频。