html5 audio、video组件禁止下载

禁止视频与音频下载及右键菜单的实现

最新推荐文章于 2025-09-12 14:47:00 发布

原创最新推荐文章于 2025-09-12 14:47:00 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何通过HTML5的controlsList属性和JavaScript禁用视频与音频的下载选项，以及如何阻止右键菜单显示下载选项。controlsList属性支持Chrome58+，包括nodownload、nofullscreen和noremoteplayback等特性，同时提供了JavaScript代码示例来防止视频元素的右键上下文菜单显示下载选项。

<video id="video" src="#" controls controlsList="nodownload" oncontextmenu="return false"></video>

<audio src="/record/test.wav" controls="controls" controlsList="nodownload" oncontextmenu="return false"></audio>

禁止显示下载按钮

设定 controlsList=”nodownload”

// 这个方法只支持 Chrome 58+，低于该版本的是没有无法隐藏的

<audio src="/record/test.wav" controls="controls" controlsList="nodownload"></audio>

controlsList属性只兼容Chrome 58+以上，具体可以参考controlslist.html ，controlsList在线例子

nodownload：不要下载

nofullscreen：不要全屏

noremoteplayback：不要远程回放

禁止右键下载

直接设定 οncοntextmenu="return false"

<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
    $(document).ready(function(){
    $('#video').bind('contextmenu',function() { return false; });
    });
</script>