阻止下载HTML5视频（右键单击保存）？-Java 学习之路

142

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

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

18 回答

3

使用Vimeo等服务：登录 Vimeo > Goto Video > Settings > Privacy > Mark as Secured ，并选择嵌入域 . 设置嵌入域后，除非从指定的域连接，否则不允许任何人嵌入视频或从浏览器显示视频 . 因此，如果您的服务器上有一个安全的页面，它会在iframe中加载Vimeo播放器，这使得它很难绕过 .

回复于 2024-04-24T04:44:06+08:00
0

You can't . 那是什么浏览器的设计目的：服务内容 . 但是你可以下载更难 .

首先，你可以禁用contextmenu event，又名"the right click" . 这样可以防止您的常规skiddie通过右键单击并另存为来公然翻录您的视频 . 但是他们可能只是禁用JS并绕过它或通过浏览器的调试器找到视频源 . 另外这是糟糕的用户体验 . 上下文菜单中有许多合法的东西，而不仅仅是另存为 .

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

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

另一种技术是paint <video> on <canvas> . 在这种技术中，通过一些JavaScript，您在页面上看到的是 <canvas> 元素，从隐藏的 <video> 渲染帧 . 因为它是 <canvas> ，上下文菜单将使用 <img> 的菜单，而不是 <video> 's. You' ll获取保存图像而不是保存视频为 .

您也可以使用CSRF tokens . 您在提供视频之前'd have your sever send down a token on the page. You then use that token to fetch your video. Your server checks to see if it'是有效令牌，或者获得HTTP 401 . 我们的想法是，您只能通过拥有一个令牌来获取视频，如果您来自该页面，则只能获得该令牌，而不是直接访问该视频网址 .

在一天结束时，我只是将视频上传到第三方视频网站，例如YouTube或Vimeo . 他们拥有良好的视频管理工具，优化了设备的播放效果，并且他们努力防止他们的视频因为您的努力而被扯掉 .

回复于 2024-04-24T04:44:06+08:00
5
对于那些希望简单地从html5视频中删除右键“保存”选项的人来说，这是一个简单的解决方案
```
$(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});
```
回复于 2024-04-24T04:44:06+08:00
3

简单回答，

你不能

如果他们正在观看您的视频，他们就会 have it already

你可以放慢速度，但不能阻止它们 .

回复于 2024-04-24T04:44:06+08:00
0
我通常使用的最好的方法很简单，我完全禁用整个页面中的上下文菜单，纯html javascript：
```
<body oncontextmenu="return false;">
```
而已！我之所以这样做，是因为您可以通过右键单击来查看源代码 .
好吧，你说："I can use directly the browser view source"这是真的，但我们从你 CAN'T 停止下载 html5 视频的事实开始 .
回复于 2024-04-24T04:44:06+08:00
2
是的，您可以分三步完成：
- 将要保护的文件放在运行代码的目录的子目录中 .
www.foo.com/player.html www.foo.com/videos/video.mp4
- 将文件保存在名为“.htaccess”的子目录中，并添加以下行 .
www.foo.com/videos/.htaccess
```
#Contents of .htaccess

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://foo.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.foo.com/.*$ [NC]
RewriteRule .(mp4|mp3|avi)$ - [F]
```
Now the source link is useless ，但我们仍然需要确保任何试图下载文件的用户都无法直接为该文件提供服务 .
- 对于 a more complete solution ，现在使用Flash播放器（或html画布）提供视频，并且永远不会直接链接到视频 . 要删除右键菜单，请添加到您的HTML：
```
<body oncontextmenu="return false;">
```
结果：

www.foo.com/player.html will correctly play video ，但如果您访问www.foo.com/videos/video.mp4：

错误代码403：FORBIDDEN

这适用于直接下载，cURL，热链接，您可以命名 .

这是对所提出的两个问题的完整答案，而不是问题的答案："can I stop a user from downloading a video they have already downloaded."
回复于 2024-04-24T04:44:06+08:00

作为客户端开发人员，我建议使用blob URL，blob URL是一个客户端URL，它引用二进制对象

<video id="id" width="320" height="240"  type='video/mp4' controls  > </video>

在HTML中留下你的视频 src 空白，并在JS使用AJAX获取视频文件，确保响应类型是blob

