Prevent HTML5 video from being downloaded right-click saved

Question

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

User · Answer

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

User · Answer

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    lt video oncontextmenu  return false   controls gt     lt  video gt

User · Answer

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  lt video gt  on  lt canvas gt   In this technique  with a bit of JavaScript  what you see on the page is a  lt canvas gt  element rendering frames from a hidden  lt video gt   And because it s a  lt canvas gt   the context menu will use an  lt img gt  s menu  not a  lt video gt  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

User · Answer

The   lt body oncontextmenu  return false   gt     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

User · Answer

Yes  you can do this in three steps      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    Contents of  htaccess  RewriteEngine on RewriteCond   HTTP REFERER    http   foo com      NC  RewriteCond   HTTP REFERER    http   www foo com      NC  RewriteRule   mp4 mp3 avi   -  F     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    lt body oncontextmenu  return false   gt       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

User · Answer

If you are looking for a complete solution plugin  I ve found this very useful https   github com mediaelement mediaelement

User · Answer

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

User · Answer

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  lt 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   video       pointer-events  none      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     lt video oncontextmenu  return false   controls gt       lt source type  video mp4  id  video  gt   lt  video gt    Now add the video via JavaScript   document getElementById  video   src    https   www w3schools com html mov bbb mp4     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    lt embed src  https   www w3schools com html mov bbb mp4  gt  lt  embed gt

User · Answer

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

User · Answer

We could make that not so easy by hiding context menu  like this    lt video oncontextmenu  return false    controls gt     lt source src  https   yoursite com yourvideo mp4   gt   lt  video gt

User · Answer

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

User · Answer

As a client-side developer I recommend to use blob URL   blob URL is a client-side URL which refers to a binary object    lt video id  id  width  320  height  240   type  video mp4  controls   gt   lt  video gt    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

User · Answer

You can use   lt video src           controlsList  nodownload  gt    https   developer mozilla org en-US docs Web API HTMLMediaElement controlsList  It doesn t prevent saving the video  but it does remove the download button and the  Save as  option in the context menu

User · Answer

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    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   lt p gt Failed to load private key  lt  p gt        return       Sign the policy with the private key if  openssl sign  json   signed policy   key  OPENSSL ALGO SHA1         echo   lt p gt Failed to sign policy    openssl error string     lt  p gt        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   amp Signature    signature   amp Key-Pair-Id    keyPairId   return   lt div class  videowrapper   gt  lt video autoplay controls style  width 100  important height auto important   gt  lt source src     url    type  video mp4  gt Your browser does not support the video tag  lt  video gt  lt  div gt

User · Answer

The best way that I usually use is very simple  I fully disable context menu in the whole page  pure html javascript     lt body oncontextmenu  return false   gt    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 html5 videos

User · Answer

