点击React Video Player外部按钮触发视频全屏代码不生效问题

• 错误1：使用useState存储DOM引用不符合规范。DOM引用应该用useRef创建，useState返回的是普通状态变量，不带有current属性，你在useEffect中将DOM节点直接赋值给vidRef状态后，vidRef本身就是DOM元素，后续调用vidRef.current会得到undefined。
• 错误2：直接给ReactPlayer组件绑定ref拿到的是组件实例，不是可触发全屏的真实DOM节点，直接调用全屏方法会失效。
• 错误3：用querySelector选择DOM的方式不符合React的最佳实践，容易出现选择时机错误、匹配到错误元素的问题。

推荐给ReactPlayer外层包裹一个容器DIV，直接将容器设置为全屏，实现逻辑最简单稳定，修正后代码如下：

import "./styles.css";
import React, { useRef } from "react";
import ReactPlayer from "react-player";

export default function App() {
  // 用useRef创建ref对象
  const playerContainerRef = useRef(null);

  const setVideoToFullScreen = () => {
    const el = playerContainerRef.current;
    if (!el) return;
    if (el.requestFullscreen) {
      el.requestFullscreen();
    } else if (el.msRequestFullscreen) {
      el.msRequestFullscreen();
    } else if (el.mozRequestFullScreen) {
      el.mozRequestFullScreen();
    } else if (el.webkitRequestFullscreen) {
      el.webkitRequestFullscreen();
    }
  };

  return (
    <div className="App">
      <button onClick={setVideoToFullScreen}>Full Screen</button>
      {/* 给播放器包裹容器，绑定ref */}
      <div ref={playerContainerRef}>
        <ReactPlayer
          className="react-player"
          controls
          url="https://www.youtube.com/watch?v=OIFASfPkw9g"
        />
      </div>
    </div>
  );
}

如果需要直接对内部视频元素操作，可以调用ReactPlayer实例的getInternalPlayer()方法获取内部播放器对象，再对应取DOM节点即可。

内容的提问来源于stack exchange，提问作者dnd1993