Sep 25, 2018 - Learn about the different ways to download embedded videos to your computer using a direct download, a download program or an online.
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 the client from accessing a file path directly?
pythonpython
18 Answers
You can't. That's because that's what browsers were designed to do: Serve content. But you can make it harder to download.
First thing's first, you could disable the
contextmenu
event, aka 'the right click'. That would prevent your regular skiddie from blatantly ripping your video by right clicking and Save As. But then they could just disable JS and get around this or find the video source via the browser's debugger. Plus this is bad UX. There are lots of legitimate things in a context menu than just Save As.You could also use custom video player libraries. Most of them implement video players that customize the context menu to your liking. So you don't get the default browser context menu. And if ever they do serve a menu item similar to Save As, you can disable it. But again, this is a JS workaround. Weaknesses are similar to the previous option.
Another way to do it is to serve the video using HTTP Live Streaming. What it essentially does is chop up the video into chunks and serve it one after the other. This is how most streaming sites serve video. So even if you manage to Save As, you only save a chunk, not the whole video. It would take a bit more effort to gather all the chunks and stitch them using some dedicated software.
Another technique is to paint
<video>
on <canvas>
. In this technique, with a bit of JavaScript, what you see on the page is a <canvas>
element rendering frames from a hidden <video>
. And because it's a <canvas>
, the context menu will use an <img>
's menu, not a <video>
's. You'll get a Save Image As instead of a Save Video As.You could also use CSRF tokens to your advantage. You'd have your sever send down a token on the page. You then use that token to fetch your video. Your server checks to see if it's a valid token before it serves the video, or get an HTTP 401. The idea is that you can only ever get a video by having a token which you can only ever get if you came from the page, not directly visiting the video url.
At the end of the day, I'd just upload my video to a third-party video site, like YouTube or Vimeo. They have good video management tools, optimizes playback to the device, and they make efforts in preventing their videos from being ripped with zero effort on your end.
JosephJoseph
This is a simple solution for those wishing to simply remove the right-click 'save' option from the html5 videos
Clayton GraulClayton Graul
Simple answer,
YOU CAN'T
If they are watching your video, they have it already
You can slow them down but can't stop them.
StarxStarx
- Place the files you want to protect in a subdirectory of the directory where your code is running.www.foo.com/player.html
www.foo.com/videos/video.mp4 - Save a file in that subdirectory named '.htaccess' and add the lines below.www.foo.com/videos/.htaccess
Now the source link is useless, but we still need to make sure any user attempting to download the file cannot be directly served the file.
- For a more complete solution, now serve the video with a flash player (or html canvas) and never link to the video directly. To just remove the right click menu, add to your HTML:
The Result:
www.foo.com/player.html will correctly play video, but if you visit www.foo.com/videos/video.mp4:
Error Code 403: FORBIDDEN
This will work for direct download, cURL, hotlinking, you name it.
This is a complete answer to the two questions asked and not an answer to the question: 'can I stop a user from downloading a video they have already downloaded.'
TzshandTzshand
The best way that I usually use is very simple, I fully disable context menu in the whole page, pure html+javascript:
That's it! I do that because you can always see the source by right click.
Ok, you say: 'I can use directly the browser view source' and it's true but we start from the fact that you CAN'T stop downloading
Ok, you say: 'I can use directly the browser view source' and it's true but we start from the fact that you CAN'T stop downloading
html5
videos.Daniele CannovaDaniele Cannova
As a client-side developer I recommend to use blob URL, blob URL is a client-side URL which refers to a binary object
in HTML leave your video
src
blank, and in JS fetch the video file using AJAX, make sure the response type is blobNote: 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'
SajanSajan
PHP sends the html5 video tag together with a session where the key is a random string and the value is the filename.
Now PHP is asked to send the video. PHP recovers the filename; deletes the session and sends the video instantly. Additionally all the 'no cache' and mime-type headers must be present.
Now if the user copy the url in a new tab or use the context menu he will have no luck.
B.F.B.F.
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.
This works for the body element (whole page) or just a single video using it inside the video tag.
TxRegexTxRegex
We ended up using AWS CloudFront with expiring URLs. The video will load, but by the time the user right clicks and chooses Save As the video url they initially received has expired. Do a search for CloudFront Origin Access Identity.
Producing the video url requires a key pair which can be created in the AWS CLI. FYI this is not my code but it works great!
prophotoprophoto
+1 simple and cross-browser way:You can also put transparent picture over the video with css z-index and opacity.So users will see 'save picture as' instead of 'save video' in context menu.
Alex BabakAlex Babak
Using a service such as Vimeo: Sign in
Vimeo > Goto Video > Settings > Privacy > Mark as Secured
, and also select embed domains. Once the embed domains are set, it will not allow anyone to embed the video or display it from the browser unless connecting from the domains specified. So, if you have a page that is secured on your server which loads the Vimeo player in iframe, this makes it pretty difficult to get around.CommentUserCommentUser
First of all realise it is impossible to completely prevent a video being downloaded, all you can do is make it more difficult. I.e. you hide the source of the video.
A web browser temporarily downloads the video in a buffer, so if could prevent download you would also be preventing the video being viewed as well.
You should also know that <1% of the total population of the world will be able to understand the source code making it rather safe anyway. That does not mean you should not hide it in the source as well - you should.
You should not disable right click, and even less you should display a message saying
'You cannot save this video for copyright reasons. Sorry about that.'
. As suggested in this answer.This can be very annoying and confusing for the user. Apart from that; if they disable JavaScript on their browser they will be able to right click and save anyway.
Here is a CSS trick you could use:
CSS cannot be turned off in browser, protecting your video without actually disabling right click. However one problem is that
controls
cannot be enabled either, in other words they must be set to false
. If you are going to inplament your own Play/Pause function or use an API that has buttons separate to the video
tag then this is a feasible option. controls
also has a download button so using it is not such a good idea either.Here is a JSFiddle example.
If you are going to disable right click using JavaScript then also store the source of the video in JavaScript as well. That way if the user disables JavaScript (allowing right click) the video will not load (it also hides the video source a little better).
From TxRegex answer:
Now add the video via JavaScript:
Functional JSFiddle
Another way to prevent right click involves using the
embed
tag. This is does not however provide the controls to run the video so they would need to be inplamented in JavaScript:SimonSimon
The
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 ...
kendolewkendolew
Short Answer: Encrypt the link like youtube does, don't know how than ask youtube/google of how they do it. (Just in case you want to get straight into the point.)
I would like to point out to anyone that this is possible because youtube does it and if they can so can any other website and it isn't from the browser either because I tested it on a couple browsers such as microsoft edge and internet explorer and so there is a way to disable it and seen that people still say it...I tries looking for an answer because if youtube can than there has to be a way and the only way to see how they do it is if someone looked into the scripts of youtube which I am doing now. I also checked to see if it was a custom context menu as well and it isn't because the context menu is over flowing the inspect element and I mean like it is over it and I looked and it never creates a new class and also it is impossible to actually access inspect element with javascript so it can't be. You can tell when it double right-click a youtube video that it pops up the context menu for chrome. Besides...youtube wouldn't add that function in. I am doing research and looking through the source of youtube so I will be back if I find the answer...if anyone says you can't than, well they didn't do research like I have. The only way to download youtube videos is through a video download.
Okay...I did research and my research stays that you can disable it except there is no javascript to it...you have to be able to encrypt the links to the video for you to be able to disable it because I think any browser won't show it if it can't find it and when I opened a youtube video link it showed as this 'blob:https://www.youtube.com/e5c4808e-297e-451f-80da-3e838caa1275' without quotes so it is encrypting it so it cannot be saved...you need to know php for that but like the answer you picked out of making it harder, youtube makes it the hardest of heavy encrypting it, you need to be an advance php programmer but if you don't know that than take the person you picked as best answer of making it hard to download it...but if you know php than heavy encrypt the video link so it only is able to be read on yours...I don't know how to explain how they do it but they did and there is a way. The way youtube Encrypts there videos is quite smart so if you want to know how to than just ask youtube/google of how they do it...hope this helps for you although you already picked a best answer. So encrypting the link is best in short terms.
Jonathan J. PecanyJonathan J. Pecany
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.
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 ?! ).
Community♦
GuyGuy
Here's what I did:
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.Calum ChildsCalum Childs
We could make that not so easy by hiding context menu, like this:
JcyrssJcyrss
@Clayton-Graul had what I was looking for, except I needed the CoffeeScript version for a site using AngularJS. Just in case you need that too, here's what you put in the AngularJS controller in question:
'strange things are afoot at the circle k' (it's true)
Ryan CrewsRyan Crews
protected by Tushar Gupta - curioustusharOct 4 '14 at 6:54
Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
Would you like to answer one of these unanswered questions instead?