Vidéo html5

Même si la vidéo HTML5 n’est pas encore prête pour le web en raison des navigateurs et des problèmes de codec, il est pourtant, tout comme l’animation html5 voir article transformer le flash en html5 essentielle de lire de la vidéo sur les mobiles.
Pour mettre en place une intégration permettant une expérience identique sur chaque « device » il vous faudra pas moins de quatre formats vidéos : un fichier mp4, ogg, webm et flash pour les vieux navigateurs ie
Pour ce faire il existe aujourd’hui un plug-in de firefox : firefogg, qui vous aidera dans votre mise en oeuvre, a partir d’un fichier .mov, il vous fournira un fichier ogg et webm, pour ce qui est du mp4 codé en h264, j’utilise Adobe media Encoder
après avoir obtenu 4 fichiers, il vous faudra intégrer les 4 possibilités dans le code html :

<video width="480" height="300" id="screen">
<source src="data/video/tron.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="data/video/tron.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="data/video/tron.ogv" type='video/ogg; codecs="theora, vorbis"'>
<object type="application/x-shockwave-flash"
data="player_flv.swf" width="480" height="300">
<param name="movie" value="player_flv.swf">
<param name="FlashVars" value="flv=data/video/tron.flv&amp;width=480&amp;height=300">
<param name="wmode" value="transparent">

Un petit conseil utile si vous êtes hébergé sur un serveur mutualisé n’oubliez pas ce petit bout de code dans le HTACCESS : « AddType video/ogg .ogv  » sans quoi vous ne pourrez voir la vidéo

pour la partie script :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Enfin pour les tablettes ciblé celle-ci avec du javascript et le userAgent ou le media queries Iphone/Ipad
Voici donc un petit exemple avec un teaser du film « tron Legacy »




Laissez un commentaire