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.

As tu essayé de cacher par défaut la <div> qui contient la vidéo et de ne l'afficher que lorque l'écran est suffisamment grand.
Je n'ai pas testé mais c'est la première idée qui vient.

Sinon essaie de détecter en Javascript si tu es sur un mobile avec le lien suivant :
https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery
il doit bien y avoir la solution parmi les 50 réponses.

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.

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

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.

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
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)

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