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

如何在按钮上单击单击以全屏播放HTML5视频

1 个答案: