Menu
I used the below tricks:
First, I disabled the right click in order to prevent the user from using save as or get link using this HTML5:
<body oncontextmenu="return false;">
</body>
Second: I used the controlsList="nodownload" but the problem it works fine ONLY in Chrome 58+ as per this, later on I may consider customs control as shown here
<video width="512" height="380" controls controlsList="nodownload"
poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
<source src="videos/289522.mp4" type="video/mp4">
<source src="videos/289522.ogv" type="video/ogg">
<source src="videos/289522.webm" type="video/webm">
Your browser doesn't support HTML5 video tag.
</video>
I still need to prevent the user from downloading it in case he got the link by other means, I found some talks about using .htaccess, so I created one inside the videos folder, and tried this:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://my.domain.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.my.domain.com/.*$ [NC]
RewriteRule .(mp4|mp3|avi)$ - [F]`
and used as an alternate way, this:
<Files "reminder.php">
Order Deny,Allow
Deny from all
Allow from http://my.domain.com/
Allow from http://my.domain.com/
</Files>
But what happened is video had been blocked completely, even from my website itself, and I started getting this error:
GET http://my.domain.com/videos/289522.mp4 500 (Internal Server Error)
984
How to insert video in web page and play it using HTML ? HTML allows playing video in the web browser by using <video> tag. To embed the video in the webpage, we use src element for mentioning the file address and width and height attributes are used to define its size.
Your browser does not support HTML5 video. To show a video in HTML, use the <video> element: Your browser does not support the video tag. The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes.
The HTML <video> element is used to show a video on a web page. Your browser does not support HTML5 video. To show a video in HTML, use the <video> element: Your browser does not support the video tag. The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes.
The video tag uses width, height, and control attributes to set the size and controls of video on web page. Also, use source tag with src attribute to add source of video. Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
Your .htaccess solution is a good idea, to get it to work, your .htaccess needs to be in a sub-directory with the source videos, and nothing else. Update it so that it looks like this:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://example.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.example.com/.*$ [NC]
RewriteRule .(mp4|mp3|avi)$ - [F]`
Alternatively this should work too (to completley block access to your video conent)
RewriteEngine On
RewriteCond %{REQUEST_URI} \.(mp4|mp3|avi)$ [NC]
RewriteRule ^.* - [F,L]
It is required to include both codes together:
RewriteEngine On
RewriteCond %{REQUEST_URI} \.(mp4|mp3|avi)$ [NC]
RewriteCond %{HTTP_REFERER} !^http://sample.com/.*$ [NC]
RewriteRule ^.* - [F,L]
On a side-note, while we're talking about .htaccess, check out this tool for writing and testing your file: http://htaccess.mwl.be/ . It lets you see which conditions will meet which URL patterns and what the outcome will be, much faster than deploying to your server each time you make a change ;)
159
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
