实现react-player在视频切换时保持全屏状态

阿华AIGC实验室

2026-5-1

实现React Player全屏状态记忆&解决相关问题

一、核心需求：让下一节课程自动继承全屏状态

其实思路很直白：

先监听当前视频的全屏状态变化，把这个状态存在localStorage（或者你用的全局状态管理工具，比如Context/Redux）里
当下一个React Player加载时，读取这个状态，自动帮用户触发全屏

可惜React Player本身没暴露全屏状态的回调，所以得借助浏览器原生全屏API或者第三方库，比如你尝试的screenfull。

二、解决screenfull的编译错误

你碰到的Unexpected token错误，是因为新版screenfull用了ES2020的可选链操作符（?.），但你的Babel配置没支持这个语法。给你两个解决方向：

降级到兼容版本：直接装一个不需要新语法的旧版本，比如npm install screenfull@5.2.0，这个版本兼容性拉满，不用改Babel配置
升级Babel配置：如果想追新版，就装@babel/plugin-proposal-optional-chaining，然后在你的Babel配置文件（.babelrc或者babel.config.js）里加这个插件：

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

三、为啥React Player本身有全屏按钮？

React Player的默认控制栏（开启controls属性就会显示）里确实自带全屏按钮，这个是它封装好的UI组件，底层其实也是用全屏API或者screenfull实现的。但它没把全屏状态的变化暴露成回调给咱们用，所以如果要做状态记忆，还是得自己监听全屏事件。

完整实现示例

给你写了个能用的示例，用screenfull@5.2.0+localStorage来实现状态记忆：

先装兼容版：

npm install screenfull@5.2.0

组件代码：

import React, { useEffect, useRef, useState } from 'react';
import ReactPlayer from 'react-player';
import screenfull from 'screenfull';

const CoursePlayer = ({ videoUrl }) => {
  const playerRef = useRef(null);
  const [isFullscreen, setIsFullscreen] = useState(false);

  // 组件加载时读取之前的全屏状态，自动触发全屏
  useEffect(() => {
    const savedFullscreen = localStorage.getItem('coursePlayerFullscreen') === 'true';
    if (savedFullscreen && playerRef.current && screenfull.isEnabled) {
      // 加个延迟，确保React Player渲染完成再触发全屏
      setTimeout(() => {
        screenfull.request(playerRef.current.wrapper);
      }, 300);
    }

    // 监听全屏状态变化，实时保存到本地
    const handleFullscreenChange = () => {
      const currentState = screenfull.isFullscreen;
      setIsFullscreen(currentState);
      localStorage.setItem('coursePlayerFullscreen', currentState.toString());
    };

    if (screenfull.isEnabled) {
      screenfull.on('change', handleFullscreenChange);
    }

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      if (screenfull.isEnabled) {
        screenfull.off('change', handleFullscreenChange);
      }
    };
  }, [videoUrl]);

  return (
    <div ref={playerRef}>
      <ReactPlayer
        url={videoUrl}
        controls
        width="100%"
        height="100%"
      />
    </div>
  );
};

export default CoursePlayer;