1497 sujets

Web Mobile et responsive web design

Vidéo srcset ?

Bonjour,
Existe-t-il un équivalent "srcset" pour les vidéos comme ça existe pour les images ?
salut,
avec les mediaqueries, par exemple:


.video1 {display: block;}
.video2 {display: none;}

@media screen and (min-width: 1024px) {
.video1 {display: none;}
.video2 {display: block;}
}




<div>
<video src="video1.mp4" class="video1" type="video/mp4" controls></video>
<video src="video2.mp4" class="video2" type="video/mp4" controls></video>
</div>
Bonjour,
@drphilgood,
il n'y a pas autre chose que display:none; ? Je n'ai jamais caché des vidéos ou des images avec cette méthode. Pourquoi cacher une vidéo suivant les @media ?
Voilà ce que j'ai mis sur l'un de mes sites et tout est OK en mobile.
<video controls="controls" data-volume="1" preload="none" poster="Images/Acacia-480-C.jpg" width="680" height="360">
  <source src="https://CDN-mavideo.m4v" type="video/mp4">
  <track src="Track-2.vtt" kind="captions" srclang="fr" label="frensh_captions">

La vidéo est dans une class, ce qui en mode mobile me permet d'ajuster. La vidéo prend elle-même sa place, inutile d'ajouter une "div".
@korom,
poster est là uniquement pour imposer une image autre que la première image DE la vidéo. Et "track" est là pour ajouter des commentaires sur la vidéo, en synchro avec le défilement.
Bon, je n'ai pas la science infuse, j'attends toujours des conseils, mais ça fonctionne parfaitement chez moi, sans display:none et autres div.
Modifié par Bongota (08 May 2026 - 11:30)
Bonjour,

Cette question est très intéressante pour moi car elle touche à la notion de réseau et de gestion des ressources. Je résume à ma manière ce qui a été dit ici :

Pour une question sur l'affichage/masquage de vidéos, deux solutions se profilent ici :
- soit via srcset dans l'élément <source>
- soit via media queries et display:<non/block>
- la gestion du responsive via CSS a été évoquée

Je commence par display: none. Le problème est que le comportement reste à la discrétion des navigateurs :
- Chrome ne charge pas en général mais... ça dépend (de quoi ? bonne question...),
- Firefox charge tout (y compris les métadonnées),
- Safari... iOS ne charge rien, même si option preload, comme tout le monde le sait, la version desktop se comportera comme Chrome.

Venons-en maintenant à srcset dans l'élément <source>. Cette solution serait à priori séduisante, mais la page MDN déjà signalée par Raphaël nous signale que cet attribut n'est pas autorisé dans le contexte qui nous occupe :
"MDN, Élément HTML <source>" a écrit :
Définit une liste, séparée par des virgules, d'une ou plusieurs URL d'images et de leurs descripteurs. Obligatoire si le parent de <source> est <picture>. Interdit si le parent est <audio> ou <video>.

Cette limitation est dommageable, elle devrait être traitée dans les années à venir. En attendant, quelle serait la solution la plus idiomatique ? La même page MDN nous répond, un attribut media dans l'élément <source>. Exemple tiré de la page :
<video controls>
  <source src="foo-large.webm" media="(width >= 800px)" />
  <source src="foo.webm" />
  I'm sorry; your browser doesn't support HTML video.
</video>

Et ATTENTION (et horreur pour moi) : cet exemple crucial est exposé uniquement dans la page MDN en anglais ! En français nous avons bien droit à la mise en garde, mais pas à l'exemple qui focalise notre attention.