window.onload = function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'mov_bbb.mp4', true);
    xhr.responseType = 'blob'; //important
    xhr.onload = function(e) {
        if (this.status == 200) {
            console.log("loaded");
            var blob = this.response;
            var video = document.getElementById('id');
            video.oncanplaythrough = function() {
                console.log("Can play through video without stopping");
                URL.revokeObjectURL(this.src);
            };
            video.src = URL.createObjectURL(blob);
            video.load();
        }
    };
    xhr.send();
}

注意：不建议将此方法用于大文件

EDIT

使用跨源阻止来避免直接下载
如果视频是通过API传递的，请使用不同的方法（PUT / POST）代替'GET'

回复于 2024-04-24T04:44:06+08:00

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:

现在，如果用户在新标签中复制网址或使用上下文菜单，他将没有运气 .

回复于 2024-04-24T04:44:06+08:00

21
您至少可以阻止非技术人员使用右键单击上下文菜单下载您的视频 . 您可以使用oncontextmenu属性禁用任何元素的上下文菜单 .
```
oncontextmenu="return false;"
```
这适用于body元素（整个页面）或仅在视频标记内使用它的单个视频 .
```
<video oncontextmenu="return false;" controls>...</video>
```
回复于 2024-04-24T04:44:06+08:00
32

1种简单的跨浏览器方式：您还可以使用css z-index和opacity将透明图片放在视频上 . 因此用户将在上下文菜单中看到“将图片另存为”而不是“保存视频” .

回复于 2024-04-24T04:44:06+08:00

192

我们最终将AWS CloudFront与过期的URL结合使用 . 视频将加载，但是当用户右键单击并选择另存为时，他们最初收到的视频网址已过期 . 搜索CloudFront Origin Access Identity .

生成视频网址需要一个密钥对，可以在AWS CLI中创建 . 仅供参考，这不是我的代码，但效果很好！

$resource = 'http://cdn.yourwebsite.com/videos/yourvideourl.mp4';
$timeout = 4;

//This comes from key pair you generated for cloudfront
$keyPairId = "AKAJSDHFKASWERASDF";

$expires = time() + $timeout; //Time out in seconds
$json = '{"Statement":[{"Resource":"'.$resource.'","Condition" {"DateLessThan":{"AWS:EpochTime":'.$expires.'}}}]}';     

//Read Cloudfront Private Key Pair
$fp=fopen("/absolute/path/to/your/cloudfront_privatekey.pem","r"); 
$priv_key=fread($fp,8192); 
fclose($fp); 

//Create the private key
$key = openssl_get_privatekey($priv_key);
if(!$key)
{
    echo "<p>Failed to load private key!</p>";
    return;
}

//Sign the policy with the private key
if(!openssl_sign($json, $signed_policy, $key, OPENSSL_ALGO_SHA1))
{
    echo '<p>Failed to sign policy: '.openssl_error_string().'</p>';
    return;
}

//Create url safe signed policy
$base64_signed_policy = base64_encode($signed_policy);
$signature = str_replace(array('+','=','/'), array('-','_','~'), $base64_signed_policy);

//Construct the URL
$url = $resource.'?Expires='.$expires.'&Signature='.$signature.'&Key-Pair-Id='.$keyPairId;

return '<div class="videowrapper" ><video autoplay controls style="width:100%!important;height:auto!important;"><source src="'.$url.'" type="video/mp4">Your browser does not support the video tag.</video></div>';

回复于 2024-04-24T04:44:06+08:00

-1
首先要实现 it is impossible to completely prevent a video being downloaded, all you can do is make it more difficult . 即你隐藏了视频的来源 .

Web浏览器会暂时将视频下载到缓冲区中，因此如果可以阻止下载，您也可以阻止视频被查看 .

您还应该知道，世界总人口的<1％将能够理解源代码，无论如何都会使其相当安全 . 这并不意味着你也不应该把它隐藏在源头中 - 你应该这样做 .

您应该 not 禁用右键单击，甚至更少，您应该显示一条说明 "You cannot save this video for copyright reasons. Sorry about that." 的消息 . 正如this answer中所述 .

这对用户来说可能非常烦人并且令人困惑 . 除此之外;如果他们在浏览器上禁用JavaScript，他们将能够右键单击并保存 .

这是你可以使用的CSS技巧：
```
video {
    pointer-events: none;
}
```
无法在浏览器中关闭CSS，保护您的视频而不实际禁用右键单击 . 但是有一个问题是 controls 也无法启用，换句话说，它们必须设置为 false . 如果您要设置自己的播放/暂停功能或使用具有与 video 标签分开的按钮的API，那么这是一个可行的选项 .

controls 也有一个下载按钮，所以使用它也不是一个好主意 .

