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 (par Macromedia, qui a plus tard été rachetée par Adobe), 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. Adobe a arrêté le support pour le lecteur Flash en fin 2020, mais il y a un grand nombre d'anciens systèmes ainsi que des environnement enterprise (oui, entreprise!) qui ont la combinaison de navigateurs anciens et Adobe 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 un gros désavantage: il n'y a pas de standards sur quel codec (format) vidéo utiliseret malheuresement les formats "efficaces" (ceux qui, notamment sur les appareils mobiles, consomment moins de batterie par exemple) ont des licenses restrictifs, alors que les formats ouverts n'ont pas toujours le support matériel. 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 votre clientèle cible utilise des ordinateurs modernes, utilisant des sytèmes d'exploitation commerciaux ou libres, ainsi que les appareils mobiles (notamment Apple iOS) alors vous devez utilisez le tag <video> d'HTML 5 avec un encodage multi-formats, tandis qu'il reste acceptable d'avoir Flash comme "solution de secours". 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: