我正在使用ReactJS构建一个web应用程序，它允许员工查看各种视频培训课程，然后回答有关他们的问答问题。我想使用HTML5视频元素来最大化跨设备的兼容性，但是用户总是可以通过视频擦除以达到结束并触发应用程序中的下一个操作。在继续之前，他们有必要看整个视频。
在允许用户继续之前，我需要一种方法来判断是否播放了整个视频。我在查看Video JS Advanced Examples页面，找到了我想要的。它们有一个“播放”数据字段，该字段根据用户播放的时间范围进行更新。问题是我不知道如何在我的应用程序中实现这个功能。我可以让VideoJS正常运行，但我不知道如何访问视频播放器的“played”属性。
如果有人能告诉我进去的方向，我会非常感激的。如果这是个愚蠢的问题，我真的很抱歉。我对这一切还很陌生。非常感谢。
干杯，
杰登
最佳答案
played来自html5 media spec。它返回一个TimeRanges object。
js通过方法提供了本机视频元素的大部分功能。因此，video元素（a splayed）上的vidEl.played属性成为video.js的player对象（asplayer.played()）上的方法调用。
时间范围的API有点奇怪。但本质上，它有三个属性：length、start和end。
他们就是这样做的：
*length：有多少个范围？在played的情况下，播放了多少不同的视频片段？
*start()：告诉您给定范围的开始时间的方法
*end()：告诉您给定范围的结束时间的方法
你可能只有一个射程，但也可能有更多射程。所以，您需要在范围的长度上循环。要确切地知道用户的播放量，您基本上需要在每个范围内循环并计算它的持续时间（end(i) - start(i)，然后将其与视频的持续时间（player.duration()）进行比较。如果它们很接近，则表示用户已经观看了整个视频。
关于html5 - 访问VideoJS播放的TimeRanges，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43106809/