如何在反应js中单击按钮全屏播放HTML5视频答案

【问题标题】：How to play HTML5 Video in full screen on button click in react js如何在反应js中单击按钮全屏播放HTML5视频
【发布时间】：2020-05-08 07:52:01
【问题描述】：

我正在尝试在单击外部按钮时全屏显示视频。我尝试使用 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>

【问题讨论】：

标签： html reactjs react-hooks

【解决方案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

【讨论】：