防止HTML5视频被下载（右键保存）？

Question

防止HTML5视频被下载（右键保存）？

javascripthtmlhtml5-video

233

如何禁用浏览器右键菜单中的“另存为...”选项，以防止客户下载视频？

是否有更完整的解决方案可以防止客户直接访问文件路径？

- python

4

我点赞这个问题是因为它明确提出了如何“禁用HTML5视频的右键单击”这一问题。我不确定它是否与普通图像的右键禁用类似，或者是否可以应用其他覆盖技巧等。 - user166390

13

即使您禁用了鼠标右键，他们仍然可以通过浏览器菜单（文件→另存为）保存它。即使您可以某种方式阻止此操作，他们也可以使用 view-source 找到文件的 URL。即使您可能会对其进行一些模糊处理，他们也可以从缓存中获取。即使您可能会将其复杂化（例如流式传输），他们也可以使用嗅探器或其他工具来捕获网络流量。事实是，如果您将其发送给用户，他们可以保存它。没有任何绕开这一点的方法。您需要问自己的问题是，为什么您非常需要阻止它？这真的很必要吗？这是否值得花费时间和让用户感到不友好？ - Synetech

我可能会显得有些学究气，但是你过度使用了“下载”这个术语。当然，你希望允许视频被下载。 - Johan Boulé

28个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Xantium · Answer 1

首先要认识到完全阻止视频被下载是不可能的，你所能做的就是让它变得更加困难。也就是说，你需要隐藏视频的来源。

网页浏览器会将视频暂时存入缓冲区，如果你禁止下载，那么也就意味着无法播放视频。

你应该知道，世界上不到1%的人口能够理解源代码，因此它本身已经相对安全，但这并不意味着你不应该在源代码中隐藏它。

你不应该禁用右键点击，更不应该显示信息提示“由于版权原因无法保存此视频，敬请谅解”。正如此答案所建议的那样。

这可能会让用户感到非常恼火和困惑。除此之外，如果他们在浏览器中禁用了JavaScript，则仍然可以右键点击并保存。

以下是您可以使用的CSS技巧：

video {
    pointer-events: none;
}

浏览器无法关闭CSS，这样可以保护您的视频而不实际禁用右键。但是一个问题是controls也不能启用，换句话说，它们必须设置为false。如果您要实现自己的播放/暂停功能或使用与video标签分开的按钮的API，则这是可行的选项。 controls还有一个下载按钮，因此使用它也不是一个很好的选择。

这里有一个JSFiddle示例。

如果您要使用JavaScript禁用右键，则还要将视频源存储在JavaScript中。这样，如果用户禁用JavaScript（允许右键单击），则视频将不会加载（它还可以更好地隐藏视频源）。

来源：TxRegex答案：

<video oncontextmenu="return false;" controls>
    <source type="video/mp4" id="video">
</video>

现在通过JavaScript添加视频：

document.getElementById("video").src = "https://www.w3schools.com/html/mov_bbb.mp4";

功能性的 JSFiddle

另一种防止右键的方法是使用embed标签。然而，这并没有提供运行视频所需的控件，因此需要在JavaScript中实现：

<embed src="https://www.w3schools.com/html/mov_bbb.mp4"></embed>

- TxRegex · Answer 2

您可以通过使用oncontextmenu属性来禁用任何元素的上下文菜单，这样至少可以阻止非技术人员使用右键上下文菜单下载您的视频。

oncontextmenu="return false;"

这适用于整个页面的body元素或仅在视频标签内使用的单个视频。

<video oncontextmenu="return false;" controls>...</video>

- Mohammad Hossein Amri · Answer 3

虽然你不能百分之百地保护它，但你可以增加保护难度。我在学习保护方法时遇到了这些我正在解释的方法，其中包括在PluralSight和BestDotNetTraining中。然而，这些方法都没有阻止我下载想要的内容，但是我花费了很大的力气来让下载器通过它们的保护。

除了其他禁用上下文菜单的方法外，用户仍然可以使用像InternetDownload manager或其他类似的软件来下载视频。我在这里解释的保护方法是为了减轻这些第三方软件。

所有这些方法的要求是在识别到有人在下载您的视频时阻止该用户。这样一来，在禁止他们访问您的网站之前，他们只能下载一个或两个视频。

免责声明

如果有人滥用这些方法或使用它们来损害其他人或我提到的网站，我不会承担任何责任。这只是为了分享知识，以帮助您保护自己的知识产权。

生成具有过期时间的链接

这需要为每个用户创建一个下载链接。这可以很容易地通过Azure Blob存储或Amazon S3进行处理。您可以创建一个带有两倍视频长度的到期时间戳的下载链接。然后，您需要捕获所请求的视频链接和时间。这对于下一种方法是必要的。这种方法的关键在于当用户单击播放按钮时，您会生成下载链接。

在播放按钮事件上，您将向服务器发送请求并获取链接并更新源。

限制视频请求速率

然后，您可以监视用户请求第二个视频的速度。如果用户请求下载链接太快，则立即阻止他们。您不能将此阈值设置得太大，因为您可能会错误地阻止只是浏览或快速浏览视频的用户。

启用HTTP范围

使用一些JavaScript库（如videojs）播放您的视频，还需要在标头中返回AcceptRange。 Azure Blob存储支持此功能。这样，浏览器就开始逐块下载视频。通常为32字节/32字节。然后，您需要监听videojs timeupdate更改并向服务器更新有关视频观看百分比的信息。观看视频的百分比不能超过视频传输的百分比。如果您在未接收到任何百分比更改的情况下提供视频内容，则可以阻止用户。因为他们肯定在下载。

