Comment intégrer la vidéo dans une page Web HTML5 - Témoins

Vidéo: COURS COMPLET HTML ET CSS [50/71] - Insérer des vidéos en HTML 2025

L'élément vidéo est l'une des fonctionnalités les plus attendues de HTML5. Avec cette balise, vous pouvez intégrer des vidéos dans une page Web sans avoir besoin d'un plugin comme Flash. Le code suivant contient un message utile pour les utilisateurs qui ne peuvent pas voir la vidéo attendue:

Votre navigateur ne prend pas en charge la vidéo intégrée via HTML5.

L'étiquette elle-même est assez simple à comprendre, mais l'implémentation réelle est quelque peu complexe. HTML5 indique une balise vidéo, mais ne précise pas le format pris en charge par le navigateur et, bien sûr, tous les fabricants de navigateurs ont une opinion différente sur le format à prendre en charge. Les trois formats vidéo principaux en contention sont

Ogg / Theora / Vorbis: Ogg est un format conteneur qui utilise l'encodage Vorbis pour l'audio et l'encodage Theora pour la vidéo. Le système Ogg n'est pas encombré par des brevets connus. Il est pris en charge par Firefox, Chrome et Opera. (Il est également supporté par Safari si l'utilisateur a installé le plugin Vorbis sur QuickTime.) IE9 ne supporte pas ce format.
MP4 / H. 264 / AAC: La norme MP4 est un format conteneur utilisant H. 264 pour l'encodage vidéo et AAC pour l'encodage audio. Les trois formats sont soumis à des restrictions de brevet. Ce format est pris en charge par Safari, Chrome, iPhone, IE9 et Android.
WebM / VP8 / Vorbis: WebM est une nouvelle norme introduite par Google. Il utilise le format de codage vidéo VP8 et le codage audio Vorbis. La prise en charge de WebM est encore faible, mais la plupart des navigateurs indiquent que le format sera supporté dans les versions à venir.

Utilisez l'étiquette pour inclure tous les principaux formats vidéo. (Vous pouvez utiliser l'outil gratuit FFmpeg disponible pour toutes les plates-formes logicielles principales pour convertir vos vidéos.) En guise de solution de repli, utilisez l'étiquette à l'intérieur de votre tag pour charger la vidéo avec un lecteur Flash.

Vous pouvez utiliser JavaScript pour contrôler l'élément vidéo.