如何在 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
。
我已经在 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
。