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

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

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

当前回答

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

oncontextmenu="return false;"

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

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

2016-06-02 15:49:33

其他回答

The

<body oncontextmenu="return false;">

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

2018-06-18 10:45:38

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

如果你正在寻找一个完整的解决方案/插件，我发现这个非常有用 https://github.com/mediaelement/mediaelement

2020-12-30 12:15:49

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

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

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

你在浏览器中看到的一切都是下载的内容。这里提到的问题是如何在浏览器中保存这些内容。要查看内容，客户端浏览器从内容服务器下载并在本地提供。

一种流行的解决方案是将(短暂的)内容仅保存在浏览器中，并在有限的时间内，以一种不能直接保存的方式保存。blob是这种方法的一种实现，它具有减少带宽和存储开销的额外好处，因为内容存储在二进制对象中。

内容的短有效期使得普通用户几乎不可能持久存储，因为在用户尝试保存过期内容之前会显示新内容。

2021-10-21 12:07:24

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

推荐文章

最新文章

标签