1

我已经在 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 上下文菜单。那么我如何禁用反应播放器中的 youtube 上下文菜单。

4

1 回答 1

2

我不认为你能做到这一点。

  • 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.
于 2021-05-14T06:42:24.177 回答