html - 如何在 React js 中点击按钮全屏播放 HTML5 视频

Question

我试图在点击外部按钮时全屏显示视频。我尝试使用 ref 和 document.getElementByid() 。它为 requestFullscreen() 抛出错误。是否有任何其他方法可以实现此目的。

  const fullScreenVideoRef=useRef(null);
  const  onShowVideo=()=>{
  if (fullScreenVideoRef.current.requestFullscreen) {
            marioVideo.current.requestFullscreen();
        }
        else if (fullScreenVideoRef.current.msRequestFullscreen) {
            marioVideo.msRequestFullscreen();
        }
        else if (fullScreenVideoRef.current.mozRequestFullScreen) {
            marioVideo.current.mozRequestFullScreen();
        }
        else if (fullScreenVideoRef.current.webkitRequestFullScreen) {
            marioVideo.current.webkitRequestFullScreen();
        }
   }

  <video muted autoPlay loop controls id="full-screenVideo" ref={fullScreenVideoRef} >
                        <source src="/video/web-experience-cdn.mp4" type="video/mp4"/>
  </video>

Answer 1

像这样使用:

toggleFullScreen = () => {
    var el = document.getElementById("full-screenVideo");
    if (el.requestFullscreen) {
      el.requestFullscreen();
    } else if (el.msRequestFullscreen) {
      el.msRequestFullscreen();
    } else if (el.mozRequestFullScreen) {
      el.mozRequestFullScreen();
    } else if (el.webkitRequestFullscreen) {
      el.webkitRequestFullscreen();
    }
  };

...

<video muted autoPlay loop controls id="full-screenVideo" ref={fullScreenVideoRef} >
                    <source src="/video/web-experience-cdn.mp4" type="video/mp4"/>
</video>

样本:HERE

示例代码:HERE