CODEWITHSUNDEEP
htmlreactjsreact-hooks
Karthi
Karthi

Reputation: 3489

How to play HTML5 Video in full screen on button click in react js

I'm trying to show video in fullscreen on click of external button.I tried with ref and document.getElementByid() .It was throwing error for requestFullscreen().Is there any other way to achieve this.

  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>

Upvotes: 4

Views: 10150

Answers (2)

Marcos Guerrero
Marcos Guerrero

Reputation: 408

I had the same problem, but that solution did not work for me, however I got another solution in this link here: https://dev.to/darthknoppix/using-the-fullscreen-api-with-react-1lgf

It was quite useful to me, since it is a hook that I use for several video elements

useFullScreen.js

import React from "react";

export default function useFullscreenStatus(elRef) {
  const [isFullscreen, setIsFullscreen] = React.useState(
    document[getBrowserFullscreenElementProp()] != null
  );

  const setFullscreen = () => {
    if (elRef.current == null) return;

    elRef.current
      .requestFullscreen()
      .then(() => {
        setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);
      })
      .catch(() => {
        setIsFullscreen(false);
      });
  };

  React.useLayoutEffect(() => {
    document.onfullscreenchange = () =>
      setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);

    return () => (document.onfullscreenchange = undefined);
  });

  return [isFullscreen, setFullscreen];
}

function getBrowserFullscreenElementProp() {
  if (typeof document.fullscreenElement !== "undefined") {
    return "fullscreenElement";
  } else if (typeof document.mozFullScreenElement !== "undefined") {
    return "mozFullScreenElement";
  } else if (typeof document.msFullscreenElement !== "undefined") {
    return "msFullscreenElement";
  } else if (typeof document.webkitFullscreenElement !== "undefined") {
    return "webkitFullscreenElement";
  } else {
    throw new Error("fullscreenElement is not supported by this browser");
  }
}

appVideo.jsx

import React from 'react';
import useFullscreenStatus from '../../hooks/useFullScreen';

const AppVideo = (props) => {

  const {source} = props;

  const videoElem = useRef(null);

  /**
   * If you want to keep the custom controls of the video, apply the
   * fullScreen to the container of the controls and the video, if you only
   * apply fullscreen to the video, the browser will use the default controls
   * of the useragent
   */

  let isFullScreen, setIsFullScreen;
  let errorMsg;

  try {
    [isFullScreen, setIsFullScreen] = useFullscreenStatus(videoElem);
  } catch (e) {
    errorMsg = 'Fullscreen not supported';
    isFullScreen = false;
    setIsFullScreen = undefined;
  }

  const handleExitFullScreen = () => document.exitFullscreen();
  ...
  return (
    <div ref={videoElem}>
      <video src={source} />
      <div className='AppVideo__Controls'>
        ...
        <button
          onClick={isFullScreen ? handleExitFullScreen : setIsFullScreen}
        >
          {isFullScreen ? 'Minimize' : 'Expand'}
        </button>
        ...
      </div>
    </div>
  )
}

export default AppVideo;

Upvotes: 1

Babak Yaghoobi
Babak Yaghoobi

Reputation: 1985

Use like this :

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>

Sample : HERE

Sample Code : HERE

Upvotes: 6

Related Questions