Jaki jest najlepszy sposób na usunięcie tła wideo html5 dla użytkowników mobilnych?

Question

WYJAŚNIENIE: Mój klient chce mieć działające w tle wideo na swojej responsywnej stronie internetowej. Jednak chciałby również usunąć go dla użytkowników tabletów/telefonów komórkowych. Wiem, że można to zrobić za pomocą zapytań o media, ale wideo nadal będzie ładowane jako część DOM i właśnie to chciałbym zapobiec.

PYTANIA:

1. Czy element wideo można usunąć za pomocą JavaScript/jQuery z DOM, gdy ładuje widok-port w pewnych szerokościach?

2. Czy ten sam film można odzyskać, jeśli port widoku jest ręcznie zwiększany za pomocą? (podejrzewam, że to złe podejście)

3. Czy wideo z "display: none;" nadal wpływa na czas ładowania/baterii tabletu/telefonu komórkowego?

Dziękuję za pomoc.

Answer 1

Aby sprawdzić, czy korzystasz z urządzenia mobilnego, zobacz stronę this answer.

Następnie za pomocą tego testu można użyć elementu .hide() za pomocą jQuery lub ustawić jego atrybut src na "", aby upewnić się, że nie jest pobierany.

Answer 2

Na podstawie wymiarów mobilnych użyj $('video').remove(). spowoduje to usunięcie elementu DOM ze strony internetowej. więc nie będzie renderować w html.

Answer 3

Można również użyć css. To jest znacznie łatwiejsze.

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

Następnie wyświetl obraz z ujemnym z-index, w ten sposób, gdy wideo nie zostanie wyświetlone, pojawi się obraz.