0

每当用户播放/暂停使用Video-React实现的视频时，我都会尝试执行一些逻辑：

<Player
  ref={(player) => {
    this.player = player;
  }}
  src={videoURL}
>
  <BigPlayButton position="center" />
  <ControlBar autoHide={false} className="my-class"></ControlBar>
</Player>;

因此用户可以通过三种方式播放/暂停视频：

  1. 使用BigPlayButton他可以播放视频：
    在此处输入图像描述
  2. 使用控制栏中的播放/暂停按钮：
    在此处输入图像描述
  3. 单击视频本身将播放/暂停它。

因此，我需要检测这三个事件中的任何一个事件何时发生。

对于第一个事件，“使用BigPlayButton他可以播放视频”，有人建议我自定义按钮本身。

对于第二个事件，“使用控制栏中的播放/暂停按钮”，我没有找到任何显示当用户单击控制栏按钮之一时如何检测 onClick 事件的内容。

对于第三个事件，“单击视频本身将播放/暂停它。” ，我什么也没找到。

我认为使用文档中提到的状态可以轻松解决所有三个问题：

State 我们使用 redux 来管理玩家状态。使用 getState 方法可以获取状态对象。这是所有州的列表。

这部分解决了暂停的问题：

paused：返回播放器是否已经暂停

但是，我没有找到在播放视频时改变的状态属性。最接近这个的是hasStarted：

hasStarted：返回视频是否已经开始

hasStarted 的问题在于它在第一次播放视频时被设置为 true。
因此，后续播放将不会被检测到。
我发现自己处于一种模棱两可的状态，其中this.player.paused&this.player.hasStarted都是true。
欢迎任何建议。

4

0 回答 0