如何禁用"将视频另存为…"从浏览器的右击菜单阻止客户端下载视频?

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

推荐答案

You can't美元.这是因为这就是浏览器的设计初衷:Serve content.但是you can make it harder to download.

首先,could禁用contextmenu event,也就是"点击鼠标右键".这将防止您的常规滑板通过右键单击并另存为来明目张胆地撕毁您的视频.但是,他们可以禁用JS并绕过这个问题,或者通过浏览器的调试器找到视频源.再加上这是糟糕的用户体验.上下文菜单中有很多合法的内容,而不仅仅是另存为.

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

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

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

你也可以用CSRF tokens英镑作为你的优势.你会让你的服务器在页面上发送一个令牌.然后,您可以使用该令牌来获取您的视频.您的服务器在提供视频或获得HTTP 401之前会判断它是否是有效的令牌.这个 idea 是,你只能通过拥有一个令牌来获得视频,而这个令牌只有在你来自页面的时候才能获得,而不是直接访问视频URL.

最后,我会把视频上传到第三方视频网站,比如YouTube或Vimeo.他们有很好的视频管理工具,优化了设备的播放,他们努力防止自己的视频在你这一方被撕毁.

Javascript相关问答推荐

如果被1个Phaser JS抵消,我的倾斜碰撞

将音频记录从js发送到activx-web服务器以保存到磁盘

HTML/JavaScript函数未执行

使用JavaScript更改json值顺序

如何制作删除按钮以从列表中删除该项目所属的项目?

为什么在react js中没有调用加载器函数?

我的YouTube视频没有以html形式显示,以获取免费加密信号

如何在加载的元数据上使用juserc和await中获得同步负载?

JavaScript文本区域阻止KeyDown/KeyUp事件本身上的Alt GR +键组合

使用i18next在React中不重新加载翻译动态数据的问题

Next.js(react)使用moment或不使用日期和时间格式

并不是所有的iframe都被更换

还原器未正确更新状态

PDF工具包阿拉伯字体的反转数字

当id匹配时对属性值求和并使用JavaScript返回结果

当使用';字母而不是与';var#39;一起使用时,访问窗口为什么返回未定义的?

在HTML语言中调用外部JavaScript文件中的函数

Eval vs函数()返回语义

我不知道如何纠正这一点.

为什么在运行于<;img>;事件处理程序中的JavaScript中x和y是不可变的?