1486 sujets

Web Mobile et responsive web design

Ne pas charger une vidéo sur mobile

Bonjour,

je suis en train de faire mon site perso, le pré-projet est en ligne sur : http://6ro.fr/test/

J'aimerai savoir comment ne pas charger la vidéo de la page d'accueil si on est sur mobile ?

Merci d'avance.
Salut,
oui j'ai ceci : 

@media only screen and (min-width : 768px) {
	#fond{display:block;}
	#test{display:none}
	#test2{display:none}
}

mais je ne pense pas que ça empêche de charger la vidéo en arrière plan comme faisant partie de la page.
Si cette astuce ne marche pas tu peux essayer ce bout de code après avoir vérifié que tu es sur un mobile :
const divs = document.querySelectorAll('div[data-vide-bg]');
for (var i=0,iMax=divs.length; i<iMax; i++) {
   divs[i].removeAttribute('data-vide-bg');
}
Note que la logique voudrait qu'on fasse l'inverse :
par défaut on ne charge pas les vidéos.
Si on n'est pas sur un "petit terminal pas très puissant comme les smartphones", alors on charge les vidéos.
Administrateur
bazooka07 a écrit :
As tu essayé de cacher par défaut la &lt;div&gt; qui contient la vidéo et de ne l'afficher que lorque l'écran est suffisamment grand.


Hello,

En cachant l'élément div :
- on charge quand même le HTML (négligeable mais c'est dommage)
- on charge le script (beaucoup moins négligeable)
- on exécute le script... pour rien (vraiment dommage)

Il existe des solutions telles que Modernizr pour détecter si l'usager est sur un mobile et pour charger conditionnellement le script. Sinon, on peut également passer par la méthode JS matchMedia() qui fait très bien le boulot nativement : https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html

Bon week-end Smiley smile
Merci Raphael,
j'ai tenté de comprendre mais ni connais rien en js.
D'où d'ailleurs mon autre sujet d'hier : Fermeture Overlay.
Et oui c'est pas facile tous les jours.
Administrateur
6ro a écrit :
j'ai tenté de comprendre mais ni connais rien en js.

Je te rassure, je n'y connais rien en JS non plus Smiley langue
Ceci dit, pour ne pas charger une vidéo tout en demeurant optimal, il sera nécessaire de passer par un "vrai" langage et non pas un simple langage descriptif tels que HTML ou CSS.
Je te remercie, je vais regarder ça de plus près, je pense que la démonstration n°3 devrait m'aider.
Sinon aurais-tu une idée concernant mon sujet d'hier : “Fermeture Overlay”.
Merci d'avance.
@Raphael,
Je ne connaissais pas cette fonction matchMedia().
Une alternative est de tester la largeur de l'écran avec window.innerWidth mais on ne teste pas le type de media.
if(matchMedia('screen and (min-width: 42rem').matches) {
    ....
}

Une autre solution est d'utiliser les bonnes balises comme <video> et de jouer sur l'attribut autoplay. L'avantage serait de décaler le téléchargement des vidéos pour faire du "lazyloading"
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Merci pour l'info
Modifié par bazooka07 (20 Oct 2018 - 11:44)
Administrateur
bazooka07 a écrit :
Une alternative est de tester la largeur de l'écran avec window.innerWidth mais on ne teste pas le type de media.

En pratique, window.innerWidth va renvoyer des résultats aléatoires car il est interprété différemment selon les navigateurs mobiles et /ou l'orientation du device.
Un Media Query, par contre, ne sera pas aléatoire Smiley smile
Sujet clos
Aller à