在HTML5视频中禁用右键点击？

Question

我正在我的网站上使用HTML5视频播放器，我希望禁用所有视频的右键点击。

我尝试使用这段代码，但它不起作用：

<script type="text/javascript">
$(document).ready(function(){
$('#videoElementID').bind('contextmenu',function() { return false; });
});
</script>

我正在使用WordPress，并将该函数放置在header.php文件中。

我该如何检查我的播放器的#videoElementID名称是什么？我已经尝试了页面上所有的DIV元素，但仍然不起作用。我知道这不能防止用户下载我的视频，但我真的需要让它工作。

- user3517251

---

可能是如何在网页上禁用右键单击？的重复问题。 - kol

视频播放器是否动态加载到DOM中？ - user2521439

Answer 1

我最喜欢的方法是快速且易于操作，而且不需要使用JavaScript，只需将 oncontextmenu="return false;" 添加到视频标签即可。

像这样:

<video oncontextmenu="return false;" id="my-video-player" width="854" height="480" controls autoplay>
  <source src="https://example.com/link-to-my-video.mp4" type="video/mp4">
</video>

您还可以通过编程方式触发它，例如：

document.querySelector('video').setAttribute('oncontextmenu', "return false;")

- jsherk

---

我刚刚发现你可以通过右键单击、按住鼠标按钮、稍微移动鼠标然后释放来规避这个问题... 不知何故，它仍然会打开上下文菜单！？ - Sorcy

请注意，这确实需要JavaScript！return false;是JavaScript。如果您禁用JavaScript，则上下文菜单将正常显示。 - jameshfisher

Answer 2

 $(document).ready(function() {
    $("video").bind("contextmenu",function(){
        return false;
        });
 } );

这应该会禁用页面中所有视频元素的右键点击。希望这可以帮到你。

- Atul

---

我刚刚尝试了，它仍然没有工作。我使用Firefox和Chrome进行了测试。有任何想法吗？ - user3517251

@user3517251 - 这只发生在 video 元素上，还是所有其他元素都有这个问题。我的意思是，这个代码 $(document).bind("contextmenu",function(){ return false; }); 也不能正常工作吗？ - Atul

这也不起作用。它没有任何效果。也许有什么东西阻止了它。你有什么想法是什么原因吗？ - user3517251

我通过在视频的 DIV 元素中添加以下值来使其正常工作：<div oncontextmenu="return false" onselectstart="return false" ondragstart="return false">这里是视频嵌入代码</div>。它在 Firefox、Chrome 和 IE 中都能很好地工作。 - user3517251

理想情况下应该可以工作...你可以进行一项检查，看看是否已加载jquery.js文件。你可以通过在$(document).ready(function(){});中放置alert("jquery loaded")来实现。 - Atul

Answer 3

对于React使用 =>

onContextMenu={e => e.preventDefault()}

<video onContextMenu={e => e.preventDefault()}>
  <source src={`your_video_url`} type="video/mp4"/>
</video> 

- Aditya Suman

Answer 4

我最近尝试为视频元素禁用鼠标右键。这段代码对我起作用。

 document.querySelector("video").addEventListener("contextmenu", (event) => {
      event.preventDefault();
    });

- Sudhir

---

如果页面上有多个视频，我会将其更改为使用querySelectorAll和forEach。 - Yaniv Wainer

Answer 5

右键菜单是浏览器的一个功能。如果要禁用它，您可以尝试将以下JavaScript添加到网页头部，在 标签之前。

jQuery(document).ready(function(){
    jQuery('video').bind('contextmenu',function() { return false; });
});

- bobo

Answer 6

它对我来说很好用。

$(document).bind("contextmenu",function(ev){
    if(ev.target.nodeName=='VIDEO')
    {
        return false;
    }
});

- nacesprin

Answer 7

最好在 HTML5 的视频标签下使用 onContextMenu={(e) => e.preventDefault()}。

- yuvraj singh

---

你能给答案加上解释吗？为什么这样做更好？比什么更好？ - Petr Aleksandrov