• Introduction
• Introduction au HTML5
• Présentation
• Prise en main
• Utiliser des balises
• Utiliser des attributs
• Structurer un document avec HTML5
• Le doctype : définir l'utilisation du HTML
• L'en-tête
• Structure de l'information
• Organiser le contenu
• Ecrire du texte
• Des caractères spéciaux
• Listes
• Tableaux
• Naviguer grâce aux liens
• Le multimédia
• Images
• Video
• Audio
• Sous-titrage HTML
• Fallbacks
• Interface avec l'utilisateur
• Les formulaires
• Les balises d'interface
• Annexes
• Différences en xHTML et HTML5
• Glossaire
• test

Vidéo en HTML5

L'insertion de vidéo est assez simple en HTML5. C'est même l'une des principales nouveautés qui libèrent de Flash et de Youtube, par rapport à XHTML. Surtout ils permettent de se dégager des boîtes noires de type embed ou object qui étaient jusqu'alors utilisées.Mais tout n'est pas aussi simple qu'on souhaiterait le voir, en particulier grâce aux supports aléatoires selon les navigateurs et les spécifications de codecs, donc spécifiques à la vidéo elle-même, en général méconnus.

Pour insérer une vidéo, codez par exemple :

<video src="#/video/sintel_trailer-480p.mp4" controls width="320" height="240"/> 

L'élément video crée la zone. Les attributs width et height permettent de définir une dimension d'affichage. Enfin controls permet d'afficher la barre de navigation dans la vidéo.

La vidéo utilisée ci-dessus est celle de Sintel, court-métrage réalisé avec Blender. Vous trouverez de nombreux exemples sur internet de vidéos dans différents formats dont :

• http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5/
• http://support.apple.com/kb/ht1425

Formats vidéo supportés 

Malheureusement, aucun navigateur ne supporte tous les formats vidéo. Il est donc important de bien évaluer le besoin de vidéo dans un site avant de les mettre en œuvre.

Une seconde notation incluant l'élément source à la place de l'attribut src permet de définir plusieurs sources pour la même vidéo et ainsi laisser le logiciel de lecture choisir le format le plus approprié pour lui. Attention cependant, car cela alourdit évidemment d'autant les fichiers HTML, mais pas nécessairement le temps de chargement, car le navigateur fera son propre choix et ne téléchargera que la version qu'il préfère parmi les sources mentionnées. Il n'en reste pas moins que l'espace d'hébergement nécessaire est alors largement accru. 

<video id="video3" controls width="320" height="240">
     <source src="video/sintel_trailer-480p.mp4" type="video/mp4"/>
     <source src="video/sintel_trailer-480p.webm" type="video/webm"/>
     <source src="video/sintel_trailer-480p.ogv" type="video/ogg"/>
</video>        

Notons que width définit la largeur de la fenêtre vidéo et height sa hauteur.

Les principaux formats sont donc :

theora (ogg ou ogv)

premier des formats reconnus en HTML5. Il offre une bonne compression et est souvent conseillé en remplacement du Mpeg. Depuis sa création, il est libre et gratuit. Internet Explorer et safari trainent à l'implémenter.

WebM

format développé et promu en partie par Google, il est de très bonne facture, libre et gratuit. Internet Explorer et safari trainent à l'implémenter.

H.264-MP4

Le codec H.264 du Mpeg4 est largement utilisé. Il n'en reste pas moins soumis à des brevets et sa pérennité s'avère donc compliquée dans ce contexte. Une version libre mise à disposition par Cisco peut être utilisée dans certains pays, mais cela complique éminemment la disponibilité des vidéo H.264 placée dans un site. Si ce codec est de bonne qualité, les risques sont donc inhérents à son statut juridique particulier qui a d'ailleurs conduit Firefox et Opera à ne l'implémenter que tardivement et partiellement.

Pour vérifier le support des différents formats par les navigateurs, nous vous conseillons de visiter http://caniuse.com/#search=video.

Contrôler la vidéo

Certains attributs facilitent grandement la façon dont le site et l'utilisateur peuvent interagir.

controls

Affiche les barres de navigation dans la vidéo avec entre autres une barre temporelle et un bouton lecture/pause. L'implementation des contrôles est propre à chaque navigateur. Les boutons disponibles ainsi que leur aspect peut donc différer.

autoplay

permet de lancer la video dès le chargement de la page. Cette pratique est largement utilisée dans les publicités, mais cependant moins pour le contenu. On préférera en effet en général que l'utilisateur lance lui-même la vidéo, assurance qu'il est disponible pour en profiter pleinement.

loop

permet de faire tourner en boucle la vidéo. Très utile aussi dans les cas d'une approche publicitaire, mais trop distrayant si la vidéo accompagne un article. Il faut laisser à l'utilisateur pouvoir continuer tranquillement sa lecture. (il semble à ce jour que la boucle fonctionne dans Firefox mais pas dans Chrome).

muted 

assurera que la vidéo, en particulier en autoplay, sera lancée sans le son, silencieusement. Il appartiendra alors au visiteur d'activer le son s'il le désire. Il s'agit d'une pratique non intrusive et respectueuse.

Gérer l'attente de la vidéo

L'attente de la vidéo se définit par deux attributs principaux : preload et poster.

L'attribut poster de l'élément video permet de spécifier l'adresse d'une image, en général extraite du film, et qui servira d'illustration statique (en pause) en attendant le déclenchement de la lecture. Il peut ainsi être comparé à l'attribut src de la balise img.  Cela est particulièrement utile dans le cas des films commençant pas une image noire.

Dans le cas, où aucun poster n'est défini ou qu'il est erroné ou introuvable, les navigateurs sont libres de gérer le remplacement. Cela peut selon les cas être un fond noir ou la première image du film en attente de lancement.

<video width="300" controls poster="http://peach.blender.org/wp-content/uploads/title_anouncement.jpg">
   <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
   <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm" />
   <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
</video>

Il est implicite que le contenu du poster est un contenu représentatif de la vidéo et qu'il n'a pas de raison d'être si la vidéo est en autoplay.

 Dans l'exemple présent, nous avons choisi une illustration de Big Buck Bunny qui n'a rien à voir avec la vidéo affichée (cf plus haut) de manière à bien montrer la différence.

L'attribut preload permettra de charger la vidéo en arrière-plan, juste après le chargement global de l'ensemble de la page. Cet attribut n'a pas de raison d'être dans le cas d'une vidéo en autoplay. Dans les autres cas, elle permettra un gain éventuel de fluidité pour les personnes disposant d'une bande passante assez faible étant donné le temps nécessaire à chargement des fichiers vidéo en général assez lourds. Cela peut le cas échéant minimiser les saccades voire les pauses intempestives et désagréables pour l'utilisateur. En revanche, le preload chargeant le fichier vidéo occupe la bande passante et peut de fait ralentir la navigation du visiteur s'il visite plusieurs sites ou pages de votre site simultanément, voire aussi ralentir les personnes partageant la même connexion internet.