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

Question

我在我的网站上使用HTML5视频播放器,我想禁用右键点击我的所有视频.

我尝试使用此代码,它不起作用:

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

我正在使用Wordpress并将上面的函数放在header.php文件中.

如何查看播放机的#videoElementID名称是什么？我尝试了页面上的所有DIV元素,它仍然无法正常工作.

我知道这不会阻止用户下载我的视频,但我真的需要做这项工作.

有任何想法吗？

谢谢.

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>

Answer 2

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

这应禁用右键单击该页面中的所有视频元素.希望这可以帮助.

Answer 3

对于 React 使用 =>

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

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