Voici un petit résumé à propos de l’affichage de vidéos en HTML5, qui permet de se passer du plugin Flash (les mobiles et tablettes fonctionnent généralement sans ce plugin).

Fonctionne sur les navigateurs modernes (Chrome, Firefox, IE9/10, Opera), et sur les mobiles/tablettes récents.

Les navigateurs ne supportent pas tous les mêmes formats vidéos, pour s’assurer un bon fonctionnement partout il faut générer ces 3 formats :

• H.264/MP4
• OGG/Theora
• WebM/VP8

Un logiciel gratuit, open-source et multi-OS permet à partir d’un fichier vidéo source lambda de générer ces formats très facilement (et bien d’autres formats) : MiroVideoConverter

Ensuite il suffit de préciser dans le code HTML les 3 vidéos. Le navigateur prendra celle qu’il reconnaît (attention à bien mettre le mp4 en premier car les iPad et compagnie ne liront que la première source, et c’est ce format là dont ils auront besoin) :

<video width="800" height="450" controls="controls" poster="cover.jpg">
    <source src="mavideo.mp4" type="video/mp4">
    <source src="mavideo.webm" type="video/webm">
    <source src="mavideo.ogv" type="video/ogg">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="Français">
    Votre navigateur ne supporte pas la balise video
</video>

La balise track permet d’afficher des sous-titres.

Attributs intéressant :

• autoplay : lance la video automatiquement
• controls : affiche les boutons de contrôle de la vidéo
• preload : permet de précharger la vidéo
• poster : affiche une image en attendant que l’utilisateur lance la vidéo

Chaque navigateur affiche un lecteur propre à lui, pour afficher un lecteur vidéo personnalisé et identique sur tous les navigateurs il existe des librairies javascript :

http://videojs.com/
http://sublimevideo.net/
http://flowplayer.org/

Pour IE6/7/8 en revanche il faut utiliser une balise embed avec un lecteur swf (Flash) car il ne sait pas gérer la balise vidéo.

Video.JS permet d’avoir un lecteur personnalisé et également un player Flash qui pourra lire la vidéo au format mp4 pour ces vieux navigateurs.