Zapobieganie pobieraniu wideo w przeglądarkach mobilnych

Question

Mam bohatera na stronie docelowej z tłem wideo i chcę, aby uniemożliwić pobranie pliku webm/mp4 na urządzenia mobilne. Widziałem niektóre rozwiązania, które dotyczą zapytań o media z atrybutem display:none. Mimo że na pierwszym wyświetleniu są w porządku, zweryfikuję, używając narzędzia do debugowania Chrome podłączonego do mojego telefonu, że plik jest nadal pobierany.

Oto wideo prezentuje znaczników 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> 

Poniżej jest metoda używam do wykrywania mobilnych przeglądarek:

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 

Jak mogę uniemożliwić pobieranie wideo na telefon urządzenia w mojej funkcji JavaScript?

Answer 1

Twój 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

Oto kolejny sposób, że próbowałem i działało :)

CSS Query Mediów.

Zasadniczo zakładam, że większość urządzeń ma mniej niż 720px szerokości. Możemy po prostu ukryć sekcję gdy max-width jest 720px:

CSS:

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

dokładne jak górna odpowiedź być, w każdym razie jest to opcja.