阻止HTML5视频下载(右键保存)?

如何从浏览器的右键菜单中禁用“另存为…”以防止客户端下载视频?

是否有更完整的解决方案来阻止客户端直接访问文件路径?

当前回答

你不能。

这是因为浏览器的设计目的就是:提供内容。但你可以让它更难下载。

方便的“解决方案”

我会把我的视频上传到第三方视频网站，比如YouTube或Vimeo。他们有很好的视频管理工具，优化设备的播放，他们努力防止他们的视频被撕掉，而你却没有付出任何努力。

解决方案1、禁用“右键单击”

你可以禁用上下文菜单事件，也就是“右键单击”。这将防止你的常规skiddie公然撕扯你的视频右击和另存为。但他们可以禁用JS，绕过这个问题，或者通过浏览器的调试器找到视频源。另外，这是糟糕的用户体验。在上下文菜单中有很多合法的东西，而不仅仅是另存为。

解决方案2，视频播放器库

使用自定义视频播放器库。它们中的大多数实现了视频播放器，可以根据您的喜好定制上下文菜单。你不会得到默认的浏览器上下文菜单。如果他们确实提供类似于另存为的菜单项，你可以禁用它。但同样，这是一个JS的解决方案。弱点类似于解决方案1。

解决方案3,HTTP直播

另一种方法是使用HTTP Live Streaming提供视频。它本质上是把视频切成块，然后一个接一个地播放。这就是大多数流媒体网站提供视频的方式。因此，即使你设法另存为，你只保存了一部分，而不是整个视频。收集所有的块并使用一些专用软件将它们缝合起来需要更多的努力。

解决方法4，在画布上作画

另一种技巧是在<canvas>上绘制<video>。在这种技术中，使用一些JavaScript，您在页面上看到的是一个<canvas>元素从隐藏的<video>渲染帧。因为它是一个<canvas>，上下文菜单将使用一个<img>的菜单，而不是一个<video>的。你会得到另存图像，而不是另存视频。

解决方案5,CSRF令牌

您还可以利用CSRF令牌。您可以让服务器在页面上发送一个令牌。然后使用该令牌获取视频。您的服务器在提供视频之前检查它是否是一个有效的令牌，或者获得HTTP 401。这个想法是，你只能通过有一个令牌来获得一个视频，你只能从页面来，而不是直接访问视频url。

2012-03-18 08:05:06

其他回答

作为客户端开发人员，我推荐使用blob URL， blob URL是一个引用二进制对象的客户端URL

<video id="id" width="320" height="240"  type='video/mp4' controls  > </video>

在HTML中，让你的视频src为空，在JS中使用AJAX获取视频文件，确保响应类型是blob

window.onload = function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'mov_bbb.mp4', true);
    xhr.responseType = 'blob'; //important
    xhr.onload = function(e) {
        if (this.status == 200) {
            console.log("loaded");
            var blob = this.response;
            var video = document.getElementById('id');
            video.oncanplaythrough = function() {
                console.log("Can play through video without stopping");
                URL.revokeObjectURL(this.src);
            };
            video.src = URL.createObjectURL(blob);
            video.load();
        }
    };
    xhr.send();
}

注意:大文件不建议使用此方法

EDIT

使用跨源阻塞和头标记检查来防止直接下载。如果视频是通过API传递的;使用不同的http方法(PUT / POST)来代替'GET'

2017-01-18 06:20:53

controlsList在不添加任何其他JavaScript函数的情况下阻止下载开始全屏等操作

   <video width="400"  controlsList="nofullscreen nodownload"  controls>

2021-10-15 05:56:37

你在浏览器中看到的一切都是下载的内容。这里提到的问题是如何在浏览器中保存这些内容。要查看内容，客户端浏览器从内容服务器下载并在本地提供。

一种流行的解决方案是将(短暂的)内容仅保存在浏览器中，并在有限的时间内，以一种不能直接保存的方式保存。blob是这种方法的一种实现，它具有减少带宽和存储开销的额外好处，因为内容存储在二进制对象中。

内容的短有效期使得普通用户几乎不可能持久存储，因为在用户尝试保存过期内容之前会显示新内容。

2021-10-21 12:07:24

我通常使用的最好的方法很简单，我完全禁用整个页面的上下文菜单，纯html+javascript:

 <body oncontextmenu="return false;">

就是这样!我这么做是因为你总是可以通过右键点击看到源代码。好吧，你说:“我可以直接使用浏览器查看源代码”，这是真的，但我们从事实开始，你不能停止下载html5视频。

2014-07-17 14:16:56

这是一个完整的解决方案禁用下载，包括右击>另存为…在上下文菜单中:

<video oncontextmenu="return false;" controlsList="nodownload">
</video>

2021-05-26 05:51:36

阻止HTML5视频下载(右键保存)?

推荐文章

最新文章

标签