反应：禁用右键单击videojs

Question

以下是我的代码：我需要在使用 videojs 的网页中添加质量选择器并禁用右键单击选项。我不确定如何使用插件，没有任何插件示例。请帮忙

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>
  );
};```

Answer 1

要禁用 videoPlayer 中的右键单击菜单，您可以在 React 中使用 contextmenu 合成事件，

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

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

有关详细信息，请查看此[关于上下文菜单的博客(https://www.pluralsight.com/guides/how-to-create-a-right-click-menu-using-react)。

您可以在 here

上找到有关 onContextMenu 的 React 合成事件的更多信息

Answer 2

您可以使用 onContextMenu 事件属性来处理对特定元素的右键单击。像这样 -

...
  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>
  );
...

这将禁用右键单击元素及其中的所有元素。此外，这仅适用于本机 HTML 元素，除非您为 HTML 元素转发 onContextMenu prop 或 forwarding ref。

反应：禁用右键单击videojs

react: disable right click on videojs

html

javascript

video.js

reactjs

react-router