如何从浏览器的右键菜单中禁用“另存为…”以防止客户端下载视频?
是否有更完整的解决方案来阻止客户端直接访问文件路径?
如何从浏览器的右键菜单中禁用“另存为…”以防止客户端下载视频?
是否有更完整的解决方案来阻止客户端直接访问文件路径?
当前回答
controlsList在不添加任何其他JavaScript函数的情况下阻止下载开始全屏等操作
<video width="400" controlsList="nofullscreen nodownload" controls>
其他回答
我们最终使用了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>';
你在浏览器中看到的一切都是下载的内容。这里提到的问题是如何在浏览器中保存这些内容。要查看内容,客户端浏览器从内容服务器下载并在本地提供。
一种流行的解决方案是将(短暂的)内容仅保存在浏览器中,并在有限的时间内,以一种不能直接保存的方式保存。blob是这种方法的一种实现,它具有减少带宽和存储开销的额外好处,因为内容存储在二进制对象中。
内容的短有效期使得普通用户几乎不可能持久存储,因为在用户尝试保存过期内容之前会显示新内容。
我们可以通过隐藏上下文菜单来让这变得不那么容易,就像这样:
<video oncontextmenu="return false;" controls>
<source src="https://yoursite.com/yourvideo.mp4" >
</video>
你可以使用
<video src="..." ... controlsList="nodownload">
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList
它不会阻止保存视频,但它会删除上下文菜单中的下载按钮和“另存为”选项。
+1简单和跨浏览器的方式: 你也可以用css z-index和不透明度把透明的图片放在视频上。 这样用户将在上下文菜单中看到“另存图片为”而不是“保存视频”。