这是一个JSFiddle的例子 .

如果您要使用JavaScript禁用右键单击，那么也会在JavaScript中存储视频源 . 这样，如果用户禁用JavaScript（允许右键单击），视频将无法加载（它还会使视频源隐藏得更好） .

来自TxRegex answer：
```
<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>
```
回复于 2024-04-24T04:44:06+08:00
0
该
```
<body oncontextmenu="return false;">
```
不再有效 . 截至2018年6月的Chrome和Opera在时间轴上有一个允许直接下载的子菜单，因此用户无需右键单击即可下载该视频 . 有趣的是Firefox和Edge没有这个......
回复于 2024-04-24T04:44:06+08:00
2

Short Answer: 像youtube一样加密链接，不知道如何询问youtube / google如何做到这一点 . （以防你想直截了当 . ）

我想向任何人指出这是可能的，因为youtube做到了，如果他们可以这样做任何其他网站，它不是来自浏览器，因为我在几个浏览器上测试它，如微软边缘和Internet Explorer和所以有一种方法可以禁用它，并且看到人们仍然会这么说......我试着找一个答案，因为如果youtube可以比那里有一种方法而且唯一的方法来看看他们是怎么做的就是有人看了我正在做的youtube脚本 . 我还检查了它是否是一个自定义上下文菜单，这不是因为上下文菜单过度流过inspect元素，我的意思是它已经过了它我看了，它从来没有创建一个新的类，它也用javascript实际访问inspect元素是不可能的，所以它不可能 . 你可以告诉它什么时候双击右键点击一个youtube视频，它会弹出chrome的上下文菜单 . 除此之外... youtube不会添加该功能 . 我正在研究并查看youtube的来源，所以如果我找到答案，我会回来的...如果有人说你不能，那么他们没有'像我一样做研究 . 下载YouTube视频的唯一方法是通过视频下载 .

好的...我做了研究，我的研究保持你可以禁用它，除了它没有javascript ...你必须能够加密视频的链接，你可以禁用它，因为我认为任何浏览器赢得't show it if it can' t找到它，当我打开一个youtube视频链接时，它显示为这个“blob：https://www.youtube.com/e5c4808e-297e-451f-80da-3e838caa1275”没有引号所以它正在加密它所以它无法保存...你需要知道php但是就像答案你选择了让它变得更难，youtube使它成为最重的加密它，你需要成为一个先进的PHP程序员，但如果你不知道如何解释他们是如何做到的，但他们做了，并有一种方法 . youtube加密那里视频的方式是非常聪明的，所以如果你想知道如何，而不仅仅是问你如何做到这一点的youtube / google ...希望这对你有帮助，尽管你已经选择了最佳答案 . 因此，加密链接最好是短期内 .

回复于 2024-04-24T04:44:06+08:00
10

看起来像通过websocket流式传输视频是一个可行的选择，就像在流中框架并在画布上绘制它们一样 .

Video streaming over websockets using JavaScript

我认为这将提供另一级别的保护，使客户更难以获取视频，当然通过“将视频另存为...”右键单击上下文菜单选项解决您的问题（矫枉过正？！） .

回复于 2024-04-24T04:44:06+08:00
2
这是我做的：
```
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>
```
这也适用于图像，文本和几乎任何东西 . 但是，您仍然可以通过键盘快捷键访问"Inspect"和"View source"工具 . （正如顶部的答案所说，你不能完全阻止它 . ）但是你可以尝试设置障碍来阻止它们 .
回复于 2024-04-24T04:44:06+08:00

我们可以通过隐藏上下文菜单来实现这一点，如下所示：

<video oncontextmenu="return false;"  controls>
  <source src="https://yoursite.com/yourvideo.mp4" >
</video>

回复于 2024-04-24T04:44:06+08:00

108

@ Clayton-Graul有我想要的东西，除了我需要使用AngularJS的网站的CoffeeScript版本 . 万一你也需要它，这就是你在AngularJS控制器中放置的内容：

# This is how to we do JQuery ready() dom stuff
    $ ->
        # let's hide those annoying download video options.
        # of course anyone who knows how can still download
        # the video, but hey... more power to 'em.
        $('#my-video').bind 'contextmenu', -> 
            false

“奇怪的事情正在圆圈k”（这是真的）

回复于 2024-04-24T04:44:06+08:00

阻止下载HTML5视频（右键单击保存）？

18 回答

你不能

是的，您可以分三步完成：

结果：

这适用于直接下载，cURL，热链接，您可以命名 .

相关问题