Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[LONG] HTML 5 : formats videos, compatibilités et encodage

10 réponses
Avatar
Eric Demeester
Bonjour,

Suite à mes mésaventures et aux diverses expériences réalisées, je vous
propose, entre autre pour remercier les personnes ayant pris le temps de
me répondre et de m'orienter dans mes recherches, un résumé du contexte,
puis la présentation des solutions adoptées par votre serviteur.

1. HTML 5 et la vidéo :

L'un des principaux intérets de HTML 5 est l'apparition d'une balise
<video> permettant, si les navigateurs consultant le site sont
compatibles, de s'affranchir de l'encodage auparavant quasi-obligé en
Flash (.flv) et de la configuration des lecteurs associés.

Incidemment, cela permet la diffusion de vidéos sur les terminaux
iPhone et iPad refusant, pour des raisons de guéguerre larvée entre
Apple et Adobe, l'affichage de tout ce qui est en Flash.

Mais bon, pour une fois qu'une guéguerre entre acteurs du marché
participe à la standardisation de formats de diffusion, à des avancées
du libre, à la promotion d'un ensemble d'outils plus universels, plus
performants et plus simples à utiliser pour les concepteurs de sites
(HTML 5 plus CCS3) au grand dam des concepteurs de navigateurs,
Microsoft compris, obligés de respecter les standards pour rester dans
la course, on ne va pas se plaindre.

2. Formats des vidéos et compatibilité avec les navigateurs :

Source :

http://www.journaldunet.com/developpeur/client-web/balise-video-de-html5/les-formats-video.shtml

2.1. H.264/MP4 :

H.264 est supporté par le Moving Picture Experts Group. C'est un format
non-libre (soumis à brevets) et non-gratuit. Toutefois, il est gratuit
dans certaines utilisations (la diffusion gratuite de vidéos par des
sites Web par exemple).

Les fichiers MP4 utilisant H.264 sont lisibles nativement sur les
navigateurs Apple (Safari, Safari Mobile), Microsoft ainsi que sur
Google Chrome.

2.2. OGG/Theora :

Theora est un format de compression vidéo Open Source, sans brevets.
Ceci donne le droit à tous d'utiliser Theora (à des fins non
commerciales tout comme à des fins commerciales) sans devoir payer de
redevance au consortium MPEG.

OGG/Theora est lisible sur Firefox, Opéra, et Google Chrome.

2.3. WebM :

WebM est un format multimédia ouvert qui a été lancé par Google (après
rachat de la société On2 Technologies). L'utilisation est en libre et
gratuite.

WebM est lisible sur Opéra (à partir de la version 10.60), et sur
Chrome. Il sera également lisible sur Firefox à partir de la version 4
et avec Internet Explorer 9 si on installe le codec dans Windows. Sinon
il lira directement le MP4 (installé par défaut dans Windows 7).

3. Logiciels utilisés pour l'encodage des fichiers vidéos :

Note 1 : Je suis sous Win XP PRO SP3 (32 bits). Il s'agit de choix
issus de mon expérience et de mes essais, il existe d'autres
logiciels, certains multi-plateformes, d'autres non.

note 2 : J'ai volontairement, après tests, écarté VLC qui s'avère,
malgré ses innombrables qualités par ailleurs, un piètre
transcodeur, du moins sur ma vieille machine.

3.1. Génération des .flv (pour mémoire) :

Quick Media Converter :
http://quick-media-converter.softonic.fr/

Ms-Windows uniquement, non libre mais gratuit et non intrusif ; n'essaye
pas de vous coller sournoisement des barres de recherches exotiques dans
vos navigateurs, à l'instar de certains logiciels open source dont je
tairai les nom par charité.

