Comment ne pas charger une vidéo sur mobile ?

Salut,

Comment feriez-vous pour ne pas charger une vidéo quand le visiteur est sur mobile ? Cette vidéo sert de background en autoplay, du coup pas de support sur iOS et autre mobiles.

Est-il possible de détecter ces navigateurs avec des commentaires conditionnels HTML ?
J'utilise souvent Modernizr pour détecter des features supportés par le navigateur, cependant je ne peux pas l'utiliser ici car la détection arriverait après le chargement du DOM et la vidéo aurait déjà été chargée.
Inutile également d'utiliser des media queries car, idem que le cas précédent, la vidéo serait aussi chargée.
Savez-vous si les entêtes HTTP (que je peux récupérer en PHP) contiennent des infos suffisantes pour détecter le navigateur précisément ?

Merci pour vos réponses.
Matthieu

Salut,

Les media queries peuvent t'aider (tout dépend du contexte). Sinon ce(s) script(s) peuvent t'aider :
detectmobilebrowsers.

Je connais pas bien Modernizr (pas du tout accro à cette librairie). De mémoire, tu peux détecter le mobile si le device utilise l'event touch. Un truc du style :

if ( Modernizr.touch ) {
   // etc.
} else {
   // etc.
}

Modifié par niuxe (22 Sep 2015 - 10:32)

Hello,

Tu peux éventuellement faire ce genre de détection en JS :

if (window.matchMedia("(min-­width: 640px)").matches) {
/* La largeur de fenêtre est au-­?moins 640px, je charge la vidéo */
} else {
/* La largeur est inférieure à 640px, je ne charge pas la vidéo */
}

Les critères de matchMedia sont les mêmes que les media queries CSS, donc tu peux aussi détecter la résolution en dpi ou en dppx par exemple si tu veux cibler les écrans HD.
Modifié par Raphael (22 Sep 2015 - 13:46)

Merci à vous 2,

niuxe a écrit :
Les media queries peuvent t'aider (tout dépend du contexte).

Je ne peux pas utiliser les media queries, je ne veux charger la vidéo...

niuxe a écrit :
Sinon ce(s) script(s) peuvent t'aider :
detectmobilebrowsers.

Ça c'est un bon lien et du coup je vais sans doute utiliser la (très complète) expression rationnelle de détection du 'user agent' envoyé par le navigateur au serveur.

Raphael a écrit :
Tu peux éventuellement faire ce genre de détection en JS :

if (window.matchMedia("(min-­?width: 640px)").matches) {
/* La largeur de fenêtre est au-­?moins 640px, je charge la vidéo */
} else {
/* La largeur est inférieure à 640px, je ne charge pas la vidéo */
}

OK, mais je ne voudrais pas filtrer sur la taille de l'écran, mais bien sur des navigateurs ne supportant pas l'autoplay de la balise vidéo et qui la lise dans le lecteur par défaut du mobile (ex: ios).
Mais comment je peux insérer du html dans un if(){} en JS ?