Avant de vous montrer comment ajouter une vidéo dans votre site Web, je souhaiterais expliquer la théorie des choses...

Dans le monde informatique, chaque fichier (que cela soit une vidéo, une image, de la musique ou même du texte) a un format; un peu comme les différentes langues que l'on parle dans le Monde. Pour les vidéos, il existe des centaines de différents formats (répondant chacun à des exigeances difféRents) et des logiciels différents pour les lire. Dans un page Web, le logiciel qui va lire la vidéo sera ... bah, la page Web tout simplement.

Malheuresement, l'organisation travaillant sur les standards du Web (le W3C) ne s'est occupé du sort des vidés que très tardivement, par conséquent entretemps on a connu l'émargence de différents techniques pour pouvoir embarquer des vidéos dans des pages Web. Je souhaite vous parler des deux méthodes prédominantes:

La première méthode est l'utilisation d'Adobe Flash. Flash est un petit logiciel qui peut fonctionner de façon embarquée dans votre navigateur Web et qui affiche du contenu multimedia. Il a été introduit en 1996, a eu un premier support for la lecture de vidéos en 2002 et en 2005 quand YouTube a été lancé il était 100% basé sur les technologies Flash (et même aujourd'hui YouTube reste en grande partie dominé par le Flash).

La deuxième méthode est l'usage du tag <video> introduit en HTML 5. Cette méthode, de plus en plus populaire depuis novembre 2010 dû au fait que les appareils d'Apple (iOS) ne supportent pas le Flash, a deux gros désavantages: premièrement, seule les versions très récents des navigateurs le reconnaissent -par exemple, seule la version 10 d'Internet Explorer le reconnaît- ce qui veut dire qu'en l'utilisant vous raterez 25% des internautes mondiaux. Pire, il n'y a pas de standards sur quel codec (format) vidéo utiliser, donc si vous désirez que votre vidéo soit visible dans chaque navigateur il vous faut encoder et stocker la même vidéo en Theroa, H.264 (mp4) et VP8.

En plus court: si vous avez juste besoin que les ordinateurs puissent voir vos vidéos, l'utilisation de Flash ne pose aucun problème. Mais, si vous voulez que vos vidéos soient visible sur les ordinateurs ainsi que les appareils mobiles (notamment Apple iOS) alors vous devez merrte en place un système hybride qui peut utiliser simultanément Flash et le tag <video> d'HTML 5. Pour ce faire:

1) Convertissez votre vidéo en un format versatil: si vous avez bien compri ce que j'ai écrit il y a quelques paragraphes correctement, vous aurez l'impression que ce n'est pas gagné. En fait, le format H.264 (i.e., mp4) est reconnu en même temps par Flash ainsi que la plupart des navigateurs mobiles (Apple iOS et autres). Pour cette conversion, ma recommendation est Handbrake: handbrake.fr.

2) Optimisez l'emplacement des méta-données: par défaut, les méta-données des vidéos MPEG-4, donc l'information sur sa longueur, son titre, etc. est stocké à la fin du fichier. Or, durant un téléchargement on reçoit le début en premier, donc il est capital que ces méta-données arrivent vite pour que la lecture commence le plus rapidement possible. Pour cette opération, vous pouvez utiliser MP4 Metadata Mover.

3) Utilisez un lecteur Flash qui sache lire du MPEG-4: cette étape là est simple, téléchargez le module depuis le site Strobe Media Playback. Le fichier dans ce gros paquetage dont on a besoin est StrobeMediaPlayback.swf.

4) Mettez tout ceci dans votre page correctement avec JavaScript: dans cette étape, il faut que vous écrivez une logique en JavaScript qui utilise Flash si possible, et sinon utilise le tag <video> d'HTML 5. Comme cadeau, je vous fournit une version qui a cette logique ainsi qu'une logique de redimensionnement automatique de la vidéo en fonction de la taille de l'écran: cliquez ici pour télécharger.

Pour utiliser ce fichier video.js, par exemple avec une vidéo appelée Fireworks avec une résolution de 958 * 540 pixels, utilisez le code suivant:

<script type="text/javascript" src="video.js"></script>
<script>video("Fireworks.mp4", "Fireworks.png", 958, 540)</script>


Si vous ne voulez pas vous battre avec tout ceci, vous pouvez aussi ... utiliser la fonction "embed code" de YouTube. Exemple:

<iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k" frameborder="0"></iframe>



Amusez-vous bien!