实现这个方法很棘手，因为用户可以快进或快退视频，所以在实现时要注意这一点。

这就是BestDotnetTraining处理timeupdate的方式。

myPlayer.ready(function () {
    //var player = this;
    this.src({
        type: "video/mp4",
        src: videoURL
    });
    if (videoId) {
        myPlayer.play();
        this.on('timeupdate', function () {
            var currentPercent = parseInt(100 * myPlayer.currentTime() / myPlayer.duration());//calcualte as percentage
            if (currentPercent % 5 == 0) {
                //send percentage to server 
                SaveVideoDurationWatched(currentPercent, videoId);
            }
        });
    }

});

无论如何，用户可以通过使用一些流式下载方法来解决此问题。几乎所有的c#都能够直接完成此操作，而对于nodejs，您可以使用request模块。然后，您需要启动一个计时器，监听接收到的数据包并将接收到的总字节数与总大小进行比较。这样，您就可以计算出百分比以及获取该百分比所需的时间。然后使用Thread.Sleep()或类似的方法延迟线程，即等待观看视频的正常时间。在睡眠之前，用户可以调用服务器并更新所接收到的百分比。这样服务器会认为用户正在观看视频。

例如，如果您计算出已经接收到了1%的数据，那么您就可以计算出应该等待多长时间才能让下载线程睡眠。通过这种方式，您无法比实际长度更快地下载视频。如果一段视频的长度为24分钟，则下载它需要24分钟时间。（再加上我们在第一种方法中设置的阈值）

original video length 24 minute
24 min *60000 = 1,440,000 miliseconds 
1,440,000 % 100 = 14,400 milisecond is needed to download one percent

检查浏览器代理

当您提供网页并提供视频链接或接受进度更新请求时，可以查看浏览器代理。如果不同，则禁止该用户。

请注意，某些旧浏览器不传递此信息。因此，在视频请求和网页请求中都没有浏览器代理时，应将其忽略。但是，如果一个请求具有它而另一个请求没有，则应禁止该用户。

为了解决这个问题，用户可以手动设置与他们用于捕获下载链接的无头浏览器相同的浏览器代理标头。

检查引用头

当引用者不是您的主机URL或您正在服务视频的页面URL时，您可以禁止该用户，因为他们将下载链接放在另一个选项卡或另一个应用程序中。甚至可以用于进度更新请求。

此要求是拥有映射视频和显示该视频的页面。您可以创建一些惯例或模式来了解URL应该是什么，这取决于您的设计。

为了解决这个问题，用户可以在下载视频时手动将引荐标头设置为等于下载页面URL。

计算请求之间的时间

如果您收到如此多的请求，它们之间的时间相同，则应封锁该用户。您应该在捕获视频链接生成请求之间的时间有多长。如果它们相同（加/减一些阈值）并且发生了多次，那么您可以禁止该用户。因为如果有一个爬网站或视频的机器人，通常它们的请求之间具有相同的休眠时间。所以如果您每隔1.3（加/减一些偏差）分钟接收一个请求。然后你会发出警报。为此，您可以使用一些统计学方法来知道请求之间的偏差。

为了解决这个问题，用户可以在请求之间随机设置休眠时间。

示例代码

我有一个repo PluralSight-Downloader 已经完成了这一半。我创建了这个仓库将近5年了。因为我只是为了学习和自己的个人用途而编写的，所以迄今为止还没有更新该仓库，我也不打算更新或使其易于使用。它只是说明如何完成此操作的示例。

- kendolew · Answer 4

The

<body oncontextmenu="return false;">

不再起作用。自2018年6月起，Chrome和Opera在时间轴上有一个子菜单，允许直接下载，因此用户无需右键单击即可下载该视频。有趣的是，Firefox和Edge没有这个功能...

- CommentUser · Answer 5

使用像 Vimeo 这样的服务：登录 Vimeo > 转到视频 > 设置 > 隐私 > 标记为安全，并选择嵌入域。一旦设置了嵌入域，除非从指定的域连接，否则它将不允许任何人嵌入视频或从浏览器显示它。因此，如果您在服务器上有一个受保护的页面，在其中加载 Vimeo 播放器的 iframe，那么这就使绕过变得非常困难。

- Alex Babak · Answer 6

+1种简单且跨浏览器的方法：您还可以使用CSS z-index和opacity在视频上放置透明图片。这样，用户在上下文菜单中将看到“保存图片”而不是“保存视频”。

- Koby Douek · Answer 7

以下是一个完整的解决方案，用于禁用下载，包括右键单击>“另存为...”在上下文菜单中：

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

- Muthulakshmi M · Answer 8

尝试以下方法禁用视频下载选项

<video src="" controls controlsList="nodownload"></video>

- Calum Childs · Answer 9

这是我的做法：

function noRightClick() {
      alert("You cannot save this video for copyright reasons. Sorry about that.");
}

    <body oncontextmenu="noRightClick();">
    <video>
    <source src="http://calumchilds.com/videos/big_buck_bunny.mp4" type="video/mp4">
    </video>
    </body>

This also works for images, text and pretty much anything. However, you can still access the "Inspect" and the "View source" tool through keyboard shortcuts. (As the answer at the top says, you can't stop it entirely.) But you can try to put barriers up to stop them.

- Arun AL · Answer 10

controlsList可以防止像下载或进入全屏这样的操作，而无需添加任何其他JavaScript函数

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