访问VideoJS播放的TimeRanges

Question

我正在使用ReactJS构建一个Web应用程序，该应用程序将允许员工查看各种视频培训课程，然后回答有关它们的测验问题。我想使用HTML5视频元素来最大化设备之间的兼容性，但用户始终可以只浏览视频以结束操作并触发应用中的下一个操作。他们有必要在继续之前观看整个视频。

我需要一种方法，在允许用户继续播放之前，先确定整个视频是否已播放。我在查看“ Video JS Advanced Examples”页面时，发现了我想要的东西。他们有一个“播放”数据字段，该数据字段会随着用户播放的时间范围进行更新。问题是我不知道如何在我的应用程序中实现该功能。我可以包括并启动VideoJS并使其正常运行，但是我不知道如何访问视频播放器的“播放”属性。

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

干杯，

杰登

Answer 1

played来自html5媒体规范。它返回一个TimeRanges对象。Video.js通过方法提供了本机视频元素的大部分功能。因此，playedvideo元素（如vidEl.played）上的属性成为Video.js player对象（如player.played()）上的方法调用。

时间范围的API有点奇怪。但本质上，它有三个属性：length，start，和end。他们的工作是这样的：* length：有多少个范围？在中played，播放了视频的多少个不同部分？* start()：告诉您给定范围的开始时间的end()方法* ：告诉您给定范围的结束时间的方法

您可能只有一个范围，但是有可能会有更多范围。因此，您将需要遍历范围的长度。要确切了解用户的播放量，您基本上想遍历每个范围并计算其时长（end(i) - start(i)然后将其与视频时长（player.duration()）进行比较。如果距离很近，则意味着用户已经观看了整个视频。