Prevent video downloads in mobile browsers

Question

I have a hero on the landing page with a background image and want to prevent the download of the webm / mp4 file to mobile devices . I saw some solutions that are related to media queries with the display:none attribute. Despite the fact that they are in order at the first show, I checked using the Chrome debugging tool connected to my phone that the file is still loading.

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 anyone from uploading videos to mobile devices in my JavaScript function?

Answer 1

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 

Answer 2

Here is another way I tried and worked :)

CSS Media Request.

Basically, I believe that most devices have a width of less than 720px . We can just hide the section when max-width is 720px :

CSS

 @media screen and (max-width: 720px) { .hidden-xs { display: none; } } 

exact as the best answer, in any case this is an option.