HTML5 Vidéo
De nombreux sites web utilisent la vidéo. HTML5 fournit une norme pour l'affichage de vidéos.
Vérifiez si votre navigateur prend en charge la vidéo HTML5 :
Vidéo sur les pages web
Jusqu'à présent, il n'existait toujours pas de norme pour l'affichage de vidéos sur les pages web.
Aujourd'hui, la plupart des vidéos sont affichées via des plugins (tels que Flash). Cependant, tous les navigateurs n'ont pas les mêmes plugins.
HTML5 spécifie une méthode standard pour inclure une vidéo via l'élément video.
Prise en charge des navigateurs
Internet Explorer 9+, Firefox, Opera, Chrome et Safari prennent en charge l'élément <video>.
Remarque :Internet Explorer 8 ou les versions antérieures d'IE ne prennent pas en charge l'élément <video>.
HTML5 Vidéo - Fonctionnement
Pour afficher une vidéo en HTML5, il vous suffit de :
Exemples
Essayez-le vous-même »
L'élément <video> fournit des commandes de lecture, pause et volume pour contrôler la vidéo.
L'élément <video> fournit également des attributs width et height pour contrôler la taille de la vidéo. Si la hauteur et la largeur sont définies, l'espace vidéo requis sera réservé lors du chargement de la page. Si ces attributs ne sont pas définis, le navigateur ne connaît pas la taille de la vidéo, il ne peut donc pas réserver d'espace spécifique pendant le chargement, et la page changera en fonction de la taille d'origine de la vidéo.
Le contenu inséré entre les balises <video> et </video> est fourni pour les navigateurs qui ne prennent pas en charge l'élément vidéo.
L'élément <video> prend en charge plusieurs éléments <source>. L'élément <source> peut lier différents fichiers vidéo. Le navigateur utilisera le premier format reconnu :
Formats vidéo et prise en charge des navigateurs
Actuellement, l'élément <video> prend en charge trois formats vidéo : MP4, WebM et Ogg :
| Navigateur | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | OUI | NON | NON |
| Chrome | OUI | OUI | OUI |
| Firefox | OUI | OUI | OUI |
| Safari | OUI | NON | NON |
| Opera | OUI (à partir d'Opera 25) | OUI | OUI |
- MP4 = fichiers MPEG 4 avec encodage vidéo H.264 et encodage audio AAC
- WebM = fichiers WebM avec encodage vidéo VP8 et encodage audio Vorbis
- Ogg = fichiers Ogg avec encodage vidéo Theora et encodage audio Vorbis
Format vidéo
| Format | Type MIME |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 <video> - Contrôle à l'aide du DOM
Les éléments HTML5 <video> et <audio> possèdent également des méthodes, des propriétés et des événements.
Les méthodes, propriétés et événements des éléments <video> et <audio> peuvent être contrôlés à l'aide de JavaScript.
Les méthodes servent à lire, mettre en pause et charger, etc. Les propriétés (comme la durée, le volume, etc.) peuvent être lues ou définies. Les événements DOM peuvent vous notifier, par exemple, lorsque l'élément <video> commence à lire, est mis en pause, s'est arrêté, etc.
Les méthodes simples de l'exemple montrent comment utiliser l'élément <video>, lire et définir des propriétés, et comment appeler des méthodes.
Exemple 1
Créez des contrôles simples de lecture/pause et de redimensionnement pour la vidéo :
L'exemple ci-dessus appelle deux méthodes : play() et pause(). Il utilise également deux propriétés : paused et width.
Essayez-le vous-même »Pour plus de références, veuillez consulterManuel de référence DOM Audio/Vidéo HTML5。
Balises vidéo HTML5
| Balise | Description |
|---|---|
| <video> | Définit une vidéo |
| <source> | Définit plusieurs ressources multimédias, telles que <video> et <audio> |
| <track> | Définit les pistes de texte dans le lecteur multimédia |