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

Question

我已经在 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 上下文菜单。

Answer 1

我认为你做不到。

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。

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

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

javascript

youtube

contextmenu

reactjs

react-player