Multimédia

La vidéo Web

Vidéo HD et son HTML5

Exemple de vidéo en HTML5

webm converter software by EasyHtml5Video.com v1.6.1

La lecture de vidéo a toujours causé des maux de tête aux webmestres. Le poids des fichiers mais surtout le manque de support des navigateurs. On peut parler de guerre des formats et sans doute un rapport à voir avec la plate-forme Macintosh et son format Quicktime versus Windows et RealPlaer par exemple puis Windows media Player. Et pourtant le MPEG4 était déjà la en 2000 (MPEG4, le MP3 du vidéo)! Pendant ce temps, Macromedia révolutionnait le marché avec Director et Flash. Un autre plug-in mais cette fois installé à son apogée sur plus de 95% des navigateurs. Personne n’aurait pu arrêter ce virage, si ce n’est du portable, le ipad! Et ironiquement Apple a acheté Flash sans jamais rendre ses appareils compatibles! Par la bande un petit joueur en a profité assez longtemps pour doubler tout ce beau monde et devenir la seule référence. Et j’ai nommé YouTube. Eh oui grâce au Flash!

Enfin cette ère de misère est terminée ;-) et c’est là la grande innovation du HTML5, s’il en est une! L’intégration de vidéo de qualité HD et la balise <video> capable de combiner plusieurs sources et différents formats de vidéo. L’idée toute simple consista à placer un en dessous de autres les codes avec les différents format. Le MP4 en haut, suivit du WebM, Ogg et finalement un format Flash pour les plus anciens navigateurs. Le navigateur utilise tout simplement le premier compatible. Le format Flash est en fait un lecteur MP4 en flashs qui ouvre la vidéo en format MP4. On peut aussi y ajouter une description ou du sous-titrage avec la balise <track>. Un grand avantage et de pouvoir manipuler et contrôler la vidéo en Javascript.

Contrôles

• Jouer (Play
• Pause
• Atteindre (Seeking)
• Volume
• Basculer en plein écran (Fullscreen toggle)
• Sous-titres / légendes (Captions/Subtitles)
• Piste (Track)

Balise « <video> »

C’est tout simple, un navigateur compatible ouvrira la vidéo sinon le message « Votre navigateur ne supporte pas la vidéo HTML5 » s’affichera.

<video width="320" height="240" src="movie.mp4" controls>
Votre navigateur ne supporte pas la vidéo HTML5
</video>

Format de vidéo

Tout navigateur compatible avec le format MP4 pourra voir la vidéo. C’est-à-dire tous les navigateurs sauf Opera! Le format WebM, compatible Opera, est aussi une bonne idée, mais incompatible avec Safari ni Internet Explorer! Alors voilà l’idée d’ajouter des sources différentes par format. Voilà les formats disponibles.

Balise « <source> » et « <audio> »

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
Votre navigateur ne supporte pas le son HTML5
</video>

ou

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas la vidéo HTML5
</audio>

Compatibilité

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari. Internet Explorer 8 et les versions antérieures ne supportent pas la balise <video>.

Fichier Flash

Une animation Flash permet d’étendre la compatibilité aux plus anciens navigateurs, placer le code après la dernière balise <source>. Noter la balise <object> et <embed> pour la compatibilité cette fois Netscape / Internet Explorer...

<div id="easyhtml5video">
  <video controls="controls" autoplay="autoplay" poster="image.jpg" onclick="if(/Android/.test(navigator.userAgent))this.play();" height="256" width="604">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    <object type="application/x-shockwave-flash" data="video.swf" style="position:relative;" height="256" width="604">
        <param name="movie" value="flashfox.swf">
        <param name="allowFullScreen" value="true">
        <param name="flashVars" value="autoplay=true&controls=true&fullScreenEnabled=true&loop=false&poster=image.jpg&src=happyfit2.mp4">
        <embed src="flashfox.swf" style="position:relative;" flashvars="autoplay=true&controls=true&fullScreenEnabled=true&loop=false&poster=image.jpg&src=happyfit2.mp4" allowfullscreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" height="256" width="604">
        <img alt="happyfit2" src="image.jpg" style="position:absolute;left:0;" title="Video playback is not supported by your browser" height="256" width="604">
    </object>
  </video>
</div>

La ligne Javascript onclick="if(/Android/.test(navigator.userAgent))this.play();" permet aux utilisateurs Android de cliquer sur la vidéo pour débuter la lecture.

Lire le tutoriel sur le logiciel « Easy HTML5 Video » pour plus d’information sur la conversion et l’intégration de vidéo HTML5.