Un examen plus approfondi de l'élément vidéo en HTML

Explication détaillée de la balise vidéo en HTML

La balise vidéo en HTML5 est une balise utilisée pour lire des vidéos sur des pages Web. Il peut restituer des vidéos en utilisant différents formats, tels que MP4, WebM, Ogg, etc. Dans cet article, nous présenterons en détail l’utilisation de la balise vidéo et fournirons des exemples de code spécifiques.

1. Structure de base
   Voici la structure de base de la balise vidéo :

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

Dans l'exemple ci-dessus, nous avons spécifié le chemin d'accès au fichier vidéo (video.mp4) et ajouté un attribut de contrôle pour afficher les contrôles au-dessus de la vidéo. Boutons (lecture, pause, réglage du volume, etc.). Si le navigateur ne prend pas en charge la balise vidéo, un contenu de secours sera affiché (votre navigateur ne prend pas en charge la balise vidéo).

2. Explication détaillée des attributs
   2.1 Attribut src
   L'attribut src est utilisé pour spécifier le chemin du fichier vidéo. Vous pouvez utiliser des chemins relatifs ou absolus. Exemple :

<video src="video.mp4">
</video>

2.2 Attribut Controls
L'attribut Controls est utilisé pour afficher les boutons de contrôle de la vidéo. Exemple :

<video src="video.mp4" controls>
</video>

2.3 Attributs de largeur et de hauteur
Utilisez les attributs de largeur et de hauteur pour personnaliser la largeur et la hauteur de la vidéo. Exemple :

<video src="video.mp4" width="640" height="360">
</video>

2.4 attribut de lecture automatique
Utilisez l'attribut de lecture automatique pour configurer la lecture automatique de la vidéo. Exemple :

<video src="video.mp4" autoplay>
</video>

Attribut de boucle 2,5
Utilisez l'attribut de boucle pour définir la vidéo en boucle. Exemple :

<video src="video.mp4" loop>
</video>

2.6 attribut muet
Utilisez l'attribut muet pour que la vidéo soit lue en mode silencieux. Exemple :

<video src="video.mp4" muted>
</video>

3. Formats vidéo pris en charge
   Bien que la balise vidéo prenne en charge plusieurs formats vidéo, les formats pris en charge par les différents navigateurs peuvent varier. Voici quelques formats vidéo couramment utilisés et la prise en charge correspondante des navigateurs :

• MP4 : pris en charge par la plupart des navigateurs
• WebM : pris en charge par la plupart des navigateurs modernes
• Ogg : pris en charge par Firefox, Chrome et d'autres navigateurs

Afin de Pour garantir que la vidéo peut être lue correctement sur différentes plates-formes et navigateurs, il est préférable de fournir des sources vidéo dans plusieurs formats en même temps :

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

4. Sous-titres intégrés
   En utilisant la balise de piste, nous pouvons intégrer le fichier de sous-titres dans la vidéo étiqueter. Exemple :

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" label="English" srclang="en">
  Your browser does not support the video tag.
</video>

Dans l'exemple ci-dessus, nous avons intégré un fichier de sous-titres (subtitles.vtt) à l'aide de la balise track et ajouté quelques paramètres associés (kind, label, srclang).

Résumé :
Avec la balise vidéo, nous pouvons facilement intégrer et lire des vidéos sur des pages Web. Nous pouvons utiliser différents attributs pour contrôler la lecture automatique, la boucle, la mise en sourdine et d'autres comportements de la vidéo. Pour garantir la compatibilité vidéo, il est préférable de fournir des sources vidéo dans plusieurs formats en même temps. De plus, nous pouvons également intégrer des fichiers de sous-titres à l’aide de la balise track.

Grâce à l'introduction de cet article, je pense que les lecteurs ont une compréhension plus profonde de la balise vidéo et peuvent l'appliquer efficacement dans leurs propres pages Web. J'espère que cet article vous sera utile !

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!