在视频之间保持反应播放器全屏模式

Question

我正在建立一个在线课程网站。当用户以全屏模式观看课程时，我想记住这一点，以便在安装react-player下一课时使用全屏模式。我希望会有一个onFullscreenMode回调，但文档没有列出任何此类内容。我怎样才能实现这个目标？

编辑1：根据@onkarruikar的回复，我尝试使用screenfull。首先，我很惊讶它没有安装，尽管real-player应该使用它进入全屏模式。安装包并导入后，出现编译错误：

.../node_modules/screenfull/index.js 11:44
Module parse failed: Unexpected token (11:44)
File was processed with these loaders:
.../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|   for (const methodList of methodMap) {
>     const exitFullscreenMethod = methodList?.[1];
| 
|     if (exitFullscreenMethod in document) {

编辑2：我也不明白为什么演示使用自定义按钮切换到全屏模式，而我看到一个按钮（) 对播放器本身：

Answer 1

该播放器没有内置全屏功能。它使用screenfull来全屏显示。根据他们的演示 https://cookpete.com/react-player/全屏由组件用户在外部处理。
您可以直接在您的网站上使用以下全屏功能：

screenfull.isFullscreen   //<-- is the browser in fullscreen
screenfull.isEnabled      //<-- is the facility available to use
screenfull.request(element);
screenfull.toggle(element);
etc.

或者您可以使用标准 Web api，例如：

if(document.fullscreenElement) {  //<-- is the browser in fullscreen
...
}

document.fullscreenEnabled //<-- is the facility available to use

Document.fullscreenElement / ShadowRoot.fullscreenElement
fullscreenElement 属性告诉您当前在 DOM（或 Shadow DOM）上以全屏模式显示的元素。如果为 null，则文档（或影子 DOM）不处于全屏模式。 参考

即使您使用播放器内的控件进入全屏，这些 api 也应该起作用。

这里是一个使用react的demo网站： https: //gizcx.csb.app/
对应的codesandbox代码

另外，如果您不是一一播放视频，那么您可以立即将完整课程播放列表传递给播放器：

<ReactPlayer
  url={[
    'https://www.youtube.com/watch?v=oUFJJNQGwhk',
    'https://www.youtube.com/watch?v=jNgP6d9HraI'
  ]}
/>