我正在使用ReactJS构建一个Web应用程序，允许员工查看各种视频培训课程，然后回答有关他们的测验问题。我想使用HTML5视频元素来最大化设备之间的兼容性，但用户可以随时浏览视频以结束并触发应用程序中的下一个操作。在继续之前，他们必须观看整个视频。
我需要一种方法来判断整个视频是否已经播放，然后才允许用户继续前进。我正在查看Video JS Advanced Examples页面，我发现了我正在寻找的内容。他们有一个“播放”数据字段，可以根据用户播放的时间范围进行更新。问题是我不知道如何在我的应用程序中实现该功能。我可以包含并使VideoJS正常运行，但我不知道如何访问视频播放器的“播放”属性。
如果有人能指导我进去，我会非常感激。如果这是一个愚蠢的问题，我真的很抱歉。我对这一切还是比较新的。非常感谢你。
干杯，
Jaydon
答案 0 :(得分：5)
played来自html5 media spec。它返回TimeRanges object。
Video.js通过方法提供原生视频元素的大部分功能。因此，视频元素上的played属性（作为vidEl.played）成为Video.js的player对象上的方法调用（作为player.played()）。< / p>
时间范围的API有点奇怪。但实质上，它有三个属性：length，start和end。
这就是他们所做的：
* length：有多少个范围？在played的情况下，视频播放了多少部分？
* start()：一种告诉您给定范围的开始时间的方法
* end()：一种告诉您给定范围的结束时间的方法
您可能只有一个范围，但您可能会拥有更多范围。所以，你想要遍历范围的长度。要确切地知道用户玩了多少，您基本上想要遍历每个范围并计算它的持续时间（end(i) - start(i)，然后将其与视频的持续时间进行比较（{{1如果它们接近，则表示用户已观看整个视频。