React全屏

Posted 2023-05-16

参考技术A

一开始使用的是 react-full-screen 这个库，但是这样的话使用antd的弹窗或者select这种组件就会有问题，这些组件默认是绑定到body上的，全屏之后，打开弹窗会看不到弹窗，也不能通过修改样式修复这个问题，必须通过设置getContainer，将这些组件绑定到需要全屏的元素上，组件才能正常使用，太过繁琐。

screenfull可以设置全屏的dom元素，因此全屏时可以将body（Dom）设置为全屏，然后通过修改待全屏的元素的样式（设置定位position:fixed/position）实现全屏

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

【中文标题】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】：

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