23 janvier 2014
Category:
HTML
Comments: 0

HTML5 Video : Explication et Mini tuto

De nombreux sites récents affichent de la vidéo dés leur page d’accueil, et souvent à l’aide du HTML5 pour les afficher.

La Vidéo sur le Web
Avant l’apparition du HTML5, aucune norme n’existait pour afficher des vidéos / films sur une page web. On ne pouvait lire les vidéos qu’avec l’aide d’un plug-in extérieur, comme flash player par exemple. Il fallait alors commencer par installer le plug-in en fonction du site, si il était compatible avec sa version etc …

Le HTML5 a permit de définir une nouvelle norme et un nouvel élément qui permets de standardiser l’intégration d’une vidéo ou d’un film dans une page web, cet élément c’est : . Cette balise est supportée par la quasi totalité des navigateurs : Internet Explorer (à partir de la version 9), Firefox Opera Google Chrome Safari …

Pour afficher une vidéo en HTML5 sur votre site, voici le petit bout de code qui suffisant :

Vous pouvez également ajouter des contrôles sur votre vidéo avec les boutons lecture, pause, volume …
On notera qu’il est préférable de définir une taille par défaut avec les éléments widthet height. En définissant ces paramètres, l’espace requis pour afficher votre vidéo sera réservé dés le chargement de la page web. Si vous ne définissez pas ces 2 éléments, alors le navigateur de la personne qui affiche votre site internet attribuera une taille qui risque de faire sauter la mise en page de votre site.

Evitez de supprimer l’avertissement « Votre navigateur ne supporte pas l’element », que vous pouvez remplacer par le texte que vous souhaitez, mais qui doit afficher un avertissement pour les navigateurs qui ne supportent pas la balise

L’élément source permets de multiples sources pour votre vidéo, chaque navigateur ayant des spécificités différentes, ce sera la première source qui sera lu par défaut, puis la seconde …
Les formats de vidéos actuellement reconnus par l’élement sources sont: MP4, WebM, et Ogg.

NavigateurMP4WebMOgg
Internet ExplorerOUINONNON
ChromeOUIOUIOUI
Firefox (+21.0)OUIOUIOUI
SafariOUINONNON
OperaNONOUIOUI

Un Exemple :

Le code pour afficher cette vidéo



Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *