如何从浏览器的右键菜单中禁用“另存为…”以防止客户端下载视频?
是否有更完整的解决方案来阻止客户端直接访问文件路径?
当前回答
我通常使用的最好的方法很简单，我完全禁用整个页面的上下文菜单，纯html+javascript:
<body oncontextmenu="return false;">
就是这样!我这么做是因为你总是可以通过右键点击看到源代码。 好吧，你说:“我可以直接使用浏览器查看源代码”，这是真的，但我们从事实开始，你不能停止下载html5视频。
其他回答
The
<body oncontextmenu="return false;">
不再有效。截至2018年6月，Chrome和Opera在时间轴上有一个子菜单，允许直接下载，所以用户不需要右键单击来下载视频。有趣的是，Firefox和Edge没有这个功能……
是的，你可以通过三个步骤做到这一点:
将要保护的文件放置在运行代码的目录的子目录中。 www.foo.com/player.html www.foo.com/videos/video.mp4 在该子目录中保存一个名为“”的文件。并添加下面的行。 www.foo.com/videos/.htaccess # .htaccess的内容 RewriteEngine上 RewriteCond % {HTTP_REFERER} ! ^ http://foo.com/。* $(数控) ^http://www.foo.com/.*$ [NC] 重写规则(mp4|mp3|avi)$ - [F]
现在源链接是无用的，但我们仍然需要确保任何试图下载该文件的用户不能直接获得该文件。
对于一个更完整的解决方案，现在为视频提供一个flash播放器(或html画布)，不要直接链接到视频。只需删除右键菜单，添加到您的HTML: <body oncontextmenu="return false;">
结果:
www.foo.com/player.html可以正确播放视频，但如果你访问www.foo.com/videos/video.mp4:
错误代码403:禁止
这将工作直接下载，cURL，盗链，你的名字。
这是对两个问题的完整回答，而不是对“我能否阻止用户下载他们已经下载的视频”这个问题的回答。
首先，要意识到完全阻止视频下载是不可能的，你所能做的只是让下载变得更加困难。也就是说，你隐藏了视频的来源。
网络浏览器会在缓冲区中临时下载视频，所以如果可以阻止下载，你也就阻止了视频被观看。
您还应该知道，世界上只有不到1%的人口能够理解源代码，这使得它相当安全。这并不意味着你不应该把它隐藏在源代码中——你应该这样做。
您不应该禁用右键单击，甚至更不应该显示一条消息说“由于版权原因，您无法保存此视频。对此我很抱歉。”正如这个答案所暗示的。
这对用户来说是非常烦人和困惑的。除此之外;如果他们在浏览器上禁用JavaScript，他们将能够右键单击并保存。
下面是一个你可以使用的CSS技巧:
video {
pointer-events: none;
}
CSS不能在浏览器中关闭，保护您的视频而不实际禁用右键单击。然而，一个问题是控件也不能启用，换句话说，它们必须设置为false。如果你打算添加自己的播放/暂停功能，或者使用一个有独立于视频标签的按钮的API，那么这是一个可行的选择。
控件也有一个下载按钮，所以使用它也不是一个好主意。
下面是一个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>
你不能。
这是因为浏览器的设计目的就是:提供内容。但你可以让它更难下载。
方便的“解决方案”
我会把我的视频上传到第三方视频网站，比如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。
你不能百分百保护它，但你可以让它更难。我解释的这些方法，是我在PluralSight和BestDotNetTraining中学习保护方法时遇到的。尽管如此，这些方法都没有阻止我下载我想要的东西，但我很难策划下载者通过他们的保护。
除了其他提到的方法禁用上下文菜单。用户仍然可以使用第三方工具，如InternetDownload manager或其他类似软件下载视频。我在这里解释的保护方法是缓解这些第三方软件。
所有这些方法的要求是，当您确定有人正在下载您的视频时，阻止用户。这样，在你禁止他们访问你的网站之前，他们只能下载一到两个视频。
免责声明
如果有人滥用这些方法或用它来伤害其他人或我举的例子中的网站，我将不承担任何责任。它只是用来分享知识，帮助你保护你的知识产品。
生成带有过期的链接
这样做的要求是为每个用户创建一个下载链接。azure blob存储或amazon s3可以很容易地处理这个问题。您可以使用视频长度到期时间戳的两倍创建下载链接。然后，您需要捕获该视频链接和请求的时间。这是下一个方法所必需的。这种方法的问题在于，当用户单击播放按钮时，将生成下载链接。
在播放按钮事件中，您将向服务器发送一个请求，并获得链接并更新源代码。
限制视频请求速率
然后监视用户请求第二个视频的速度。如果用户请求下载链接的速度太快，那么你会立即阻止他们。你不能把这个阈值设得太大，因为你可能会错误地阻止那些只是浏览或浏览视频的用户。
启用HTTP范围
use some js library like videojs to play your video, also you need to return an AcceptRange in your header. Azure blob storage supports this out of the box. this way the browser starts to download the video chunk by chunk. usually, 32byte by 32byte. then you need to listen to videojs timeupdate change and update your server about the percentage that the video is watched. the percentage that the video is watched can't be more than the percentage that video is delivered. and if you are delivering a video content without receiving any percentage change, then you can block the user. because for sure they are downloading.
实现这个很棘手，因为用户可以向前或向后跳过视频，所以在实现这个时要注意这一点。
这是BestDotnetTraining处理时间更新的方式
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);
}
});
}
});
anyway, the user is able to work around this by using some download method that downloads a file through streaming. almost c# do it out of the box and for nodejs, you can use request module. then you need to start a stopWatch, listen to a package received and compare the total byte received compare to the total size. this way you can calculate a percentage and the time spent to get that amount of percentage. then use the Thread.Sleep() or something like that to delay the thread the amount that you have to wait if you watch the video normally. also before the sleep the user can call the server and update the percentage that is received. so the server thinks that the user is actually watching a video.
例如，如果你计算出到目前为止你收到了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相等的referrer头。
计算请求之间的时间间隔
if you receive so many requests that the time between them is the same, then you should block the user. you should put this to capture how much is time between the video link generation request. if they are the same (plus/minus some threshold) and it happens more than a number of times, then you can ban the user. because if there is a bot that is going to crawl your website or videos, then usually they have the same sleep time between their request. so if you receive each request, for example, every 1.3(plus/mins some deviation) minutes. then you raise an alarm. for this, you can use some statistic calculation to know the deviation between the requests.
为了解决这个问题，用户可以在请求之间设置一个随机的睡眠时间。
示例代码
我有一个回购PluralSight-Downloader正在中途做它。我在5年前创建了这个回购。因为我写它是为了学习目的和自己的个人使用，到目前为止，回购没有收到任何更新，我不打算更新或使它易于使用。这只是一个可以做到的例子。
推荐文章
- 如何在HTML5中改变视频的播放速度?
- 保留HTML字体大小时，iPhone的方向从纵向改变为横向
- 谷歌地图API v3:我可以setZoom后fitBounds?
- ES6/2015中的null安全属性访问(和条件赋值)
- 与push()相反;
- 嵌套行与自举网格系统?
- JS字符串“+”vs concat方法
- AngularJS使用ng-class切换类
- 访问Handlebars.js每次循环范围之外的变量
- 如何用JavaScript截屏一个div ?
- 如何为其他域设置cookie
- 如何减去日期/时间在JavaScript?
- "全屏" <iframe> .
- 如何检测“搜索”HTML5输入的清除?
- 我如何转义一个单引号?
