Qual è il modo migliore per rimuovere lo sfondo del video html5 per gli utenti mobili

Question

SPIEGAZIONE: un mio cliente desidera avere un video in background in esecuzione sul suo sito Web reattivo. Tuttavia vorrebbe anche rimuoverlo per tablet/utenti mobili. So che questo può essere fatto con le media query, ma il video dovrebbe ancora caricare come parte del DOM e questo è quello che vorrei impedire.

DOMANDE:

1. Può l'elemento video essere rimosso utilizzando JavaScript/jQuery dal DOM quando viene caricato view-port in determinati larghezza?

2. È possibile ripristinare lo stesso video quando si aumenta manualmente la porta di visualizzazione? (sospetto si tratti di un approccio errato)

3. Un video con "display: none;" influisce ancora sul tempo di caricamento/batteria su un tablet/mobile?

Grazie per l'assistenza.

Answer 1

Vedere this answer per rilevare se si è su un dispositivo mobile.

Quindi, utilizzando questo test, è possibile .hide() l'elemento utilizzando jQuery oppure impostare l'attributo src su "", per assicurarsi che non venga scaricato.

Answer 2

In base alle dimensioni mobili, utilizzare $('video').remove(). questo rimuoverà l'elemento DOM dalla pagina web. quindi non renderà in html.

Answer 3

Si potrebbe anche usare css. Questo è molto più facile.

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    video { 
     display:none; 
    } 
} 

Dai un'immagine con un negativo z-index, in questo modo quando non viene visualizzato il video, l'immagine apparirà.