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

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

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

当前回答

@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圈发生”(这是真的)

2014-10-04 05:01:53

其他回答

@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圈发生”(这是真的)

2014-10-04 05:01:53

首先，要意识到完全阻止视频下载是不可能的，你所能做的只是让下载变得更加困难。也就是说，你隐藏了视频的来源。

网络浏览器会在缓冲区中临时下载视频，所以如果可以阻止下载，你也就阻止了视频被观看。

您还应该知道，世界上只有不到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>

2018-03-17 00:14:15

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

这是一个完整的解决方案禁用下载，包括右击>另存为…在上下文菜单中:

<video oncontextmenu="return false;" controlsList="nodownload">
</video>

2021-05-26 05:51:36

我通常使用的最好的方法很简单，我完全禁用整个页面的上下文菜单，纯html+javascript:

 <body oncontextmenu="return false;">

就是这样!我这么做是因为你总是可以通过右键点击看到源代码。好吧，你说:“我可以直接使用浏览器查看源代码”，这是真的，但我们从事实开始，你不能停止下载html5视频。

2014-07-17 14:16:56

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

推荐文章

最新文章

标签