Comment intégrer sans problèmes une vidéo via HTML5

HTML5 Logo

Je suis sûr que nombres d’entre vous ce sont déjà cassé la tête en essayant d’intégrer une vidéo dans une page web en utilisant le HTML5 via la balise <video>. Vous écrivez vos quelques lignes et là, première constatation : je n’ai qu’un navigateur qui sait lire ma vidéo (et généralement c’est chrome qui se débrouille le mieux là-dedans). Alors ceci est pour vous. Et pour les autres, ne vous tracassez pas,  je vais tout (ou presque) expliquer.

HTML5 Rocks

A)Le code

Cette partie est la plus simple, la plus courte, …

Pour intégrer une vidéo, il faut trois choses: un cerveau, une main (au minimum) et une vidéo uploadée sur un serveur web.

Dans les faits, on utilise la balise <video> … </video>. A l’intérieur, on va indiquer la ou les sources (les vidéos) sous formes : <source src= « … » type= « … » />.

Dans src on va indiquer le chemin de la vidéo (URL, chemin relatif ou absolu).

Dans type on va mettre, je vous le donne en mille, le type de fichier. On écrit video ou audio suivi de / avec le format du fichier. Par exemple, on aura type= « video/webm » ou type= « audio/ogg »  ou … Je pense que vous avez compris le concept. On appelle ça le MIME type.

On peut utiliser d’autres attributs au sein de la balise video. Il y a les classiques width et height et il y en a d’autres plus spécifiques comme preload=… qui selon la valeur que l’on lui attribue permettra de soit chargé la vidéo automatiquement après le chargement de la page (auto), de charger les illustrations (metadata) ou rien du tout (none). Il y aussi autoplay qui permet de lancer la lecture automatiquement, controls qui permet d’afficher les boutons de contrôle ou encore poster=… qui permet d’afficher une image d’illustrations quand la vidéo n’est pas encore en lecture. Il y en a encore d’autres mais ce sont ceux-ci que l’on utilise le plus souvent.

Donc, au final on aura par exemple :

<video width="100%" controls="controls" preload="auto" poster="http://blog-high-tech.net/img/poster.jpg">
<source src="http://blog-high-tech.net/video/hd.mp4" type="video/mp4" />
<source src="http://blog-high-tech.net/video/hd.webm" type="video/webm" />
</video>

B) Parer ou résoudre les problèmes

1) Dans les bons formats, tu convertiras

Bon, si vous ne savez pas ce que signifie format de vidéo, soit c’est que vous utilisez généralement le terme codec ou alors une petite recherche Google va vous aider…

HTML5 superhero

Ce petit soucis réglé, voici LA première chose à faire automatiquement quand on veut intégrer une vidéo en HTML5 et que l’on veut qu’elle soit disponible au plus grand nombre (sinon il n’y a aucun intérêt à le faire). Il faut CONVERTIR !!! Et oui, c’est long, c’est chiant, et encore plus quand on utilise un ordi pourri peu puissant mais il faut bien le faire. Mais je vous rassure, une ou deux conversions seulement seront nécessaires. Une si le format de base est le MP4, sinon, il y en aura deux. Le fait est que chaque combinaison OS/navigateur apporte sont lot de support de certains formats et le non-support d’autres. Heureusement, notre ami Big Brother Google a mis en place le webM qui est supporté par la plupart des navigateurs même IE (ah non, j’oubliais qu’on parlait de navigateur…).

Donc, la première conversions à faire si on veut poster la vidéos le plus vite possible et que le maximum de personnes puissent la voir : c’est la convertir au format webM.

La seconde n’est pas nécessaire mais permet aux utilisateurs de safari et autres navigateurs exotiques de pouvoir lire votre vidéo. Donc il faudra convertir au format MP4.

Si on s’en tient à ça, dans 50% des cas certains navigateurs n’arriveront pas à lire votre vidéo car il y aura un problème de détection du format.

2) Ton .htaccess, tu modifieras

Et oui, la plus simple des solutions c’est d’ajouter ces quelques lignes dans le .htaccess:

AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

 

Et voilà, normalement tout fonctionne, si vous avez un problème ou des questions : postez un commentaire ou écrivez moi à l’adresse frederic@blog-high-tech.net.