Menu
Just add controlsList="nodownload" in your video tag.
So these are five different ways you can prevent video download: Encrypting Your Videos To Prevent Video Download. Using Watermark On Your Videos To Curb And Identify Source Of Leak. Using DRM encryption Technology To Protect VIdeos.
If all you want is really to avoid the width/height to return to defaults (300 x 150) when the next video is loading, you just have to set your <video> 's width and height properties to the ones of the loaded video ( videoWidth and videoHeight are the real values of the media, not the ones of the element).
Download the HTML5 video at one goSpecify the output folder via the inverted triangle button next to the folder icon. Finally click on All Download button to save the HTML5 video.
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.
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; });
});
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:
<body oncontextmenu="return false;">
www.foo.com/player.html will correctly play video, but if you visit www.foo.com/videos/video.mp4:
Error Code 403: FORBIDDEN
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."
Simple answer,
If they are watching your video, they have it already
You can slow them down but can't stop them.
The best way that I usually use is very simple, I fully disable context menu in the whole page, pure html+javascript:
<body oncontextmenu="return false;">
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.
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 and header token checking to prevent direct downloading.
If the video is delivered via an API; Use a different http method (PUT / POST) instead of 'GET'
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 '<video autoplay="autoplay">'
.'<source src="video.php?video='.$ogv.' type="video/ogg">'
.'<source src="video.php?video='.$webm.' type="video/webm">'
.'</video>';
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With