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

问题描述

我正在使用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>

解决方法

以下是您问题的两种可能的解决方案：

使用自定义播放器用户界面

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

跟踪播放时间

本机玩家确实有一个事件可以发布经过的时间，但这不是您想要的。

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

如果没有，则必须使用间隔或timeupdate事件来跟踪播放时间。