Maintenant que nous nous sommes intéressé à cette question secondaire, il est temps de se poser la question principale soulevée par Bongota : Pour quel usage ?
1. S'il s'agit effectivement d'optimiser le ratio en fonction du terminal utilisé (ex: 16/9 vs 9/16), alors cet usage est le bon.
2. Si l'on cherche a augmenter/réduire la qualité d'une vidéo selon la taille de l'écran, le Graal ultime sera srcset lorsqu'il sera supporté dans ce contexte (et il fera bien plus que gérer la résolution de l'écran, il pourra estimer la latence réseau), en attendant qu'il soit disponible on peut appliquer un pansement avec l'attribut media.
3. S'il s'agit de rendre responsive une vidéo, le CSS reste la solution unique et incontournable.

Par exemple, dans un CSS de base :

audio,
video,
canvas {
  /* Plutôt que max-width, car on impose à la vidéo */
  /* de s'aligner sur la grille du template : */
  width: 100%;
}

audio,
video {
  outline: none;
}

Bonus, si l'on veut garder la maîtrise sur le ratio afin d'éviter un décalage d'une vidéo à une autre (ce qui ne semble pas être le cas ici) :

video {
  height: auto;
  aspect-ratio: 16/9; /* pour mettre tout le monde d'accord */
  object-fit: cover;
}

Merci pour cette question stimulante.
Modifié par Olivier C (12 May 2026 - 16:31)
Discussion intéressante. Pour ma part, j'ai choisi le css pour gérer tout ça avec une class qui entoure la balise video (que j'ai nommé "slideshow" mais ce n'est pas un slide).
Desktop :
.slideshow {
    	display:block;
    	position:relative;
    	padding:0;
    	max-width:62%;/Je ne veux pas que la vidéo occupe toute la page.
    	max-height:60vh; /Pour des raison personnelles, j'ai limité la hauteur ici.
    	margin:1rem auto; /Oui, du mélange de %, rem et de vh, mais ça dérange qui ? 
    	overflow:hidden;
    	background-repeat:no-repeat;}
Mobile :
.slideshow {
    	display:block;
    	position:relative;
    	padding:0;
    	width:100%;
    	max-width:95%;/ Pour ne pas que la vidéo colle trop les bords du mobile.
    	aspect-ratio:16 / 9; /Comme tu le précise, Olivier.   	
    	margin:1rem auto;    
    	overflow:hidden;
    	background-repeat:no-repeat;}
Et en haut du css :
img, object, embed, canvas, video, audio, picture {
       	max-width:100%;
       	height:auto;
       	border:0;}


Finalement et pour une question de performances, le seul point à considérer est l'image poster de la vidéo "Images/Acacia-480-C.jpg" width="680" height="360". Je n'ai même pas fait appel à src source. En version mobile avec le lazyloading, les perfs ne sont pas mauvaises. Alors qu'il y a deux vidéos et cinq carrousels sur la page d'accueil. En mode desktop, elles sont au top.
Bon, chacun sa solution. Le fait est qu'à plusieurs points de vue, la vidéo n'est pas facile à gérer sur un site. Tout ça pourrait être amélioré pour tenir compte d'autres paramètres, mais je n'ai pas le courage de m'y mettre.
Bonjour,
Oui, ce n'est pas tant le fait que la vidéo soit responsive mais j'aimerai pouvoir afficher une vidéo différente en fonction de la définition.
Dans ce style :

<video>
    <source
        srcset="/video/video-header-web-480.mp4  480w,
            /video/video-header-web-920.mp4  920w,
            /video/video-header-web-1200.mp4  1200w,"
        type="video/mp4"
    />
</video>

Modifié par korom (11 May 2026 - 10:27)
Modérateur
Bonjour/bonsoir,

Je crois que pour le moment il n'y aurait que javascript avec matchMedia() qui pourrait t'aider.

=https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia a écrit :

La méthode matchMedia() de l'interface Window retourne un nouvel objet MediaQueryList qui peut ensuite être utilisé pour déterminer si le document correspond à la chaîne de caractères de la requête média, ainsi que pour surveiller le document afin de détecter quand il correspond (ou cesse de correspondre) à cette requête média.


Voici un example au hasard sur codepen qui verifie la largeur du document au chargement uniquement.: 
const mQLs = [
  window.matchMedia(`(max-width: 854px)`),
  window.matchMedia(`(max-width: 481px)`)
];

function vidSrc(mQL) {
 const vid = document.querySelector("video");
 let url;
 if (mQLs[0].matches) {
  url = "http://techslides.com/demos/sample-videos/small.mp4";
 }
 if (mQLs[1].matches) {
  url = "https://html5demos.com/assets/dizzy.mp4";
 }
 if (!mQLs[0].matches && !mQLs[1].matches) {
  url = "http://media.w3.org/2010/05/sintel/trailer.mp4";
 }
 vid.src = url;
 vid.load();
 console.log(url)
}

for (let i = 0; i < mQLs.length; i++) {
  vidSrc(mQLs[i]);
}

https://codepen.io/01/pen/GLxyqL

cdt
J'ai mal recopié plus haut, je redonne la soluce de MDN (attribut media) :
<video controls>
  <source src="foo-large.webm" media="(width >= 800px)" />
  <source src="foo.webm" />
  I'm sorry; your browser doesn't support HTML video.
</video>

Modifié par Olivier C (12 May 2026 - 16:34)
Prévenir un modérateur
Répondre au sujet
Aller à