well  you can t protect it 100  but you can make it harder  these methods that I m explaining  I faced them during studying protection methods in PluralSight and BestDotNetTraining  nevertheless  none of these methods stopped me from downloading what I want  but I had a hard time to curate the downloader to pass their protection     In addition to other mentioned methods to disable the context menu  the user still is able to use third-party tools like InternetDownload manager or other similar software to download the videos  the protection method that I m explaining here is to mitigate those 3rd party software   the requirement of all of these methods is to block a user when you identify someone is downloading your videos  in this way they are able to download only one or two videos only before you banned them from accessing to your website   disclaimer  I will not accept any responsibility if someone abuses these methods or use it to harm others or the websites that I mentioned as an example  it s just for sharing knowledge to help you to protect your intellectual product    generate links with an expiry  the requirement for this is to create a download link per user  that one can easily be handled by azure blob storage or amazon s3  you can create a download link with twice of the video length expiry timestamp  then you need to capture that video link and the time that is requested  this is necessary for the next method  the catch for this method is you are generating the download link when the user click the play button    on play button event you will send a request to the server and get the link and update the source   throttle the video request rate  then you monitor how fast the user request for the second video  if the user request for a download link too fast  then you block them right away  you can t put this threshold too big because you can mistakenly block users that are just browsing or skimming through the videos    Enable HTTP Range  use some js library like videojs to play your video  also you need to return an AcceptRange in your header  Azure blob storage supports this out of the box  this way the browser starts to download the video chunk by chunk  usually  32byte by 32byte  then you need to listen to videojs timeupdate change and update your server about the percentage that the video is watched  the percentage that the video is watched can t be more than the percentage that video is delivered  and if you are delivering a video content without receiving any percentage change  then you can block the user  because for sure they are downloading   implementing this is tricky because the user can skip the video forward or backwards so be conscious about this when you are implementing this    this is how BestDotnetTraining is handling the timeupdate  myPlayer ready function            var player   this      this src           type   video mp4           src  videoURL             if  videoId            myPlayer play            this on  timeupdate   function                  var currentPercent   parseInt 100   myPlayer currentTime     myPlayer duration      calcualte as percentage             if  currentPercent   5    0                      send percentage to server                  SaveVideoDurationWatched currentPercent  videoId                                          anyway  the user is able to work around this by using some download method that downloads a file through streaming  almost c  do it out of the box and for nodejs  you can use request module  then you need to start a stopWatch  listen to a package received and compare the total byte received compare to the total size  this way you can calculate a percentage and the time spent to get that amount of percentage  then use the Thread Sleep   or something like that to delay the thread the amount that you have to wait if you watch the video normally  also before the sleep the user can call the server and update the percentage that is received  so the server thinks that the user is actually watching a video   the calculation will be something like this  for example  if you calculate that you received 1 per cent so far  then you can calculate the amount that you should wait to sleep the download thread  in this way you can t download a video faster than what it s actual length is  if a video is 24 min  it will takes 24 min to download it   plus the threshold we put in the first method   original video length 24 minute 24 min  60000   1 440 000 miliseconds  1 440 000   100   14 400 milisecond is needed to download one percent   check the browser agent  when you are serving a webpage and serving the video link or accepting the progress update request you can look at the browser agent  if it s different then ban the user   just be aware that some old browser doesn t pass this information  so you should ignore this when there is no browser agent in both video request and webpage request  but if one request has it and another one doesn t  then you should ban the user   to work around this the user can set the browser agent header manually same as the headless browser that they are using to capture the download link   check the referer header  when the referer is something other than your host URL or the page URL that you are serving the video  you can ban the user  because they put the download link in another tab or another application  even you can do that for the progress update request   the requirement for this is to has a mapping of video and the page that shows that video  you can create some convention or pattern to understand what the URL should be  it s up to your design   to work around it the user can set the referrer header manually equal to the download page URL when downloading the videos   Calculate the time between request  if you receive so many requests that the time between them is the same  then you should block the user  you should put this to capture how much is time between the video link generation request  if they are the same  plus minus some threshold  and it happens more than a number of times  then you can ban the user  because if there is a bot that is going to crawl your website or videos  then usually they have the same sleep time between their request  so if you receive each request  for example  every 1 3 plus mins some deviation  minutes  then you raise an alarm  for this  you can use some statistic calculation to know the deviation between the requests   to workaround this  the user can put a random sleep time between the requests   sample code  I have a repo PluralSight-Downloader that is doing it halfway  I created this repo almost 5 years ago  because I wrote it for study purpose and own personal use only  the repo isn t received any update so far and I m not going to update or make it easy to work with  it s just an example of how it can be done

User · Answer

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

User · Answer

Using a service such as Vimeo  Sign in Vimeo  gt  Goto Video  gt  Settings  gt  Privacy  gt  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

User · Answer

PHP sends the html5 video tag together with a session where the key is a random string and the value is the filename    ini set  session use cookies  1   session start     ogv uniqid       SESSION  ogv   myVideo ogv    webm uniqid       SESSION  webm   myVideo webm   echo   lt video autoplay  autoplay  gt          lt source src  video php video    ogv   type  video ogg  gt          lt source src  video php video    webm   type  video webm  gt          lt  video gt       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   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    Now if the user copy the url in a new tab or use the context menu he will have no luck

User · Answer

Here s what I did    x000D   x000D  function noRightClick     x000D        alert  You cannot save this video for copyright reasons  Sorry about that     x000D    x000D       lt body oncontextmenu  noRightClick     gt  x000D       lt video gt  x000D       lt source src  http   calumchilds com videos big buck bunny mp4  type  video mp4  gt  x000D       lt  video gt  x000D       lt  body gt  x000D   x000D   x000D   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

User · Answer

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         This is how to we do JQuery ready   dom stuff       - gt            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   - gt               false    strange things are afoot at the circle k   it s true

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

Examples related to javascript

Examples related to html

Examples related to html5-video