La compression vidéo pour un blog
(et pour le web...)
(et pour le web...)
Pour une diffusion sur votre blog de vidéos personnelles ou stockées en ligne, vous devez les convertir dans un format adapté à une diffusion sur Internet, ce qui se révèle complexe tant formats et codecs sont nombreux, plus ou moins acceptés par les navigateurs et OS. Difficile de s'y retrouver.
1-Pourquoi convertir le format d’enregistrement d’une vidéo?
Quelque soit votre support d’enregistrement, les fichiers obtenus après votre prise de vue seront lourds et disposeront d’un format d’enregistrement du type .mts, .mov ou mp4... qui ne sera pas forcément détectable par les services de partage en ligne de vidéo. D’autre part, il est rare d’envoyer des fichiers vidéos non mis en forme au montage sur Internet.
Quelque soit votre support d’enregistrement, les fichiers obtenus après votre prise de vue seront lourds et disposeront d’un format d’enregistrement du type .mts, .mov ou mp4... qui ne sera pas forcément détectable par les services de partage en ligne de vidéo. D’autre part, il est rare d’envoyer des fichiers vidéos non mis en forme au montage sur Internet.
Pour les diffuser convenablement vous devez dont passer passer obligatoirement par la case exportation avec une compression vidéo.
2-Notions de base
Le stockage de la vidéo est complexe.
On a besoin de trois éléments :
On a besoin de trois éléments :
-Un format conteneur : c'est un peu comme une boîte qui va servir à contenir les deux éléments ci-dessous. On reconnaît en général le type de conteneur à l'extension du fichier : AVI, MP4, MKV…
-Un codec audio : c'est le format du son de la vidéo, généralement compressé. Nous venons de les voir, on utilise les mêmes : MP3, AAC, OGG…
Codec : AAC (Advanced Audio Coding)Ce codec permet un meilleur ratio qualité/débit que le format MP3, ce qui signifie qu’à taille de fichier équivalente, le son sera de meilleure qualité avec le codec AAC qu’avec le codec MP3.
Codec : MP3
L’un des formats audio les plus utilisés, ce codec a besoin d’un débit élevé (bitrate) pour conserver une bonne qualité de son.
L’un des formats audio les plus utilisés, ce codec a besoin d’un débit élevé (bitrate) pour conserver une bonne qualité de son.
-Un codec vidéo : c'est le format qui va compresser les images. C'est là que les choses se corsent, car ces formats sont complexes et on ne peut pas toujours les utiliser gratuitement. Les principaux à connaître pour le Web sont :
H.264 : Codec développé dans le cadre du MPEG, Le H.264 est également appelé également AVC (Advanced Video Coding). Il propose actuellement la meilleure compression vidéo sans perte de qualité. l'un des plus puissants et des plus utilisés aujourd'hui… mais il n'est pas 100% gratuit. En fait, on peut l'utiliser gratuitement dans certains cas (comme la diffusion de vidéos sur un site web personnel), mais il y a un flou juridique qui fait qu'il est risqué de l'utiliser à tout va.
Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que H.264. Theora est bien reconnu sous Linux mais, sous Windows, il faut installer des programmes pour pouvoir le lire.
WebM : un autre codec gratuit et libre de droits, plus récent. Proposé par Google, WebM est le concurrent le plus sérieux de H.264 à l'heure actuelle.
Autres notions Vidéo
Fréquence d’images (framerate) :24, 25 ou 30 images par seconde.Conservez la fréquence d’images avec laquelle vous avez filmé lors de votre tournage.
Pourquoi 25 ? C’est le seuil de ce que l’on appelle la persistance rétinienne.
Pourquoi 25 ? C’est le seuil de ce que l’on appelle la persistance rétinienne.
Résolution :
1080p: 1920×1080
720p: 1280×720
480p: 854×480
360p: 640×360
En haute définition, 2 formats coexistent 1280 pixels de largeur x 720 pixels de hauteur ou 1920×1080 pixels.Le format SD ou standard correspond à 640 pixels de large.
1080p: 1920×1080
720p: 1280×720
480p: 854×480
360p: 640×360
En haute définition, 2 formats coexistent 1280 pixels de largeur x 720 pixels de hauteur ou 1920×1080 pixels.Le format SD ou standard correspond à 640 pixels de large.
Le Débit :
Un fichier AAC encodé à 128 kbps équivaut à un fichier MP3 encodé à 192 kbps, ce qui signifie que pour atteindre la qualité d’un MP3 de 320 kbps, un débit de 256 kbps suffit. Débit : 320 kbps, c’est le réglage pour obtenir une qualité optimale, mais cela augmente le poids final du fichier à transférer.
Le bitrate, qu’est ce que c’est?
On peut résumer un « bit » à un morceau de l’information traitée par un ordinateur. Ainsi, le bitrate signifie littéralement le nombre de « bits » traitées par intervalle de temps. Dans le cas d’une vidéo en ligne , le débit est le plus souvent mesurée en kilo-bytes par seconde ou » kbps « . Plus techniquement , « le bitrate » correspond à un flux de données, plus la quantité d’informations de pixels est importante dans chaque image de la vidéo, plus la qualité est bonne mais ceci augmentera également le poids du fichier à l’arrivée! De même le bitrate pour l’audio, correspond à la quantité d’octets pour 1 seconde de son.
Vous trouverez ci dessous des liens d’aide concernant les réglages de compression suivant la plateforme choisie:
Vimeo https://vimeo.com/help/compression
Dailymotion http://www.dailymotion.com/upload/faq
Youtube https://support.google.com/youtube/answer/1722171?hl=fr&ref_topic=2888648
3-Compression vidéo et HTML5
On peut résumer un « bit » à un morceau de l’information traitée par un ordinateur. Ainsi, le bitrate signifie littéralement le nombre de « bits » traitées par intervalle de temps. Dans le cas d’une vidéo en ligne , le débit est le plus souvent mesurée en kilo-bytes par seconde ou » kbps « . Plus techniquement , « le bitrate » correspond à un flux de données, plus la quantité d’informations de pixels est importante dans chaque image de la vidéo, plus la qualité est bonne mais ceci augmentera également le poids du fichier à l’arrivée! De même le bitrate pour l’audio, correspond à la quantité d’octets pour 1 seconde de son.
Vous trouverez ci dessous des liens d’aide concernant les réglages de compression suivant la plateforme choisie:
Vimeo https://vimeo.com/help/compression
Dailymotion http://www.dailymotion.com/upload/faq
Youtube https://support.google.com/youtube/answer/1722171?hl=fr&ref_topic=2888648
3-Compression vidéo et HTML5
Le langage HTML5 (norme web actuelle) permet d’insérer une vidéo sans plug-in.
Pour être sur de conserver une lecture fluide sur différents navigateur, vous devez idéalement convertir une vidéo dans trois formats compatibles HTML5.
MP4 H.264 / AVC : Advanced Video Coding, technologie de compression vidéo en MPEG-4, également connue sous le nom de MPEG-4 Part 10.(format propriétaire et soumis à des droits de license d’utilisation)
=>Les fichiers MP4 utilisant H.264 sont lisibles nativement sur les navigateurs Apple (Safari, Safari Mobile), Opera, Google Chrome et Firefox depuis la version 34.
Webm:Webm un codec gratuit et libre de droits, récent. Lancé par Google, il s’agit d’un sérieux concurrent au format H.264.
=Webm est lisible sur Firefox, Opera, et Google Chrome.
OGG/Theora:Theora est un format de compression vidéo avec perte libre. Il est développé par la Fondation Xiph.Org et distribué sans frais de licence aux côtés de leurs autres projets de médias libres et ouvertes, y compris le format audio Vorbis et le conteneur Ogg.
Convertir des vidéos dans des formats HTML5
=>OGG/Theora est lisible sur Firefox, Opera, et Google Chrome.
=>Les fichiers MP4 utilisant H.264 sont lisibles nativement sur les navigateurs Apple (Safari, Safari Mobile), Opera, Google Chrome et Firefox depuis la version 34.
Webm:Webm un codec gratuit et libre de droits, récent. Lancé par Google, il s’agit d’un sérieux concurrent au format H.264.
=Webm est lisible sur Firefox, Opera, et Google Chrome.
OGG/Theora:Theora est un format de compression vidéo avec perte libre. Il est développé par la Fondation Xiph.Org et distribué sans frais de licence aux côtés de leurs autres projets de médias libres et ouvertes, y compris le format audio Vorbis et le conteneur Ogg.
Convertir des vidéos dans des formats HTML5
=>OGG/Theora est lisible sur Firefox, Opera, et Google Chrome.
Compatibilité ?
Ce tableau est relatif : nos divers tests ont montré des réactions aléatoires des navigateurs face aux fichiers vidéos. Ne soyez pas surpris de voir une vidéo s'afficher un jour, et ne plus le faire ensuite... puis s'afficher à nouveau.
De plus tout dépend du matériel utilisé et de l'OS : de là, des surpises...
Ce tableau est relatif : nos divers tests ont montré des réactions aléatoires des navigateurs face aux fichiers vidéos. Ne soyez pas surpris de voir une vidéo s'afficher un jour, et ne plus le faire ensuite... puis s'afficher à nouveau.
De plus tout dépend du matériel utilisé et de l'OS : de là, des surpises...
4-Outils logiciels de conversion
Voici une liste de quelques logiciels permettant une conversion dans les formats précédemment citésMiro Video Converter
Miro Video Converter vous permet de convertir presque n’importe quelle vidéo dans les formats suivants: MP4, WebM ou Ogg Theora. Possibilité de convertir des vidéos en traitement par lot.
Une installation facile (sans adware) et une interface simplifiée, claire permettent utilisation enfantine, il suffit de glisser-déposer un fichier vidéo sur l'interface puis de choisir un des nombreux profils de conversion disponibles.
L'absence de traduction française n'est pas un handicap, seule l'absence de réglages approfondis pourrait mécontenter certains..mais ici l'intérêt c'est simplicité et efficacité !
Recommandé pour tous
http://www.mirovideoconverter.com/
Easyhtml5video
EasyHTML5video est un outil gratuit qui vous permet de créer des vidéos compatibles HTML5 en seulement 3 étapes. Sa spécificité : le résultat est une page html avec tous les codes nécessaires, avec images et vidéos dans un dossier. Il convertit dans les 3 formats usuels.
Conseillé aux webmasters avertis pour obtenir le code d'insertion ou publier directement
http://easyhtml5video.com/
HandBrake
HandBrake est un logiciel de conversion vidéo qui permet de générer des fichiers AVI, MP4, OGM et MKV à partir d'un DVD, ou de fichiers issus d'un DVD présent sur votre disque dur, notamment à destination d'appareils comme l'iPod, l'iPhone, la PSP ou l'AppleTV, mais également, pour les utilisateurs avancés, à des résolutions ou des formats plus personnalisées. Comparé aux précédents, l’interface est un peu plus complexe...http://handbrake.fr/
http://www.mirovideoconverter.com/
Easyhtml5video
EasyHTML5video est un outil gratuit qui vous permet de créer des vidéos compatibles HTML5 en seulement 3 étapes. Sa spécificité : le résultat est une page html avec tous les codes nécessaires, avec images et vidéos dans un dossier. Il convertit dans les 3 formats usuels.
Conseillé aux webmasters avertis pour obtenir le code d'insertion ou publier directement
http://easyhtml5video.com/
HandBrake
HandBrake est un logiciel de conversion vidéo qui permet de générer des fichiers AVI, MP4, OGM et MKV à partir d'un DVD, ou de fichiers issus d'un DVD présent sur votre disque dur, notamment à destination d'appareils comme l'iPod, l'iPhone, la PSP ou l'AppleTV, mais également, pour les utilisateurs avancés, à des résolutions ou des formats plus personnalisées. Comparé aux précédents, l’interface est un peu plus complexe...http://handbrake.fr/
Super Téléchargement direct
SUPER (pour Simplified Universal Player Encoder & Renderer) convertit n'importe quel format en n'importe quel autre.L' interface est simple : il suffit de glisser/déplacer un fichier vidéo vers la fenêtre du logiciel et de choisir le conteneur, le codec vidéo et le codec audio.
Attention aux adwares Lors de l'installation, le programme installera également 2 "services" : lollipop et software updater ainsi qu'une extension pour navigateur nommée "Défault Tab" aussi faut-il éviter ce logiciel pourtant performant et efficace !
Freemake Video Converter : un bon outil mais attention à l'installation : adwares ! faire l'installation personnalisée " et décocher les logiciels supplémentaires proposés, refuser ce qui est proposé en supplément, et ne pas cliquer sur le Gold Pack s'affichant lors du lancement du programme.
SUPER (pour Simplified Universal Player Encoder & Renderer) convertit n'importe quel format en n'importe quel autre.L' interface est simple : il suffit de glisser/déplacer un fichier vidéo vers la fenêtre du logiciel et de choisir le conteneur, le codec vidéo et le codec audio.
Attention aux adwares Lors de l'installation, le programme installera également 2 "services" : lollipop et software updater ainsi qu'une extension pour navigateur nommée "Défault Tab" aussi faut-il éviter ce logiciel pourtant performant et efficace !
Freemake Video Converter : un bon outil mais attention à l'installation : adwares ! faire l'installation personnalisée " et décocher les logiciels supplémentaires proposés, refuser ce qui est proposé en supplément, et ne pas cliquer sur le Gold Pack s'affichant lors du lancement du programme.
convertit des fichiers de tout format : vidéo, audio, images et fichiers d'image ISO.
Très complet, FormatFactory donnera en effet la possibilité de convertir simplement ses fichiers à partir et vers une trentaine de formats des plus connus (JPG, PNG, AVI, MP4, MP3, AAC, etc.) aux plus rares comme les fichiers AMR, M4A, OGG, FLAC, etc.
La procédure est simplissime et automatique. Une fois le format de sortie et les fichiers sélectionnés, mais FormatFactory permet tout de même de configurer quelques options afin d'obtenir le rapport souhaité entre taille de fichier et qualité.
Quick media converter
utilitaire de conversion vidéo " couteau suisse " qui vous offrira la possibilité de convertir vos vidéos vers de nombreux formats. Disposant d'un " Mode Facile " et d'un " Mode Expert ", il satisfera avec aisance un très large public.
L'interface spécifique peut ne pas plaire...
Media Info
L'application MediaInfo permet d'analyser une grande partie des fichiers multimédias dont les vidéos, il fournit des informations techniques (codecs utilisés...) et des méta-données à propos de fichiers video ou audio. Il faut savoir que le logiciel n'est pas un lecteur proprement dit. Il travaille seulement en concert avec le lecteur de votre choix.
ATTENTION La version installable de MediaInfo installe désormais l'adware opencandy sans choix de suppression durant l'installation. MAIS la version Portable n' a pas de logiciel espion, ausi cette version est obligatoire : MediaInfo Portable via Commentçamarche
5-Syntaxe HTML
La balise <video> (nouvelle balise HTML5) permet de lire des fichiers ou des flux vidéo directement dans la page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause, positionnement dans la vidéo et contrôle du volume. Lorsque le fichier vidéo n'est pas trouvé ou que son format n'est pas supporté, le lecteur n'est pas visible pour certains navigateurs .
La balise <source> permet de définir au sein de l'élément <video> plusieurs ressources alternatives au cas où le navigateur ne supporterai pas le format initialement spécifié dans l'attribut "src" (il faut alors supprimer l'attribut "src" et spécifier les différents fichiers par ordre de priorité dans les balises <source>).
Syntaxe générale
La syntaxe de base de la balise video est extrêmement simple :
Propriétés pour la balise video
Propriétés Définition Valeurs
autoplay Indique que le fichier vidéo doit être lu automatiquement lorsqu'il est chargé autoplay
controls Affiche les différentes fonctionnalités du lecteur (lecture, pause, volume ...) controls
loop Indique au lecteur de lire la vidéo en boucle loop
muted Indique au lecteur de désactiver le son de la vidéo muted
poster Spécifie une image arriére plan à afficher tant que la vidéo n'est pas lancée URL
preload Spécifie le mode de chargement du fichier vidéo à l'ouverture de la page auto metadata none
src URL du fichier vidéo qui sera lu URL
ex <video src="adresseURL" controls poster="image.jpg" width="600"></video>
A savoir :
-On ne peut pas forcer le préchargement de la vidéo, c'est toujours le navigateur qui décide.
-Les proportions de la vidéo sont toujours conservées. Si vous définissez une largeur et une hauteur, le navigateur fera en sorte de ne pas dépasser les dimensions indiquées mais il conservera les proportions.
-pour proposer différents formats vidéo, vous utiliserez la balise <source> à l'intérieur de la balise <video>
Le navigateur prendra celui qu'il reconnaît :
<video controls="controls">
<source src="adresseURLvideo.mp4" type="video/mp4" />
<source src="adresseURLvideo.webm" type="video/webm" />
<source src="adresseURLvideo.ogv" type="video/ogg" />
Ici votre texte, alternative à la vidéo : un lien de téléchargement, un message, etc.
</video>
Les iPhone, iPad et iPod ne reconnaissent à l'heure actuelle que le format H.264 (fichier .mp4)… et uniquement si celui-ci apparaît en premier dans la liste !
A SAVOIR :le code HTML5 et Blogger
Le code HTML 4 concernant les vidéos est transformé automatiquement et systématiquement par l'éditeur HTML de Blogger !
ainsi ce code
---------------------------------------------
<video src="ADRESSE URL" controls>
Votre navigateur n'est pas à jour !
</video>
devient :
<video controls="" src="ADRESSE URL">
Votre navigateur n'est pas à jour !
</video>
---------------------------------------
ce qui n'empêche pas la vidéo de fonctionner !
A SAVOIR :le code HTML5 et Blogger
Le code HTML 4 concernant les vidéos est transformé automatiquement et systématiquement par l'éditeur HTML de Blogger !
ainsi ce code
---------------------------------------------
<video src="ADRESSE URL" controls>
Votre navigateur n'est pas à jour !
</video>
devient :
<video controls="" src="ADRESSE URL">
Votre navigateur n'est pas à jour !
</video>
---------------------------------------
ce qui n'empêche pas la vidéo de fonctionner !
6-Tests d'affichage
Test à partir d'un fichier original de 76 mo réencodé avec MIRO ainsi :
-Format mp4 (codecs video : avc/h264 et audio : aac) poids 31 mo
-Format webm (codecs video : vp8 et audio : vorbis) poids 18 mo
-Format ogv (codecs video : theora et audio : vorbis) poids 76 mo
Vidéo avec les 3 fichiers alternatifs (mp4/webm/ogv) : le navigateur prend et affiche celui qu'il reconnaît :
7-Conclusion :
Quel format/codec vidéo utiliser pour afficher une vidéo sur le net (blog, site web) ?
-Pour afficher une vidéo, en se simplifiant, nous recommandons le format MP4 avec les codecs "avc /h.264" en video et "AAC" en audio, actuellement le meilleur couple format/codec vidéo, codec audio. Avec ce format il vous sera possible de voir vos vidéos sur la plupart des plateformes (sans garantie absolue !)
-Pour convertir vos vidéos simplement, facilement, rapidement, utilisez Mirovideoconverter
-L'idéal serait de convertir vos vidéos dans les 3 formats (mp4/webm/ogv) à l'aide du code indiqué ci-dessus (balise "source"), mais c'est un travail supplémentaire ! qui ne garantit même pas que votre vidéo sera lisible à 100% avec tout matériel, plateforme, Os, navigateur..
8-Sources
cet article est une synthèse des lectures de :
Test à partir d'un fichier original de 76 mo réencodé avec MIRO ainsi :
-Format mp4 (codecs video : avc/h264 et audio : aac) poids 31 mo
-Format webm (codecs video : vp8 et audio : vorbis) poids 18 mo
-Format ogv (codecs video : theora et audio : vorbis) poids 76 mo
Vidéo avec les 3 fichiers alternatifs (mp4/webm/ogv) : le navigateur prend et affiche celui qu'il reconnaît :
7-Conclusion :
Quel format/codec vidéo utiliser pour afficher une vidéo sur le net (blog, site web) ?
-Pour afficher une vidéo, en se simplifiant, nous recommandons le format MP4 avec les codecs "avc /h.264" en video et "AAC" en audio, actuellement le meilleur couple format/codec vidéo, codec audio. Avec ce format il vous sera possible de voir vos vidéos sur la plupart des plateformes (sans garantie absolue !)
-Pour convertir vos vidéos simplement, facilement, rapidement, utilisez Mirovideoconverter
-L'idéal serait de convertir vos vidéos dans les 3 formats (mp4/webm/ogv) à l'aide du code indiqué ci-dessus (balise "source"), mais c'est un travail supplémentaire ! qui ne garantit même pas que votre vidéo sera lisible à 100% avec tout matériel, plateforme, Os, navigateur..
8-Sources
cet article est une synthèse des lectures de :
