如何从浏览器的右键菜单中禁用“另存为…”以防止客户端下载视频?
是否有更完整的解决方案来阻止客户端直接访问文件路径?
如何从浏览器的右键菜单中禁用“另存为…”以防止客户端下载视频?
是否有更完整的解决方案来阻止客户端直接访问文件路径?
当前回答
@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圈发生”(这是真的)
其他回答
@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圈发生”(这是真的)
首先,要意识到完全阻止视频下载是不可能的,你所能做的只是让下载变得更加困难。也就是说,你隐藏了视频的来源。
网络浏览器会在缓冲区中临时下载视频,所以如果可以阻止下载,你也就阻止了视频被观看。
您还应该知道,世界上只有不到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>
我们最终使用了url过期的AWS CloudFront。视频将加载,但当用户右键单击并选择另存为最初收到的视频url时,该视频已过期。搜索CloudFront Origin Access Identity。
生成视频url需要一个密钥对,这个密钥对可以在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>';
这是一个完整的解决方案禁用下载,包括右击>另存为…在上下文菜单中:
<video oncontextmenu="return false;" controlsList="nodownload">
</video>
我通常使用的最好的方法很简单,我完全禁用整个页面的上下文菜单,纯html+javascript:
<body oncontextmenu="return false;">
就是这样!我这么做是因为你总是可以通过右键点击看到源代码。 好吧,你说:“我可以直接使用浏览器查看源代码”,这是真的,但我们从事实开始,你不能停止下载html5视频。