Javascript Girl
  1. Javascript Girl
  3. Quelle est la meilleure façon de supprimer l'arrière-plan vidéo html5 pour les utilisateurs mobiles
Intereting Posts
Comment mettre en œuvre la case à cocher "sélectionner tout" dans HTML? Création d'un bundle qui supporte le navigateur et jQuery <script> tag load Y a-t-il des effets secondaires (négatifs) lorsque je n'utilise pas la fonction "alors" d'une promesse? Threejs: assignez différentes couleurs à chaque sommet dans une géométrie Différences entre les expressions régulières C # et JavaScript? AngularJS / javascript convertissant une date String à l'objet date Détectez et connectez-vous lorsque les ressources externes JavaScript ou CSS ne parviennent pas à charger Comment puis-je convertir ce rappel asynchrone vers un générateur? Supprimer le formatage à partir d'un contenuEditable div JQuery comment faire apparaître un événement tous les x secondes? Comment puis-je lire le texte CSS via Javascript tel que défini dans la feuille de style? Affichage de la valeur sélectionnée sur le gestionnaire de l'entrée de la gamme lorsque la valeur change Impossible de lire la propriété 'string' de undefined | React.PropTypes | LayoutPropTypes.js Stratégies de liaison de données bidirectionnelles de données Ajax? Obtenir la liste des classes pour l'élément avec jQuery

Quelle est la meilleure façon de supprimer l'arrière-plan vidéo html5 pour les utilisateurs mobiles

EXPLICATION: Un client à moi veut avoir une vidéo d'arrière-plan sur son site Web réactif. Cependant, il voudrait également l'enlever pour les utilisateurs de tableaux / mobiles. Je sais que cela peut être fait avec des requêtes multimédias, mais la vidéo serait toujours chargée dans le DOM et c'est ce que je voudrais éviter.

DES QUESTIONS:

  1. L'élément vidéo peut-il être supprimé en utilisant JavaScript / jQuery à partir du DOM lorsqu'il charge le port de vue à certaines largeurs?

  2. La même vidéo peut-elle être récupérée si le port de vue est augmenté manuellement? (Je soupçonne que c'est une mauvaise approche)

  3. Une vidéo avec "display: none;" Affecte toujours le temps de chargement / batterie sur une tablette / mobile?

Merci pour votre aide.

En fonction des dimensions mobiles, utilisez $('video').remove() . Cela éliminera l'élément DOM de la page Web. Donc il ne sera pas rendu en html.

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

Ensuite, en utilisant ce test, vous pouvez .hide() utiliser votre élément en utilisant jQuery ou définir son attribut src sur "" , afin de s'assurer qu'il ne télécharge pas.

Vous pouvez également utiliser 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; } }

Ensuite, une image avec un index z négatif, de sorte que la vidéo n'est pas affichée, l'image apparaîtra.