阻止HTML5视频下载(右键保存)?

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

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

当前回答

+1简单和跨浏览器的方式: 你也可以用css z-index和不透明度把透明的图片放在视频上。这样用户将在上下文菜单中看到“另存图片为”而不是“保存视频”。

2015-07-31 22:24:52

其他回答

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

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

2013-02-06 18:39:32

我们最终使用了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>';

2016-09-28 18:32:28

是的，你可以通过三个步骤做到这一点:

将要保护的文件放置在运行代码的目录的子目录中。 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，盗链，你的名字。

这是对两个问题的完整回答，而不是对“我能否阻止用户下载他们已经下载的视频”这个问题的回答。

2016-12-25 21:58:24

你可以使用

<video src="..." ... controlsList="nodownload">

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList

它不会阻止保存视频，但它会删除上下文菜单中的下载按钮和“另存为”选项。

2020-02-16 05:09:46

作为客户端开发人员，我推荐使用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传递的;使用不同的http方法(PUT / POST)来代替'GET'

2017-01-18 06:20:53

阻止HTML5视频下载(右键保存)?

推荐文章

最新文章

标签