RyleBlog

HTML5 ou comment rendre compatible une vidéo

Voilà comme vous avez déjà pu le remarquer, j’aime rendre les choses le plus standard possible.

Malheureusement du fait que le W3C n’a pas encore toute a fait statuer sur les tags HTML5, j’ai quelques erreurs de validation du code pour la balise <video>.

Par contre je vais vous expliquer comme faire pour intégrer une vidéo compatible tout navigateur ainsi que Android et IOS sur votre site, grâce à la balise <video> de HTML5.

Mais avant tout un peu de théorie.

La balise vidéo HTML5 est un moyen de lire de la vidéo sur internet sans s'encombrer de plugins comme flash ou silverlight, avec les langages standards du Web : HTML, CSS , JavaScript.
Mais comme le W3C n’a pas encore statué sur le codec à utiliser, chacun y va donc de son codec préférer.

Les codec :

• Le H.264 utilise par Apple, Microsoft, IE et Google :

Ce codec meilleur en terme technique, en effet il est rapide et assez léger.
Mais il y a deux soucis : Il n'est pas libre  et il coute 5 millions de dollars. Donc je trouve cela aussi un peu cher pour en faire l’intégration dans un navigateur.

• Le Théora, avec opéra et Firefox :

Le OGG Théora est un codec libre. Il est bien plus lourd, et les vidéos sont très encombrantes sur le serveur.
Comme vous l’avez surement déjà compris, si cela ne change pas, une vidéo aurait du être hébergé dans de multiples formats pour être lue par tout le monde, alors que le plugin flash suffisait pour tous les navigateurs.
Google  s'associe à Mozilla et Opera pour sortir WebM,(VP8) un format libre.
Microsoft annonce le support de ce format par IE9, sauf pour Apple, qui trouve que ce codec est moins bon que le H.264. haaaa que j’aime appel.
 

Tableau comparatif des formats vidéos :

Voilà nous arrivons maintenant à l’exemple de mon code.

Avant tout il vous faut encoder vos vidéos dans les formats MP4, MV4, OGV, WEBM et FLV. Hé oui cela fait beaucoup de vidéo, mais moi je n’y peux rien s’il n’arrive pas à ce mettre d’accord sur un standard.

Pour l’encodage de vidéo je vous conseille le logiciel WinFF, gratuit et super simple d’utilisation.

Il vous faut aussi installer un lecteur flash pour l'utilisation de FLV avec certain version de IE

Une fois que vous avez encodé vos divers vidéos, il ne vous reste plus cas les envoyés sur votre serveur et d’utiliser ce code :

[html]

<!–on définit la balise video avec la taille–>
<video width="800" height="600" controls="controls">
<!–on donne le chemin d'accès au fichier vidéo et sont type–>
<!–vous remarquer deux type de fichier mp4, un a été encodé pour Android l'autre pour ie avec WinFF–>
<source src="/videos/mp4/changePwdUserAndroid.mp4" type="video/mp4" />
<source src="/videos/mp4/changePwdUser.mp4" type="video/mp4" />
<!–le m4v est défini pour IOS–>
<source src="/videos/m4v/changePwdUser.m4v" type="video/mp4" />
<source src="/videos/webm/changePwdUser.webm" type="video/webm" />
<source src="/videos/ogv/changePwdUser.ogv" type="video/ogg" />
<!–Voici la subtilité, comme les lecteurs non compatibles ne lisent pas la balise video, ils viendront donc lire la balise objet qui ouvrira le player flv–>
<object type="application/x-shockwave-flash" data="/videos/wmv/player/player_flv_maxi.swf" width="800" height="600">
<param name="movie" value="/videos/wmv/player/player_flv_maxi.swf" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="flv=/videos/wmv/changePwdUser.flv" />

<!–ie 6 et inférieurs ne comprendront pas ce code, il faudra passer par la balise embed–>
<!–[if lte IE 6 ]>
<embed src="/videos/wmv/changePwdUser.flv" type="application/x-shockwave-flash"  allowscriptaccess="always" allowfullscreen="true" width="800" height="600">
</embed>
<![endif]–>
<p>Vous n'avez pas de navigateur moderne, ni Flash installé… Veuillez contacter le service informatique. </p>
</object>
</video>

[/html]

Voilà j'espère que cela vous aidera, si vous avez des questions le post est ouvert

Je vous recommande aussi la lecture des sujets suivants :

1. Votre navigateur est-il compatible HTML5 ? Quel est le degré de compatibilité de votre navigateur avec...
2. Google Swiffy ou comment passer des FLA en HTML5 Google encore et toujours lui. Google sort un outil qui...
3. Comment appliquer un style aux balises XHTML standards Avec les CSS, vous pouvez changer la présentation de toutes...
4. Comment utiliser des classes pour appliquer un style ? Vous pouvez attribuer à chaque élément XHTML une ou plusieurs...
5. Un Pac-Man en HTML5 Monsieur Dale Harvey vient de créer une version de Pac-Man...

Mots-clefs :HTML5, XHTML