如何在 React Player (reactjs) 中禁用 YouTube 上下文菜单?

How to disable YouTube context menu in react player (reactjs)?

我已经在 React js 网站中实现了 React 播放器,它工作正常我可以嵌入来自 Vimeo、youtube 和许多其他平台的视频。现在我需要在反应播放器中隐藏或禁用 youtube 视频的上下文菜单。我做了如下更改,

<ReactPlayer
              url={videoLink}
              controls={true}
              pip={true}
              className="player"
              width="100%"
              height="100%"
              playing={true}
              controls={true}
              onContextMenu={(e) => e.preventDefault()}
              config={{
                youtube: {
                  playerVars: {
                    modestbranding: 1,
                    fs: 0,
                  },
                },
              }}
            />

添加 onContextMenu={(e) => e.preventDefault()} 我能够禁用上下文菜单 但我仍然可以访问 youtube 上下文菜单。那么我如何在 React Player 中禁用 youtube 上下文菜单。

我认为你做不到。

  • YouTube 使用自己的 JavaScript 覆盖右键菜单。
  • 如果您尝试访问该框架,您将收到 SecurityError,因为 _top 位置与 youtube.com 不同。
  • 尝试使用 contentWindow 禁用 JavaScript 上下文菜单。在一个完美的世界中,这应该有效。
var youtube = document.getElementById('yourYoutubeFrame');
youtube = youtube.contentWindow;
youtube.oncontextmenu = function(e) {
  e.preventDefault();
  console.log("Blocked!");
}
  • 尝试一下,您将收到一条消息,表明浏览器blocked a frame with origin yoursite.com from accessing a frame with origin youtube-nocookie.com