Quelle est la meilleure façon d'enlever la vidéo html5 de fond pour les utilisateurs mobiles

EXPLICATION: UN client de la mine veut avoir une vidéo d'arrière-plan en cours d'exécution sur son site web réactif. Toutefois, il faudra aussi supprimer pour tablette/mobile des utilisateurs. Je sais que cela peut être fait avec les media queries, mais la vidéo aurait encore de la charge dans le cadre de la DOM et c'est ce que je voudrais éviter.

QUESTIONS:

  1. Pouvez la vidéo de l'élément supprimé à l'aide de JavaScript/jQuery à partir du DOM lors du chargement de la vue d'un port de certaines largeurs?
  2. Pouvez la vidéo de même être récupérés si le port de la vue est augmenté manuellement avec? (je soupçonne que c'est une mauvaise approche)
  3. Une vidéo avec "display:none;" encore une incidence sur le chargement de la batterie/de temps sur une tablette/mobile ?

Merci pour votre aide.

Bienvenue à Débordement de Pile. Merci de lire Débordement de Pile: Comment demander et Jon Skeet Question de la Liste pour savoir comment poser une bonne question, qui va générer un bon utiles, des réponses.

OriginalL'auteur user3812110 | 2014-07-07

  1. 2

    Basé sur mobile dimensions utilisation $('video').remove(). cela supprime l'élément du DOM de la page web. donc, il ne sera pas rendu en html.

    OriginalL'auteur Chandra Reddy

  2. 1

    Voir cette réponse pour détecter si vous êtes sur un appareil mobile.

    Puis, à l'aide de ce test, vous pouvez .hide() votre élément à l'aide de jQuery, ou de définir sa src attribut "", pour être sûr qu'il ne télécharge pas.

    Merci Jb, je pense que ce sera la meilleure solution 🙂
    Je tiens à souligner cela n'empêchera pas la vidéo d'être téléchargé par l'utilisateur.
    L'utilisation de modernizr ou js pour détecter si l'élément vidéo est disponible, et puis ne pas charger la vidéo si la vidéo que l'élément n'est pas valide.

    OriginalL'auteur Jb Drucker

  3. 1

    Vous pouvez aussi utiliser des feuilles de style css.
    C'est beaucoup plus facile.

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

    Alors une image avec un z-index négative, de cette façon quand la vidéo n'est pas affichée, l'image apparaîtra.

    Ne fonctionne pas sur Chrome 52.

    OriginalL'auteur Anton Koenig