ReactJS 视频播放器 (react-player) - 如何检查视频是否（完全）播放？

Question

我正在使用 ReactJS，我正在尝试显示一个视频，其中用户只能在观看整个视频后继续。我目前正在使用一个名为 React-player 的依赖项，它可以选择检查何时结束，但用户可以跳过视频。

有没有办法检查视频是否播放了一段时间？或者是否可以禁用转发？

这是我目前的代码：

    <ReactPlayer
        onEnded={() => setVideoEnded(true)}
        url={
            "https://...server.net/NodeUploadServer/public/" +
            course.video
        }
        width="100%"
        height="100%"
        controls={true}
    />

    <Button disabled={!videoEnded} >
      Go to test
    </Button>

Answer 1

您的问题有两种可能的解决方案：

使用自定义播放器 UI

第一个解决方案是删除渲染时间线组件的默认播放器控件。但是，使用此解决方案，您将需要创建自定义 UI。

跟踪播放时间

react-native 播放器确实有一个事件来发布经过的时间，但这不是您想要的。

如果您使用的是 HTML5 视频播放器，则可以利用 played 属性并验证视频是否已在特定范围内播放。

如果没有，您将不得不使用间隔或使用timeupdate 事件来跟踪播放时间。