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 事件来跟踪播放时间。