React - 如何在 html5 中捕获全屏视频请求？

Posted 2023-02-25

【中文标题】React - 如何在 html5 中捕获全屏视频请求？

【英文标题】：React - how to capture full screen video request in html5?

【发布时间】：2020-02-24 15:21:09

【问题描述】：

我的 React 组件中有一个 html5 视频元素。我想实现一个自定义功能来点击全屏按钮。因此，当单击全屏图标而不是全屏时，我会更改包装视频元素上的 css 类mediaWrapper。

const Media = (classes, mediaModel, zoomInClicked, zoomOutClicked, showEnlargedImage) => 
      return (<div className=classes.mediaWrapper>
        <video
          data-testid="video-player" 
          src=mediaModel.url
          onContextMenu=disableEvent
          controlsList="nodownload"
          controls
          disablePictureInPicture
          />
      </div>
);

我看到here，没有用于捕获此类内容的本地事件。我正在考虑实施onfullscreenchange，但是当视频已经全屏时，我可以理解这将触发。如何在 React 中覆盖视频元素的全屏实现？

【参考方案1】：

你不能覆盖它。您可以创建显示全屏按钮的自定义播放器并实现自定义逻辑，但您无法检测到原生视频元素中的全屏按钮何时被点击。