Ajuster automatiquement l'affichage vidéo en fonction de la taille du support

Question

Je prévois de diffuser une vidéo d'arrière-plan sur une page Web et j'ai différents fichiers vidéo pour mobile et ordinateur. J&Lt ;/p> ;

<lecture automatique de la vidéo en boucle, lecture en ligne muette>
  <source src="desktop.mp4" type="video/mp4">
  <source src="desktop.webm" type="video/webm">
  <img src="fallback.jpg" >
</vidéo>

J'ai vu une solution pour les requêtes multimédias, mais d'après ce que je comprends, elle est en dehors des spécifications et n'est pas prise en charge par iOS/Safari.

Answer 1

Vous pouvez utiliser des requêtes multimédias pour utiliser src ou un autre contenu en fonction de sa définition. Consultez cet article sur CSS-Tricks : https://css-tricks.com/video-source-by-screen-size/ Cependant, il semble que cette fonctionnalité ne soit pas stable sur tous les navigateurs.

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

Comme mentionné dans l'article, une autre méthode consiste à utiliser JavaScript pour modifier le src de la vidéo en fonction de la taille de la fenêtre d'affichage.