Previene lo scaricamento di uno sfondo video sui browser mobili

Question

Ho un eroe in una pagina di destinazione con uno sfondo video e voglio impedire il download del file webm/mp4 sui dispositivi mobili. Ho visto alcune soluzioni che riguardano le query multimediali con l'attributo display:none. Anche se stanno bene alla prima impressione, ho verificato, utilizzando lo strumento di debug di Chrome collegato al mio telefono, che il file è ancora in fase di download.

Ecco il video presentato nel markup HTML5:

<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> 

Quello che segue è il metodo che uso per rilevare i browser mobile:

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 

Come posso impedire a qualcuno di scaricare il video sul cellulare dispositivi nella mia funzione JavaScript?

Answer 1

tuo HTML:

<video preload="metadata" class="hidden-xs" autoplay="autoplay" poster="fallback-image.jpg" loop="loop" id="bgvid"> 
</video> 

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

Ecco un altro modo che ho provato e ha lavorato :)

CSS media query.

Fondamentalmente, presumo che la maggior parte dei dispositivi abbia una larghezza inferiore a 720px. Possiamo semplicemente nascondere la sezione in cui è max-width720px:

CSS:

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

precisa come la risposta in alto sia, in ogni caso si tratta di un'opzione.