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

【问题标题】：React - how to capture full screen video request in html5?React - 如何在 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" width="100%"
          src={mediaModel.url}
          onContextMenu={disableEvent}
          controlsList="nodownload"
          controls
          disablePictureInPicture
          />
      </div>
)};

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

【问题讨论】：

标签： javascript reactjs video

【解决方案1】：

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

【讨论】：