Accepte un nombre conséquents de formats en entrée et en sortie, prise
en main très simple avec le mode « facile », possibilité de passer en
mode « expert » si (c'est rare mais ça arrive) le mode « facile » ne
donne pas de bons résultats.

En mode « expert » (mieux vaut s'y connaitre en vidéo pour l'utiliser),
il faut souvent procéder par tâtonnements successifs pour obtenir un bon
résultat, les possibilités de réglage étant nombreuses et la
documentation un peu succincte. Une fois la bonne configuration trouvée,
notez-là soigneusement afin de pouvoir la réutiliser facilement.

Sait aussi générer du mp4 (choisir « format mp4 pour iPhone » dans la
barre de boutons), mais les résultats sont moins convaincants qu'avec
d'autres logiciels (voir plus loin).

Sait (mal ou alors je n'ai pas trouvé les bons réglages) générer des
fichiers ogv. Ne connait pas le format WebM.

3.2. Génération des MP4 :

Miro Video Converter :
http://www.mirovideoconverter.com/

Très (trop) simple d'utilisation, interface très (trop) épurée, réglages
par défaut (choix des répertoires, etc.) exotiques et non modifiables,
sauf en y allant à la hache dans la base de registre.

Il faut deviner comment obtenir du mp4, puisque les formats de sortie
sont proposés en fonction des terminaux et pas des encodages.

Le format donnant le meilleur résultat est « Apple -> Apple universal ».
J'ai testé par curiosité le générateur pour iPad 3, le résultat est
moins bon à mes yeux, mais le fichier généré est plus léger.

3.3. Génération des OGG/Theora :

ffmpeg2theora :
http://v2v.cc/~j/ffmpeg2theora/index.html

Multi-plateformes, redoutablement efficace, utilisation en ligne de
commande uniquement. Il existe néanmoins une surcouche graphique pour
Ms-Windows.
Explications :
http://www.framasoft.net/article4823.html
Site officiel :
http://opensource.grisambre.net/wtheora/

Miro Video Converter est sensé prendre en charge cet encodage, mais la
dernière version est vraisemblablement bugguée :

<http://support.mirovideoconverter.com/support/discussions/topics/13550>
et je n'ai trouvé aucun lien permettant de récupérer la version
antérieure.

3.4. Génération des WebM :

Miro Video Converter :
http://www.mirovideoconverter.com/

Même combat que pour la génération des MP4, il faut deviner quel
terminal sélectionner pour obtenir un fichier WebM. J'ai choisi, un peu
au pif « Android -> Samsung -> Galaxy SIII ».

4. Taille des fichiers transcodés :

Je donne ces éléments à titre indicatif, sachant que quand j'avais le
choix, j'ai choisi le meilleur compromis poids / qualité de restitution
en privilégiant cette dernière, le public visé étant composé
essentiellement de professionnels de la communication audio-visuelle, et
ma volonté étant de conserver une bonne définition d'image, y-compris en
mode plein écran.

Le fichier original, transmis par un vidéaste professionnel, avait les
caractéristiques suivantes (source pour les CODECs, la résolution, le
débit d'image et le format décodé : VLC -> informations) :
- Extension : .mov
- Taille : 601 Mo
- Durée : 3,30 minutes (information non reprise ensuite, elle est
identique pour tous les types d'encodage
- Codec : H264 - MPEG-4 AVC (part 10) (avc1)
- Résolution : 1280x720
- Débit d'images : 25
- Format décodé: Planar 4:2:0 YUV

4.1. FLV :

- Extension : .flv
- Taille : 67.9 Mo
- Codec : Flash Video (FLV1)
- Résolution : 800x450
- Débit d'images : 1000 (?)
- Format décodé: Planar 4:2:0 YUV

4.2. MP4 :

- Extension : .mp4
- Taille : 33.5 Mo
- Codec : H264 - MPEG-4 AVC (part 10) (avc1)
- Résolution : 1280x720
- Débit d'images : 25
- Format décodé: Planar 4:2:0 YUV

4.3. OGG/Theora :

- Extension : .ogv
- Taille : 32.5 Mo
- Codec : Xiph.org's Theora Video (theo)
- Résolution : 1280x720
- Résolution d'affichage : 1280x720
- Débit d'images : 25
- Format décodé: Planar 4:2:0 YUV
- ENCODER: ffmpeg2theora-0.29

Après plusieurs essais, j'ai sélectionné une restitution vidéo de
qualité 5, le réglage par défaut de ffmpeg2theora étant de 6 (40.7 Mo),
car à mon sens, on ne voit pas la différence entre les deux, et
qu'économiser 8.2 Mo, c'est toujours ça de pris.

5. Conclusion et questions existentielles :

Reste la question de savoir si je dois générer d'autres fichiers plus
compacts et d'une définition moindre, pour être plus facilement vus sur
des téléphones et autres tablettes.

N'ayant aucune expérience sur ce sujet, j'en appelle à vos lumières pour
savoir ce que vous en pensez.

Personnellement, sauf si vous jugez ça indispensable, je me passerais
bien de cette étape, c'est déjà bien du travail pour générer 4 types de
formats par vidéo (je conserve les flv pour rester compatible avec les
vieux navigateurs).

Oui, mais quid de la taille d'affichage en fonction de la taille d'écran
du terminal, me demanderez-vous avec raison ?

En fait, je compte résoudre ce problème en utilisant, en association
avec JQuery, les excellents morceaux de javascript proposés par
fitvid.js (http://fitvidsjs.com/), qui semblent régler cette question de
façon simple, légère et élégante.

Voila. J'espère que ce modeste état de l'art et la narration des
tribulations d'un débutant en la matière pourront en aider d'autres, en
leur évitant les pertes de temps liées aux recherches et aux
expérimentations qui furent mon lot dans cette aventure des temps
modernes :)

Merci également aux personnes qui auront eu le courage de lire ce pensum
jusqu'au bout.

--
Eric

10 réponses

Avatar
Eric Demeester
Eric Demeester (Mon, 01 Apr 2013 12:09:58 +0200 -
fr.comp.infosystemes.www.auteurs) :

Rhazut !

4.1. FLV :
4.2. MP4 :
4.3. OGG/Theora :



J'ai oublié WebM :

4.4. WebM :

- Extension : .webm
- Taille : 44.1 Mo
- Codec : Google/On2's VP8 Video (VP80)
- Résolution : 1280x720
- Débit d'images : 25

--
Eric
Avatar
Mac Larinett
In article ,
Eric Demeester wrote:

Reste la question de savoir si je dois générer d'autres fichiers plus
compacts et d'une définition moindre, pour être plus facilement vus sur
des téléphones et autres tablettes.

N'ayant aucune expérience sur ce sujet, j'en appelle à vos lumières pour
savoir ce que vous en pensez.

Personnellement, sauf si vous jugez ça indispensable, je me passerais
bien de cette étape, c'est déjà bien du travail pour générer 4 types de
formats par vidéo (je conserve les flv pour rester compatible avec les
vieux navigateurs).



Personellement je mets en ligne une version légère et plus petite,
affichable sur un mobile avec un débit limité, et un lien vers la
version HD. Le webm est inutile, avec l'ogv et le mp4 tu couvres tous
les navigateurs.
Avatar
Eric Demeester
Mac Larinett (Mon, 01 Apr 2013 13:58:32 +0200 -
fr.comp.infosystemes.www.auteurs) :

Personellement je mets en ligne une version légère et plus petite,
affichable sur un mobile avec un débit limité, et un lien vers la
version HD.



Bong sang mais c'est bien sûr ! Pourquoi n'avais-je pas pensé à cette
solution à la fois évidente et élégante ?

webm est inutile, avec l'ogv et le mp4 tu couvres tous
les navigateurs.



Bien noté, c'est toujours ça d'économisé.

Donc en résumé, pour chaque vidéo :

- je propose une version légère par défaut et une HD sur demande ;
- ceci en mp4 et ovg ;
- je conserve mes .flv parce que je les ai, pour les vieux navigateurs
qui ne sauraint pas afficher les nouveaux formats (mais je ne me
prends pas le chou à en faire des versions réduites, sauf si j'ai du
temps à perdre).

Ensuite, après avoir installé JQuery ou m'être branché sur les services
de Google proposant moult bibliothèques de fontions prémâchées,
j'applique la bibliothèque magique fitvids.js, plugin de JQuety pour
adapter automatiquement la taille d'affichage des vidéos à celle des
écrans des terminaux.

Et voila, yapuka.

Encore merci à tous pour votre aide précieuse.

--
Eric
Avatar
SAM
Le 02/04/13 16:09, Eric Demeester a écrit :
Mac Larinett (Mon, 01 Apr 2013 13:58:32 +0200 -
fr.comp.infosystemes.www.auteurs) :

webm est inutile, avec l'ogv et le mp4 tu couvres tous
les navigateurs.



Bien noté, c'est toujours ça d'économisé.

Ensuite, après avoir installé JQuery ou m'être branché sur les services
de Google proposant moult bibliothèques de fontions prémâchées,
j'applique la bibliothèque magique fitvids.js, plugin de JQuety pour
adapter automatiquement la taille d'affichage des vidéos à celle des
écrans des terminaux.

Et voila, yapuka.




Le + triste dans l'histoire c'est que je vais devoir me farcir ces
vidéos alors que j'étais peinard avec mon FlashBloqueur :-(

Le pire c'est qu'il faille charger quand même du JS et pire encore des
jqueries alourdis de plugins :-(

ça m'tue !


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Eric Demeester
SAM (Wed, 03 Apr 2013 14:18:23 +0200 - fr.comp.infosystemes.www.auteurs)

Le pire c'est qu'il faille charger quand même du JS et pire encore des
jqueries alourdis de plugins :-(



Sur ce point, après une première expérimentation, je me demande si je ne
vais pas complètement zapper tout ce qui concerne le javascript.

Les « players » embarqués dans les navigateurs se suffisent à eux-mêmes,
et les paramétrages possibles dans la balise « video » répondent
largement aux besoins de base.

Tous les miens sont compatibles, sauf mmes vieux IE, mais ce n'est pas
une surprise et j'ai d'ores et déjà prévu une solution de contournement
(sans javascript).

Quant au redimensionnement de la vidéo en fonction du terminal, inutile
de s'en préoccuper, a priori, le terminal s'en charge.

Je vais en revanche adopter la suggestion de Mac Larinette et proposer
deux formats, un léger pour les téléphones, qui sera proposé par défaut,
et un lourd, que l'utilisateur sera invité à activer s'il en a envie.

Un gentil testeur a essayé avec plusieurs iPhones et iPads et ne m'a
fait aucune remarque à ce sujet.

Bref, je vais faire simple et me passer du javascript autant que faire
ce peux. Ça tombe bien, j'aime le simple et je n'aime pas le javascript
quand je peux faire autrement.

Tout cela prend forme, et je commence à me dire que le HTML5 est une
bien belle invention.

ça m'tue !



Tu passes ton temps à bougonner, ça te fera une raison de plus :)

--
Eric
Avatar
SAM
Le 03/04/13 20:13, Eric Demeester a écrit :
SAM (Wed, 03 Apr 2013 14:18:23 +0200 - fr.comp.infosystemes.www.auteurs)

ça m'tue !



Tu passes ton temps à bougonner,



C'est un peu ma façon de mettre en relief certaines incongruités va t-on
dire ;-)

ça te fera une raison de plus :)



Le HTML5 ?

Y a des incongruités la d'dans aussi ?


En tous cas je n'ai pas trouvé d'extension bloqueuse de vidéo !
(des aides aux vidéos en veux-tu en voilà, ça on est servis!)

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Pierre Goiffon
Le 01/04/2013 12:09, Eric Demeester a écrit :
Reste la question de savoir si je dois générer d'autres fichiers plus
compacts et d'une définition moindre, pour être plus facilement vus sur
des téléphones et autres tablettes.



Mais euh hum, la solution de déposer su Youtube tout simplement ? Je
crois que l'on peut avoir une vidéo privée que l'on peut uniquement
afficher sur un site non ?
Sinon, il y a des prestataires dédiés (JM Billaud en utilisait un passé
un temps sur son blog)
Avatar
Pierre Goiffon
Le 04/04/2013 00:32, SAM a écrit :
En tous cas je n'ai pas trouvé d'extension bloqueuse de vidéo !
(des aides aux vidéos en veux-tu en voilà, ça on est servis!)



Je ne doute pas que ça arrive vite... dès que les pubs commenceront à
utiliser la balise video ! :)
Avatar
Eric Demeester
Pierre Goiffon (Wed, 10 Apr 2013 14:19:22 +0200 -
fr.comp.infosystemes.www.auteurs) :

Bonjour Pierre,

Mais euh hum, la solution de déposer su Youtube tout simplement ? Je
crois que l'on peut avoir une vidéo privée que l'on peut uniquement
afficher sur un site non ?



Exact, mais je ne trouve (à tort ?) pas ça très « pro », comme démarche.

Sinon, il y a des prestataires dédiés (JM Billaud en utilisait un passé
un temps sur son blog)



Disons que j'aime bien apprendre, et que quitte à avoir un prestataire
dédié, comme j'ai les moyens hard et (potentiellement, quand j'aurai
appris) soft, j'aime autant que ce soit moi :)

--
Eric
Avatar
BertrandB
Le 01/04/2013 12:09, Eric Demeester a écrit :

Bonjour,



Un peut tard personellement j'ai utilisé fireogg pour l'encodage c'est
tout simplement simple.