ERKLÄRUNG: Ein Kunde von mir möchte ein Hintergrundvideo auf seiner responsiven Website laufen lassen. Er möchte es aber auch für Tablet / Mobile Nutzer entfernen. Ich weiß, dass dies mit Medienabfragen gemacht werden kann, aber das Video würde immer noch als Teil des DOM geladen werden und das möchte ich verhindern.
FRAGEN:
Kann das Videoelement mithilfe von JavaScript / jQuery aus dem DOM entfernt werden, wenn der Ansichts-Port in bestimmten Breiten geladen wird?
Kann das gleiche Video wiederhergestellt werden, wenn der View-Port manuell mit erhöht wird? (Ich vermute, das ist ein schlechter Ansatz)
Wird ein Video mit "display: none;" Beeinflussen Sie die Lade- / Akkulaufzeit auf einem Tablet / Handy?
Danke für Ihre Hilfe.
Basierend auf mobilen Dimensionen verwenden Sie $('video').remove() . Dadurch wird das DOM-Element von der Webseite entfernt. also wird es nicht in html rendern.
Siehe diese Antwort um festzustellen, ob Sie sich auf einem mobilen Gerät befinden.
Dann können Sie mit diesem Test .hide() Ihr Element mit jQuery verwenden oder sein src -Attribut auf "" setzen, um sicherzustellen, dass es nicht heruntergeladen wird.
Sie könnten auch CSS verwenden. Das ist viel einfacher.
%Vor%Dann haben Sie ein Bild mit einem negativen Z-Index, auf diese Weise, wenn das Video nicht angezeigt wird, erscheint das Bild.
Tags und Links javascript html5 html5-video responsive-design media-queries