javascript - 防止下载 HTML5 视频(右键保存)？

Question

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

有没有更完善的解决方案可以防止客户端直接访问文件路径？

Answer 1

---

你不能。

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

---

方便的“解决方案”

我只是将我的视频上传到第三方视频网站，例如 YouTube 或 Vimeo。他们拥有出色的视频管理工具，优化了设备的播放，并且他们努力防止他们的视频被您零努力地翻录。

---

解决方法 1，禁用“右键单击”

您可以禁用 contextmenu event ，又名“右键单击”。这将防止您的常规滑雪板通过右键单击并另存为来公然翻录您的视频。但随后他们可以禁用 JS 并绕过这个问题，或者通过浏览器的调试器找到视频源。另外，这是糟糕的用户体验。上下文菜单中有很多合法的东西，而不仅仅是另存为。

---

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

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

---

解决方法 3，HTTP 实时流媒体

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

---

解决方法 4，在 Canvas 上绘画

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

---

解决方法 5，CSRF token

您也可以使用 CSRF tokens对你有利。你会让你的服务器在页面上发送一个 token 。然后，您使用该 token 来获取您的视频。您的服务器会在提供视频之前检查它是否是有效 token ，或者获取 HTTP 401 .这个想法是，您只能通过拥有一个 token 来获取视频，如果您来自页面，而不是直接访问视频网址，您才能获得该 token 。

---