Les logiciels d'encodage
Pour que votre vidéo soit lisible sur le Web, vous allez obligatoirement devoir passer par l'encodage de celle-ci dans un (ou plutôt des) format validé par les navigateurs. Pour le plus grand "bonheur" des Webmaster, la plupart des navigateurs ont évidemment décidé d'avoir chacun le leur ! (ou a peu près).
Je commencerais donc par vous rappeler les différentes compatibilités entre les formats de fichiers vidéos et les navigateurs Web
| Navigateur | MP4 | WebM | Ogg / Ogv |
|---|---|---|---|
| Internet Explorer 9 / 10 | codec H264 | ||
| Firefox | |||
| Google Chrome | |||
| Safari | |||
| Opera |
Je vais maintenant rentrer dans la question complexe de "Quel logiciel utiliser pour encoder mes vidéos ?". Et c'est là que la question se corse !!!
Malgré un bon nombre de recherche, je n'ai pas réussi à trouver un logiciel capable de proposer à lui seul la possibilité de convertir sa vidéo dans chaque format nécessaire. Je ne dis pas qu'il n'y en a pas, mais il me reste inconnu.
Ce résultat ammène donc vers une solution évidente, utiliser un logiciel différent pour chaque format souhaité. Non pas que ce soit compliqué, mais certains trouverons cette "combine" un peu contraignante.
Voici donc la sélection de logiciel me permettant un encodage complet des vidéos.
Le MP4 h264, seul compatible avec Internet Explorer, avec Free Media Converter
Beaucoup pense, et l'apparence est trompeuse, qu'Internet Explorer a besoin d'un encodage en mp4 pour lire une vidéo. Ce n'est pas totalement faux mais celui-ci doit etre de codec H264, un simple mp4 ne sera pas pris en charge.
Pour obtenir cette conversion j'utilise ce logiciel avec pour format de sortie H.264/MPEG-4 AVC Video (*.mp4) (dans general video)
| Pour télécharger ce logiciel, c'est par ici |
Pratique, ce logiciel propose un très grand nombre de format d'encodage mais sont malheureusement manquant les 2 autres qui nous intéresse, le WebM et l'Ogg.
Enfin, c'est le proposant gratuitement (car en logiciel payant la gamme est évidemment différente) une converion MP4 compatible avec Internet Explorer, qui, rappelons le, représente presque 85% des internautes.
L'Ogg, pour Firefox et Chrome, avec Free Video Converter
Un autre logiciel, à l'utilisation simple et intuitive, qui vous proposera un panel de format de compression mais avec encore une fois un seul élément nous intéressant, le OGG Theora.
| Pour télécharger ce logiciel, c'est par ici |
L'atout par rapport au logiciel suivant est la possibilité de définir un bon nombre de paramètre quand au résultat final de l'encodage.
A ce stade nous assurons déjà une compatibilité avec la majorité des navigateurs Internet, mais je vais vous faire part d'un autre aoutils qui peut s'avérer utile dans certains cas.
L'OGV (OGG Theora/Vorbis) et le WebM (VP8/Vorbis) avec Firefogg
Il ne s'agit pas là d'un logiciel mais d'un plug-in concu par Mozilla pour le navigateur Firefox qui vous permettra d'encoder vos vidéos dans les 2 formats précedemment cités.
| Pour télécharger ce plug-in, c'est par ici (sous Firefox évidemment) |
Pourquoi me parait-il intéressant ? Parce que les fichiers encodés fonctionnent sur les navigateurs ciblés mais surtout parce qu'il est très léger à installer.
Vous serez bien sur toujours dans l'obligation d'utiliser un logiciel prenant en charge le MP4 H264 mais ce dernier vous permettra une occupation plus légère de l'espace disponible sur votre disque dur.
Intégration d'une vidéo dans un document HTML
Pour intégrer une vidéo dans votre page html, il vous suffira de créer un document au format HTML5 et de respecter cette syntaxe :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>titre de la page</title>
...
</head>
<body>
<video width="320" height="240" controls="controls"> <!-- Definissez les dimensions de votre video -->
<source src="mavideo.mp4" type="video/mp4"> <!-- Internet Explorer -->
<source src="mavideo.webm" type="video/webm"> <!-- Encoder avec Firefogg - Chrome -->
<source src="mavideo.ogg" type="video/ogg"> <!-- Chrome et Firefox -->
<source src="mavideo.ogv" type="video/ogg"> <!-- Encoder avec Firefogg - Chrome et Firefox-->
Your browser does not support the video tag.
</video>
...
</body>
</html>
Maintenant que vous connaissez les ficelles de l'intégration de vidéos au sein de vos pages html, vous pourrez facilement partager vos meilleurs moments ou morceaux de films préférés avec les visiteurs de votre site