Tag HTML <video>
Le tag de HTML <video> donne l’opportunité d’ajouter des fichier vidéo sur la page. Pour lire correctement les fichiers vidéo, vous devez définir plusieurs formats à la fois, car tous les navigateurs ne prennent pas en charge les fichiers vidéo de tous les formats.
Le chemin d’accès au fichier est spécifié à l’aide de l’attribut src ou élément <source> imbriqué. L’élément <video> peut contenir plusieurs éléments <source> à la fois, Chacun spécifie des variantes de la même vidéo avec différentes versions de codecs.
Le tag <video> peut aussi contenir un texte, qui sera affiché si le navigateur ne supporte pas le format du fichier vidéo.
Il existe actuellement 3 formats vidéo: MP4 / MPEG-4, OGG et WebM +. Pour compresser les données vidéo et les restaurer, des programmes spéciaux et des codecs vidéo sont utilisés. Un codec est une formule de fichier qui détermine le mode de "packaging" du contenu vidéo et de sa lecture.
Pour le fichier vidéo de format MPEG-4 on utilise le codec vidéo Н.264 et le codec audio ААС. Pour utiliser des codecs, on doit obtenir une licence.
Pour le fichier vidéo Ogg on utilise le codec vidéo Theora et le codec audio Vorbis avec un code ouvre.
Pour le fichier vidéo de format WebM + on utilise le codec vidéo VP8 et le codec audio Vorbis. Pour les utiliser, vous n'avez pas besoin de licence.
Syntaxe
Le tag de HTML <video> est apparié; le contenu est écrit entre les tags ouvrant (<video>) et fermant (</video>).
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4"/>
</video>
<p>Quelque information sur le vidéo</p>
</body>
</html>Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
<source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
</video>
<p>Quelque information sur le vidéo</p>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| autoplay | autoplay | Indique, que la vidéo démarrera automatiquement dès qu’elle sera prête. |
| controls | controls | Affiche les commandes intégrées pour les fichiers multimédia (bouton lecture / pause, bouton vous permettant de naviguer vers un clip spécifique, ainsi que le contrôle du volume). |
| height | pixels | Définit la hauteur du lecteur vidéo. |
| loop | loop | Indique que la lecture commencera à partir du début, chaque fois après la fin. |
| muted | muted | Indique que la vidéo sera jouée en silence. |
| poster | URL | Définit l'image affichée pendant le chargement de la vidéo ou jusqu'à ce que l'utilisateur appuie sur le bouton de lecture. |
| preload | auto metadata none |
Indique comment la vidéo doit être chargée lors du chargement de la page. L'attribut est ignoré si l'attribut autoplay est défini. |
| src | URL | Indique l’adresse URL du fichier vidéo. |
| width | pixels | Définit la largeur du lecteur vidéo. |
Le tag <video> supporte également les Attributs globaux et les Attributs d'événements.
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 4+ | 3.5+ | 4+ | 10.5+ |
Pratiquez vos connaissances
