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

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


当前回答

你可以使用

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

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

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

其他回答

The

<body oncontextmenu="return false;"> 

不再有效。截至2018年6月,Chrome和Opera在时间轴上有一个子菜单,允许直接下载,所以用户不需要右键单击来下载视频。有趣的是,Firefox和Edge没有这个功能……

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

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:

现在,如果用户复制url在一个新的选项卡或使用上下文菜单,他将没有运气。

作为客户端开发人员,我推荐使用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'

你至少可以阻止那些不懂技术的人使用右键上下文菜单下载你的视频。你可以使用oncontextmenu属性禁用任何元素的上下文菜单。

oncontextmenu="return false;"

这适用于body元素(整个页面)或在video标签中使用它的单个视频。

<video oncontextmenu="return false;" controls>...</video>