Il existe plusieurs façons d'insérer une vidéo dans une page Web. Les balises <embed>, <frame> et <object> étaient utilisées pour insérer des vidéos dans un document HTML. Mais elles sont désormais obsolètes, alors jetons un coup d'œil pour comprendre comment utiliser les balises <video> et <iframe> pour insérer une vidéo dans un document HTML.
Insérer des vidéos dans un document HTML avec la balise <video>
La balise <video> est ajoutée dans HTML5 avec son homologue, la balise <audio>. Avant la sortie de HTML5, une vidéo ne pouvait être lue que dans un navigateur avec un plug-in (comme un flash). L'élément HTML5 <video> spécifie une manière standard d'intégrer une vidéo dans une page Web. C'est-à-dire que la vidéo est identifiée en ajoutant l'URL de la vidéo à un attribut src. On peut l'utiliser pour intégrer des vidéos stokées dans un ordinateur ou hébergées par un site Web externe.
Pour l'utilisation de base, tout ce que nous devons faire dans un document HTML est d'ajouter l'URL de la vidéo à l'élément en utilisant l'élément <source> pour identifier l'URL de la vidéo et d'ajouter l'attribut de contrôle afin que les visiteurs du site Web puissent contrôler les options de la vidéo. Il est également important d'utiliser les attributs width et height pour définir la taille de la vidéo. Voyons un exemple simple.
Exemple d'insertion d'une vidéo en HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="video.mp4" type=video/mp4>
</video>
</body>
</html>
L'exécution du code ci-dessus affiche dans le navigateur le résultat suivant :
Au minimum, pour utiliser l'élément <video>, les attributs suivants doivent être utilisés :
- src : qui définit l'URL où est stocké/hébergé le contenu vidéo,
- type : qui définit le format du fichier,
- controls : cet attribut doit être spécifiés ou aucun élément visuel n'apparaîtra pour contrôler la lecture du contenu.
De plus, il existe plusieurs attributs facultatifs qui peuvent être utilisés pour influencer la façon dont le contenu vidéo est chargé. Ces attributs incluent :
- autoplay : qui spécifie que la vidéo commencera à jouer dès qu'elle sera prête,
- loop : qui spécifie que la vidéo recommencera à chaque fois qu'elle sera terminée,
- poster : qui sélectionne une image à afficher comme affiche de la vidéo jusqu'au début de la lecture,
- preload : qui indique comment l'auteur pense que la vidéo doit être chargée lors du chargement de la page.
Un autre point important à retenir est que tous les navigateurs modernes prennent en charge l'élément <video>.
Actuellement, la balise HTML5 <video> prend en charge 3 types de fichiers vidéo :
| Format | Type MIME |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |