Vidéo réactive CSS : optimisez la lecture vidéo sur différents appareils

Vidéo réactive CSS : l'optimisation de la lecture vidéo sur différents appareils nécessite des exemples de code spécifiques

Avec la popularité des appareils mobiles et l'augmentation de la bande passante du réseau, la vidéo est devenue un élément important sur Internet. Cependant, différents appareils, différentes tailles d'écran et résolutions rendent l'expérience vidéo différente sur différents appareils. Afin de mieux optimiser l'effet de lecture des vidéos sur différents appareils, la technologie vidéo réactive CSS a vu le jour.

La vidéo réactive CSS est implémentée sur la base de la technologie CSS3. Les styles CSS sont utilisés pour effectuer une mise en page et un rendu réactifs sur des appareils avec différentes tailles d'écran et résolutions, ainsi que sur des téléphones mobiles, des tablettes, des ordinateurs de bureau et d'autres terminaux, afin que la vidéo puisse être diffusée. être affiché sur différents appareils. Effet de lecture optimisé activé.

Voici un exemple de code simple :

Partie HTML :

<div class="video-container">
  <video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
  </video>
</div>

Partie CSS :

.video-container {
  position: relative;
  width: 100%;
}
.video-container video {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .video-container video {
    width: 50%;
    height: auto;
  }
}

Explication :

Tout d'abord, dans la partie HTML, nous encapsulons la vidéo dans une classe nommée "video-container" code>< ;div> et définissez sa largeur sur 100 %. Dans la balise <video></video>, nous fournissons des fichiers source vidéo dans trois formats différents.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!