Javascript 反应：禁用右键单击videojs

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

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

从“video.js”导入videojs；
导出常量视频播放器=（道具）=>{
const videoPlayerRef=useRef（null）；//而不是ID
const[currentTime，setCurrentTime]=useState（null）；
const videoSrc=”https://media.w3.org/2010/05/sintel/trailer_hd.mp4";
const videoJSOptions={
自动播放：“静音”，
控制：对，
用户操作：{hotkeys:true}，
回放率：[0.5,1,1.5,2]，
色度学：{
appId:“APP-ID”，
元数据：{
标题：“技术包装上的标题显示”，
副标题：“技术包装上的概要显示”，
},
},
hlsQualitySelector：{
显示当前质量：正确，
},
};
useffect（（）=>{
如果（videoPlayerRef）{
const player=videojs（videoplayerf.current，videoJSOptions，（）=>{
player.src（videoSrc）；
player.on（“结束”），（）=>{
控制台日志（“结束”）；
});
player.on（“时间更新”，（）=>{
setCurrentTime（player.currentTime（））；
});
控制台日志（“播放器就绪”）；
});
}
return（）=>{}；
}, []);
返回(
当前时间：{currentTime}
{/*  */}
);
};```

要禁用videoPlayer中的右键单击菜单，您可以使用react中的

上下文菜单

合成事件

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

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

document.addEventListener（“上下文菜单”，（事件）=>{
event.preventDefault（）；
});
//使用react合成事件
event.preventDefault（）}/>

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

---

您可以通过

找到有关onContextMenu的react synthetic event for onContextMenu的更多信息。您可以使用

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

。。。
返回(
e、 preventDefault（）}style={{width:“100%”}>
当前时间：{currentTime}
{/*  */}
);
...

这将禁用右键单击元素及其内部的所有元素。此外，这仅适用于本机HTML元素，除非您正在转发HTML元素的

onContextMenu prop

或

forwarding ref