CODEWITHSUNDEEP
javascripthtmlreactjsreact-routervideo.js
Job Fernandez
Job Fernandez

Reputation: 45

react: disable right click on videojs

The following is my code: I need to add a quality selector and disable the right-click option in a webpage which uses videojs. I am not sure on how to use the plugins, there weren't any examples of plugins in react. Please help

VideoPlayer.js

import videojs from "video.js";

export const VideoPlayer = (props) => {
  const videoPlayerRef = useRef(null); // Instead of ID
  const [currentTime, setCurrentTime] = useState(null);
  const videoSrc = "https://media.w3.org/2010/05/sintel/trailer_hd.mp4";

  const videoJSOptions = {
    autoplay: "muted",
    controls: true,
    userActions: { hotkeys: true },
    playbackRates: [0.5, 1, 1.5, 2],
    chromecast: {
      appId: "APP-ID",
      metadata: {
        title: "Title display on tech wrapper",
        subtitle: "Synopsis display on tech wrapper",
      },
    },
    hlsQualitySelector: {
      displayCurrentQuality: true,
    },
  };

  useEffect(() => {
    if (videoPlayerRef) {
      const player = videojs(videoPlayerRef.current, videoJSOptions, () => {
        player.src(videoSrc);
        player.on("ended", () => {
          console.log("ended");
        });
        player.on("timeupdate", () => {
          setCurrentTime(player.currentTime());
        });
        console.log("Player Ready");
      });
    }

    return () => {};
  }, []);

  return (
    <div style={{ width: "100%" }}>
      <video
        style={{ width: "100%" }}
        ref={videoPlayerRef}
        className="video-js"
      />
      <span>Current Time: {currentTime}</span>
      {/* <GlobalStyle /> */}
    </div>
  );
};```

Upvotes: 3

Views: 3493

Answers (2)

Shujath
Shujath

Reputation: 1171

To disable right click menu in videoPlayer, you can use the contextmenu synthetic event in react,

document.addEventListener("contextmenu", (event) => {
  event.preventDefault();
});

// using react synthetic events
<SomeJSXVideoDOM onContextMenu={(event)=>event.preventDefault()} />

For more information, check out this [blog on contextmenu(https://www.pluralsight.com/guides/how-to-create-a-right-click-menu-using-react).

You can find more information on react synthetic event for onContextMenu over here

Upvotes: 4

Rudraprasad Das
Rudraprasad Das

Reputation: 368

You can use onContextMenu event prop to handle right clicks on a particular element. Something like this -

...
  return (
    <div onContextMenu={e => e.preventDefault()} style={{ width: "100%" }}>
      <video
        style={{ width: "100%" }}
        ref={videoPlayerRef}
        className="video-js"
      />
      <span>Current Time: {currentTime}</span>
      {/* <GlobalStyle /> */}
    </div>
  );
...

This will disable right click on the element and all the elements inside it. Also, this is only going to work with native HTML elements, unless you are forwarding the onContextMenu prop or forwarding ref for the HTML element.

Upvotes: 2

Related Questions