html - 访问 VideoJS 播放时间范围

Question

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

在允许用户继续之前，我需要一种方法来判断整个视频是否已播放。我在看Video JS Advanced Examples页面，我找到了我要找的东西。他们有一个“播放”数据字段，可以根据用户播放的时间范围进行更新。问题是我不知道如何在我的应用程序中实现该功能。我可以包含并让 VideoJS 正常运行，但我不知道如何访问视频播放器的“已播放”属性。

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

干杯，

杰登

Answer 1

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

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

您可能只有一个范围，但也有可能有更多范围。因此，您需要遍历范围的长度。要准确了解用户玩了多少，您基本上需要遍历每个范围并计算它的持续时间 (end(i) - start(i) 然后将它与video (player.duration())。如果它们很接近，则表示用户已经观看了整个视频。