Comment utiliser la balise vidéo en HTML5

La balise vidéo en HTML5 est utilisée pour lire des fichiers vidéo. Dans la balise vidéo, nous pouvons définir la largeur et la hauteur de la fenêtre, la lecture automatique de la vidéo, la lecture en boucle et l'image de couverture de la vidéo, etc.

HTML5 est la prochaine La première génération de HTML a ajouté de nombreuses nouvelles balises, qui ont implémenté de nombreuses nouvelles fonctions. Cela réduit également le besoin de plug-ins externes et gère mieux les erreurs. Par exemple, la balise vidéo en HTML5 peut efficacement obtenir l'effet de lecture de vidéos sur la page. Ensuite, dans l'article, nous vous présenterons en détail comment utiliser la balise vidéo, qui a un certain effet de référence. J'espère qu'elle sera utile à tout le monde

. [Cours recommandé : Tutoriel HTML5】

Utilisation détaillée de la balise vidéo HTML5

est utilisée pour lire des fichiers vidéo, tels que des films ou d'autres flux vidéo. Vous pouvez placer du contenu textuel entre la balise de début et la balise de fin. L'avantage est que certains navigateurs de versions inférieures peuvent afficher des informations indiquant que la balise n'est pas prise en charge

Exemple :

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

Définir la largeur et la hauteur

Nous pouvons personnaliser la largeur et la hauteur de cette vidéo pour changer la taille de sa fenêtre

<video src="movie01.mp4" controls style="width:400px;height:300px;"></video>

Effet Image :

Lecture automatique

Nous pouvons définir les propriétés pour activer la lecture automatique pour le vidéo

(1) Utilisez l'attribut de lecture automatique pour permettre au navigateur de lire le fichier vidéo immédiatement après le chargement

<video width="400"    style="max-width:90%" controls autoplay>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Nous pouvons également désactiver le son pendant statut de lecture automatique, le but est de couper la vidéo lors de sa lecture automatique, et on peut également activer le son en cliquant sur le haut-parleur du lecteur

<video width="400"    style="max-width:90%" controls autoplay muted>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Rendu :

Lecture en boucle
Nous pouvons utiliser l'attribut loop pour boucler la vidéo du début à la fin. Le code est le suivant

<video width="400"    style="max-width:90%" controls loop>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Précharger les fichiers multimédias

Définissez différentes valeurs d'attribut​​dans l'attribut de préchargement pour indiquer au navigateur comment charger un média file :

auto : Indique que le navigateur télécharge automatiquement l'intégralité du fichier

aucun : Indique que le navigateur n'a pas besoin de télécharger le fichier à l'avance

métadonnées : Indique que le navigateur obtient les données au début du premier bloc du fichier vidéo, ce qui est suffisant pour déterminer certaines informations de base (telles que la durée totale de la vidéo, la première image d'image, etc.)

<video width="400" height="300" controls preload="auto">
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Définir l'image de couverture de la vidéo

Grâce à l'attribut poster Vous pouvez définir l'image de couverture de la vidéo Le navigateur utilisera cette image dans les trois situations suivantes :

<🎜. > (1) La première image de la vidéo n'a pas été chargée

(2) Définissez l'attribut de préchargement sur aucun

(3) Le fichier vidéo spécifié n'a pas été trouvé

<video width="400" height="300" controls preload="none" poster="images/5.jpg">
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Rendu :

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cet article pourra aider tout le monde à apprendre. pour utiliser la balise vidéo.

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!