禁用右键单击时在 html5 中显示视频控件答案

【问题标题】：Show video controls in html5 when right click is disabled禁用右键单击时在 html5 中显示视频控件
【发布时间】：2021-07-23 01:56:26
【问题描述】：

我已禁用右键单击我网站的视频，因为我想阻止下载。为此，我使用以下代码：

<video oncontextmenu="return false" controls="controls" controlslist="nodownload"> 
    <source src="..."> video
</video>

但是，使用此功能的用户没有控件的功能。特别是，它们不能使用键盘箭头向前或向后移动。通常，要启用此功能，您必须右键单击视频并选择“显示控件”，如下所示：

当然，就我而言，这是不可能的。

如何在默认情况下启用这些控件，以便继续隐藏该上下文菜单？我搜索了默认的<video>attributes，但找不到任何与我相关的内容。有什么想法吗？

【问题讨论】：

标签： html5-video

【解决方案1】：

要禁用右键单击视频标签并保留视频控件，请尝试以下示例：

代码的作用：

为您的视频标签提供一个ID（请参阅：id="myVid"）
使用 Javascript 的 preventDefault(); 按 ID 阻止右键单击特定项目。
（例如：您可能仍希望右键单击页面的其他 [非视频播放器] 部分。）

可测试的代码示例：

<!DOCTYPE html>
<html>
<body>

<video id="myVid" width="640" height="480" controls="controls" controlslist="nodownload">
<source src="filename.mp4" type="video/mp4">
</video>

</body>
</html>

<script>

//# use this line to prevent context menu in Video Element
document.getElementById("myVid").addEventListener('contextmenu', function (e) { e.preventDefault(); }, false);

</script>

【讨论】：