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

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


当前回答

这是一个简单的解决方案,为那些希望简单地从html5视频删除右键单击“保存”选项

$(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});

其他回答

PHP将html5视频标记和一个会话一起发送,其中键是一个随机字符串,值是文件名。

ini_set('session.use_cookies',1);
session_start();
$ogv=uniqid(); 
$_SESSION[$ogv]='myVideo.ogv';
$webm=uniqid(); 
$_SESSION[$webm]='myVideo.webm';
echo '<video autoplay="autoplay">'
    .'<source src="video.php?video='.$ogv.' type="video/ogg">'
    .'<source src="video.php?video='.$webm.' type="video/webm">'
    .'</video>'; 

现在PHP被要求发送视频。PHP恢复文件名;删除会话并立即发送视频。此外,所有“无缓存”和mime类型的头必须存在。

ini_set('session.use_cookies',1);
session_start();
$file='myhiddenvideos/'.$_SESSION[$_GET['video']];
$_SESSION=array();
$params = session_get_cookie_params();
setcookie(session_name(),'', time()-42000,$params["path"],$params["domain"],
                                         $params["secure"], $params["httponly"]);
if(!file_exists($file) or $file==='' or !is_readable($file)){
  header('HTTP/1.1 404 File not found',true);
  exit;
  }
readfile($file);
exit:

现在,如果用户复制url在一个新的选项卡或使用上下文菜单,他将没有运气。

以下是我所做的:

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.


你不能。

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


方便的“解决方案”

我会把我的视频上传到第三方视频网站,比如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。


你至少可以阻止那些不懂技术的人使用右键上下文菜单下载你的视频。你可以使用oncontextmenu属性禁用任何元素的上下文菜单。

oncontextmenu="return false;"

这适用于body元素(整个页面)或在video标签中使用它的单个视频。

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

如果你正在寻找一个完整的解决方案/插件,我发现这个非常有用 https://github.com/mediaelement/mediaelement