Menu
I have a hero on a landing page with a video background and want to prevent the webm/mp4 file from being downloaded on mobile devices. I've seen some solutions that involve media queries with display:none attribute. Even though they're fine at first impression, I verified, using Chrome debug tool connected to my phone, that the file is still being downloaded.
Here's the video presented in the HTML5 markup:
<video preload="metadata" class="hidden-xs" autoplay="autoplay" poster="fallback-image.jpg" loop="loop" id="bgvid">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
The following is the method I use to detect mobile browsers:
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
// If mobile, then we do all this
}
else {
// If not mobile then do this
}
} // detectmob
How can I prevent someone from downloading the video on mobile devices within my JavaScript function?
812
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.
The only way to protect videos from downloading is to use DRM, this means that the video file is encrypted stored on the server and the player in the browser will request a key to decrypt it and play it without the encrypted video file being available.
On mobile, navigate to Settings & Privacy > Settings. Under Media and Contacts, select Videos and Photos > Never Autoplay Videos.
The autoplay attribute is of higher importance than preload=”none” and so the video will begin to immediately download and playback – just like it does today. On mobile devices, there is no autoplay, and the preload=”none” prevents the browser from downloading the video.
Your HTML:
<video preload="metadata" class="hidden-xs" autoplay="autoplay" poster="fallback-image.jpg" loop="loop" id="bgvid">
</video>
Your javascript:
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
// If mobile, then we do all this
}
else {
// If not mobile then do this
document.getElementById("bgvid").innerHTML = '<source src="video.webm" type="video/webm"><source src="video.mp4" type="video/mp4">';
}
} // detectmob
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
