时间戳

首页 > 解决方案 > ReactJS 视频播放器 (react-player) - 如何检查视频是否（完全）播放？

javascript - 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>

标签： javascriptreactjsreact-player

解决方案

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

使用自定义播放器 UI

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

跟踪播放时间

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

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

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

推荐阅读