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

Question

我的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>
)};

我看到这里，没有本地事件可以捕捉到这样的东西。我本来想实现全屏更改，但根据我的理解，当视频已经是全屏时，就会触发。如何覆盖React中视频元素的全屏实现？

Answer 1

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