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

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： 我也不明白为什么 demo uses a custom button for switching to full-screen mode, whereas I see a button () 在播放器上：

Answer 1

播放器没有内置全屏功能。它使用 screenfull to go full-screen. As per their 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
The fullscreenElement property tells you the Element that's currently being displayed in full-screen mode on the DOM (or shadow DOM). If this is null, the document (or shadow DOM) is not in full-screen mode. 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'
  ]}
/>

Answer 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} />);
   );
}

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

Keeping react-player full-screen mode between videos

css

reactjs

react-player