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

【问题标题】：Keeping react-player full-screen mode between videos在视频之间保持反应播放器全屏模式
【发布时间】：2021-12-22 02:55:04
【问题描述】：

我正在建立一个在线课程网站。当用户以全屏模式观看课程时，我想记住这一点，以便在我挂载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： 我也不明白为什么 demo 使用自定义按钮切换到全屏模式，而我在播放器上看到一个按钮 ()本身：

【问题讨论】：

我已经打开了一个关于这个的问题：github.com/cookpete/react-player/issues/1352
你可能想参考他们的demo code，因为他们有一个自定义的全屏点击处理程序。
它会在全屏模式下播放 youtube、vidyard 等播放列表。cookpete.com/react-player 您将在哪个平台上托管视频？你打算用file播放器吗？
@Scratch'N'Purr 我见过这个。在我看来，他们添加了一个自定义按钮（第 197 行）。我想让用户使用播放器中的标准按钮进入全屏模式。
@onkarruikar Vimeo.

标签： css reactjs react-player

【解决方案1】：

播放器没有内置全屏功能。它使用screenfull 来全屏显示。根据他们的demo 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.

或者您可以使用标准的网络 API，例如：

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

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

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

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

这是一个使用 react 的演示网站：https://gizcx.csb.app/
对应codesandbox code

此外，如果您不逐个播放视频，则可以一次将完整的课程播放列表传递给播放器：

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

【讨论】：

我尝试使用screenfull 到目前为止没有成功。请参阅问题中的编辑。
我还在onEnd 的处理程序中输出document.fullscreenEnabled，即使播放器未最大化，它也会打印true。
不！ document.fullscreenEnabled 用于检查该设施是否可用。您需要使用document.fullscreenElement，如果它返回元素对象，则浏览器处于全屏状态。如果 fullscreenElement 返回 null 则浏览器未处于全屏状态。该函数也被命名为onEnded
更多详情developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
无论如何，全屏 API 的支持不够广泛 (caniuse.com/?search=fullscreen)。你知道为什么我收到screenfull 的错误以及如何解决它吗？

【解决方案2】：

为了他人的利益，是这样实现的：

import { findDOMNode } from 'react-dom'
import { toast } from 'react-toastify';

const PlayerComponent = () => {
    const [fullscreenMode, setFullscreenMode] = useState(false)
    let player = null;
    const ref = (p) => {player = p;}
    
    const onStart = () => {
        if (fullscreenMode)
            findDOMNode(player).requestFullscreen().catch(
                (err) => 
                {toast.error("Could not activate full-screen mode :(")}
            );
    }

    const onEnded = () => {
        setFullscreenMode(document.fullscreenElement !== null);
    }

    return (
        <ReactPlayer
            ref={ref}
            url="whatever url" 
            onStart={onStart}
            onEnded={onEnded} />);
   );
}

【讨论】：