Qu'est-ce que la vidéo HTML5?
La spécification HTML5 introduit l'élément vidéo dans le but de la lecture de vidéos, en remplaçant partiellement l'élément d'objet.
HTML5 vidéo est destiné par ses créateurs pour devenir la nouvelle façon standard pour afficher la vidéo sur le Web, au lieu de la norme précédente de fait d'utiliser le plug-in Adobe Flash propriétaire, bien que l'adoption rapide a été entravée par le manque d'accord sur qui formats de codage vidéo et les formats de codage audio doivent être pris en charge dans les navigateurs Web.
Lecture de vidéos au format HTML
Avant HTML5, il n'y avait pas de norme pour montrer des vidéos sur une page Web.
Avant HTML5, les vidéos ne peuvent être lus avec un plug-in (like flash) .
Le HTML5 <video> élément spécifie une méthode standard pour intégrer une vidéo dans une page Web.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la <video> élément.
| Élément | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Le code HTML <video> Element
Pour afficher une vidéo en HTML, utilisez la <video> élément:
Exemple
<video width="320" height="240" controls>
<source src="/html/movie.mp4" type="video/mp4">
<source src="/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Essayez vous - même » Comment ça marche
Le controls d' attributs ajoute des contrôles vidéo, comme lecture, pause, et le volume.
Il est une bonne idée d'inclure toujours la width et la height des attributs.
Si ne sont pas réglées hauteur et la largeur, le navigateur ne connaît pas la taille de la vidéo. L'effet sera que la page va changer (or flicker) pendant le chargement vidéo.
Texte entre la <video> et </video> balises affiche uniquement dans les navigateurs qui ne prennent pas en charge la <video> élément.
Plusieurs <source> éléments peuvent créer un lien vers différents fichiers vidéo. Le navigateur utilise le premier format reconnu.
HTML <video> Autoplay
Pour démarrer une vidéo utiliser automatiquement l' autoplay attribut:
Exemple
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Essayez vous - même » Le autoplay attribut ne fonctionne pas dans les appareils mobiles comme l' iPad et l' iPhone.
HTML vidéo - Prise en charge du navigateur
À l' heure actuelle, il existe 3 formats vidéo pris en charge pour la <video> élément: MP4, WebM et Ogg:
| Navigateur | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
HTML vidéo - Types de support
| Format de fichier | Type de support |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML vidéo - Méthodes, propriétés et événements
HTML5 définit les méthodes DOM, les propriétés et événements pour la <video> élément.
Cela vous permet de charger, lire et mettre en pause des vidéos, ainsi que la durée et la mise en volume.
Il y a aussi des événements DOM qui peuvent vous avertir quand une vidéo commence à jouer, est mis en pause, etc.
Pour une référence DOM complète, consultez notre DOM HTML5 Audio / Vidéo Référence .
HTML5 Video Tags
| Marque | La description |
|---|---|
| <video> | Définit une vidéo ou un film |
| <source> | Définit plusieurs ressources multimédias pour les éléments multimédias, tels que <video> et <audio> |
| <track> | Définit des pistes de texte dans les lecteurs multimédias |