无法禁用/覆盖上下文菜单Safari全屏模式

Question

在全屏模式下使用Safari时，无法禁用或覆盖上下文菜单（右键单击/按住Ctrl键并单击视频）。

通常，可以使用oncontextmenu处理程序禁用或覆盖：

videoEl.oncontextmenu = (e) => {
 e.preventDefault(); // or return false;
}

以上适用于所有浏览器，包括不在全屏模式下的Safari。但是，当视频处于Safari全屏模式时，代码不会触发。要重现，只需全屏并按住Ctrl键并单击即可。默认上下文菜单将显示。

我也想捕捉点击/键盘事件，但那些不会以全屏模式启动。

然而，在Safari全屏模式下，Youtube等其他玩家可以禁用和覆盖上下文菜单。

有什么想法吗？

谢谢

Answer 1

尝试添加：

videoEl.oncontextmenu =
    function () {
        return false;
    };

这也可能有用：

video::-webkit-media-controls {
  display:none !important;
}

此外，只是一个友好的提醒，它并不是真的建议禁用上下文菜单，因为它根本不保护您的源代码，它可能会导致恼人的用户体验。

无论如何，希望这有帮助。

Answer 2

在此回答，因为现有的回复（谢谢）没有解决问题。

必须从播放器中删除“controls”属性。不幸的是，这还需要重新实现所有播放器控件。

使用此方法，您可以在Safari全屏模式下阻止右键菜单，并在需要时提供您自己的自定义菜单。