Prevent HTML5 video from being downloaded (right-click saved)?

前端未结

关注

 20  2072

醉酒成梦

How can I disable \"Save Video As...\" from a browser\'s right-click menu to prevent clients from downloading a video?

Are there more complete solutions that prevent

相关标签:

20条回答

走了就别回头了

2020-11-22 16:14
Here's what I did:
```
function noRightClick() {
      alert("You cannot save this video for copyright reasons. Sorry about that.");
}
```
```
    <body oncontextmenu="noRightClick();">
    <video>
    <source src="http://calumchilds.com/videos/big_buck_bunny.mp4" type="video/mp4">
    </video>
    </body>
```
This also works for images, text and pretty much anything. However, you can still access the "Inspect" and the "View source" tool through keyboard shortcuts. (As the answer at the top says, you can't stop it entirely.) But you can try to put barriers up to stop them.
0 讨论(0)
发布评论:

提交评论
- 加载中...
执念已碎

2020-11-22 16:16
The
```
<body oncontextmenu="return false;"> 
```
no longer works. Chrome and Opera as of June 2018 has a submenu on the timeline to allow straight download, so user doesn't need to right click to download that video. Interestingly Firefox and Edge don't have this ...
0 讨论(0)
发布评论:

提交评论
- 加载中...
一生所求

2020-11-22 16:16

It seems like streaming the video through websocket is a viable option, as in stream the frames and draw them on a canvas sort of thing.

Video streaming over websockets using JavaScript

I think that would provide another level of protection making it more difficult for the client to acquire the video and of course solve your problem with "Save video as..." right-click context menu option ( overkill ?! ).

0 讨论(0)
发布评论:

提交评论
- 加载中...
广开言路

2020-11-22 16:18
This is a simple solution for those wishing to simply remove the right-click "save" option from the html5 videos
```
$(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

盖世英雄少女心

2020-11-22 16:19

As a client-side developer I recommend to use blob URL, blob URL is a client-side URL which refers to a binary object

<video id="id" width="320" height="240"  type='video/mp4' controls  > </video>

in HTML leave your video src blank, and in JS fetch the video file using AJAX, make sure the response type is 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();
}

Note: This method is not recommended for large file

EDIT

Use cross-origin blocking for avoiding direct downloading
if the video is delivered by an API Use different method (PUT/POST) instead of 'GET'

0 讨论(0)

你的背包

2020-11-22 16:22
You can at least stop the the non-tech savvy people from using the right-click context menu to download your video. You can disable the context menu for any element using the oncontextmenu attribute.
```
oncontextmenu="return false;"
```
This works for the body element (whole page) or just a single video using it inside the video tag.
```
<video oncontextmenu="return false;" controls>...</video>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...