Gilles Bessou

Cellule TICE de l’Observatoire de Paris

Les formats vidéo pour le web
(FLV, Ogg Theora, MPEG-4)

Mai 2009

Ce travail a pour but d’éclairer et d’aiguiller le choix du format vidéo pour le web (et ne traite pas des formats d’animation tel que SVG, MNG ou GIF animé).

On s’intéresse aux formats vidéo qui s’intègrent à l’intérieur de la page web comme des objets multimédia.

Les plates-formes d’hébergement vidéo les plus populaires sur le web (Youtube, Dailymotion...) utilisent majoritairement le format FLV d’Adobe. Nous avons donc retenu cette solution qui est populaire.

Nous nous sommes aussi intéressés à la norme MPEG-4 spécifiée par le Moving Picture Experts Group, ainsi qu’au format OGG Theora qui est un format de compression vidéo libre.

Nous avons effectué une série de tests pour évaluer la compatibilité de chacune de ces solutions avec les divers systèmes d’exploitations, navigateurs et lecteurs multimédia disponibles sur le marché.

Enfin nous nous sommes intéressés à la popularité des technologies utilisées pour lire ces formats vidéo (le lecteur Flash, QuickTime et Java).

Le format FLV

Flash Video, est un format de fichier utilisé sur Internet pour diffuser des vidéos via le lecteur Adobe Flash Player versions 6, 7 et 8, de manière à pouvoir l’incorporer aux animations Flash. Il était développé par Macromedia qui a été racheté par Adobe Systems en avril 2005.

C’est un format conteneur c’est à dire qu’il peut contenir divers types de données ( vidéo, audio , ...).

Celles-ci sont compressées à l’aide de codecs (algorithmes de COmpression et de DECompression) normalisés.

Le codec vidéo de FLV est soit une variante du H.263, soit le codec VP6 de la société On2, soit encore une suite de captures écran.

L’audio est soit non compressé (PCM, ADPCM) soit compressé en MP3.

Ce format vidéo est ouvert, c'est à dire que la spécification du conteneur est librement accessible, mais cependant les codecs sont brevetés. Dans les pays ou les brevets sont appliqués, on ne peut pas créer de lecteur avec un code libre.

http://www.adobe.com/devnet/flv/

Pour nos tests, nous avons utilisé les codecs H.263 pour la vidéo et MP3 pour l’audio.

Ogg Theora

Theora est un codec vidéo libre promu par la fondation Xiph.org. C’est l’un des composants de leur projet de format d’encapsulation Ogg, qui a pour but de créer un ensemble de standards ouverts concernant le traitement de signaux multimédia (son, vidéo). Theora fournit la vidéo.

Theora utilise une licence de type BSD et se base sur le codec libre VP3 de On2 Technologies.

Le codec Theora est tout de même soumis à des brevets appartenant à On2 Technologies mais On2 a donné le droit irrévocable d’utiliser les brevets en question sans aucune restriction.

Ceci donne le droit à tous d’utiliser le codec Theora à des fins non commerciales tout comme à des fins commerciales sans payer de redevance à aucun organisme contrairement au MPEG-4 et au FLV et à tout autre codec vidéo de cette qualité.

Comme la plupart des navigateurs web ne gèrent pas Ogg Theora nativement, pour afficher une vidéo on peut utiliser l’applet Java Cortado développé par Wim Taymans et la version reprise de cette applet par Wikimedia qui corrige certains bugs de l’applet originale.

MPEG-4

MPEG-4 (ISO/CEI 14496), introduit en 1998, est une norme de codage d’objets audiovisuels spécifiée par le Moving Picture Experts Group.

MPEG-4 est d’abord conçu pour gérer le contenu de scènes comprenant un ou plusieurs objets audio-vidéo.

MPEG-4 se décompose en une suite de normes, les parties, qui spécifient un type de codage particulier. Dans chaque partie plusieurs profils (collection d’algorithmes) et niveaux (contraintes quantitatives) sont définis. On sélectionne une ou plusieurs parties de la norme et, pour chaque partie, on peut sélectionner un ou plusieurs profils et niveaux correspondant à ses besoins.

MPEG4 est donc un format conteneur comme le format FLV.

Les codecs du MPEG-4 sont brevetés

Pour nos tests nous avons utilisé le codec H.264 pour la vidéo et AAC pour l’audio.

Tests

Afin de déterminer quelle technologie demande le moins d’installation pour que la vidéo soit vue, et fonctionne correctement sous les divers systèmes d’exploitation (Windows XP & Vista, Mac OS X, Linux), nous avons procédé à des tests à partir d’une page web située sur un serveur distant.

Le premier lien permet de tester l’affichage des divers formats avec divers codes possibles pour l’intégration dans les pages web.

Ensuite pour chacun des formats on teste trois cas :

- une vidéo courte (30s);

- une vidéo longue (10mn);

- un ensemble de deux vidéos longues et d’une vidéo courte sur la même page.

On affiche :

- le FLV dans un objet lecteur de vidéo, développé en Flash (extension swf);

- le Ogg Theora dans le lecteur Cortado, développé en Java;

- on affiche le MPEG-4 directement comme un objet dans la page.

On effectue des tests en prenant note des programmes ( Java, QuickTime, le lecteur Flash) livrés avec certains systèmes d’exploitation ou pré-installés fréquemment sur certains types de machines.

Lire le MPEG-4

QuickTime (Windows, Mac OS)

Sur les ordinateurs Macintosh , avec Mac OS X, QuickTime est installé par défaut et il lit les MPEG-4, en revanche QuickTime n’est pas installé par défaut sur les ordinateurs avec Windows et n’existe pas pour Linux.

On peut installer QuickTime pour Windows en le téléchargeant à partir de :

http://www.apple.com/fr/QuickTime/download/

On peut installer les codecs permettant de lire du MPEG-4 pour Video for Windows en le téléchargeant à partir de :

http://www.microsoft.com/Windows/Windowsmedia/forpros/format/codecdownload.aspx.

Attention, ne pas confondre les codecs Microsoft MPEG-4 et les codecs ISO MPEG-4 !

Les tests ont été réalisé avec les codecs ISO MPEG-4.

Mplayer (Linux)

Le site officiel de Mplayer :

Mplayer : http://www.mplayerhq.hu

Installer Mplayer sur Linux Ubuntu :

http://doc.Ubuntu-fr.org/mplayer

Mplayer est un logiciel de lecture de fichier vidéo. Il est livré avec de nombreux codecs dont les codecs du format MPEG-4.

Pour Fedora :

Il existe un bug lorsqu’on recharge dans une page web une vidéo longue qui n’a pas été complètement pré-chargée ou lorsqu’on charge dans une page web deux fois la même vidéo, la vidéo ne s’affiche plus par la suite.

VLC (Linux)

Vlc : http://www.videolan.org

Pour Fedora : http://www.videolan.org/vlc/download-Fedora.html

Pour Ubuntu : http://www.videolan.org/vlc/download-Ubuntu.html

VLC est un logiciel de lecture de fichier vidéo. Il est livré avec de nombreux codecs dont le codec MPEG-4.

Il existe un bug lorsqu’on recharge dans une page web une vidéo longue qui n’a pas été complètement pré-chargée ou lorsqu’on charge dans une page web deux fois la même vidéo sur une page. La vidéo ne s’affiche plus par la suite

Nouvelle version du lecteur Flash (à partir de la mise à jour 3 de Flash Player 9)

Adobe a annoncé qu’ils allaient abandonner FLV au profit de MPEG-4 (uniquement avec les codecs H264-AAC et MP3).

Code pour intégrer du MPEG-4 dans une page web avec l'élément HTML <object>

Pour Internet Explorer :

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="300" height="300">
<param name="src" value="test.mpg"/>
<param name="autoplay" value="true"/>
<param name="controller" value="true"/>
<param name="type" value="video/mp4"/>
</object>

Pour les autres navigateurs :

<object data="test.mpg" type="video/mp4" width="300" height="300">
<param name="autoplay" value="true"/>
<param name="controller" value="true"/>
</object>

En utilisant les objets imbriqués et les commentaires conditionels spécifiques à Internet Explorer on obtient le code suivant :

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="300" height="300">
<param name="src" value="test.mpg"/>
<param name="autoplay" value="true"/>
<param name="controller" value="true"/>
<param name="type" value="video/mp4"/>
<!--[if gte IE 7]>
<!-- si le navigateur n'est pas Internet explorer ou si la version d'internet explorer est 7 ou plus -->
<object data="test.mpg" type="video/mp4" width="300" height="300">
<param name="autoplay" value="true"/>
<param name="controller" value="true"/>
<!-- si il n'y a pas de lecteur MPEG installé, on propose le fichier en téléchargement -->
<a href="test.mpg">test.mpg</a>
</object>
<!--<![endif]-->
<!--[if lt IE 7]>
<!-- si il n'y a pas de lecteur MPEG installé, on propose le fichier en téléchargement -->
<a href="test.mpg">test.mpg</a>
<![endif]-->
</object>
C'est ce dernier code qui a été utilisé pour les tests.

Lire le FLV

Le lecteur Flash d'Adobe

Il est nécessaire d’installer un lecteur Flash récent pour pouvoir visionner les vidéos au format FLV. La version actuelle du lecteur Flash est Flash Player 10.

Pré-installé sur MacOS X et souvent présent sur les ordinateurs avec Windows, le lecteur Flash d'Adobe existe sur Linux mais n'est pas pré-installé.

Comparaison des codecs vidéo On2 VP6 et Sorenson Spark

(http://livedocs.adobe.com/Flash/9.0_fr/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7ca8.html)

Codec

Version du lecteur Flash d'Adobe nécéssaire pour la lecture

Sorenson Spark( H.263)

6, 7, 8

7, 8, 9

On2 VP6

8, 9

9

Installation sur Mac OS X, Windows XP, Windows Vista

http://get.adobe.com/fr/Flashplayer/

Installation sur Linux Fedora

Pour lire les animations swf de Flash, il y a sur Fedora un package, c’est SWFdec 0.8.2, avec ce player Flash on ne peut pas lire une vidéo FLV, il faut installer le lecteur Flash d’Adobe pour afficher correctement la vidéo.

1 - installer wget (système->administration->ajouter/enlever des logiciels->rechercher wget puis l’installer)

2 - wget http://Linuxdownload.adobe.com/adobe-release/adobe-release-i386-1.0-1.noarch.rpm

3 - rpm -ihv adobe-release-i386-1.0-1.noarch.rpm

4 - yum install Flash-plugin libFlashsupport

5 - redémarrer Firefox

Installation sur Linux Ubuntu

http://doc.Ubuntu-fr.org/Flashplayer

Il existe des alternatives libres Gnash et Swfdec mais elles ne permettent pas de lire de vidéos FLV à cause des brevets associés.

Code pour intégrer un lecteur de vidéo développé en Flash lisant du FLV:

Comme pour intégrer une vidéo MPEG-4, on intègre une application Flash dans des éléments <object> imbriqués.

<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="300"
height="300">
<param name="src" value="Flashplayer/player_flv.swf"/>
<param name="type" value="application/x-shockwave-Flash"/>
<param name="FlashVars" value="flv=video_longue.flv&amp;autoplay=true"/>
<!--[if gte IE 7]>
<object
data="Flashplayer/player_flv.swf"
type="application/x-shockwave-Flash"
width="300"
height="300">
<param name="autoplay" value="true"/>
<param name="FlashVars" value="flv=video_longue.flv&amp;autoplay=true"/>
</object>
<![endif]-->
</object>

Lire le Ogg-Theora

L’applet Cortado

Nous disposons de deux versions de l’applet Cortado, destinée à lire les fichiers Ogg Theora dans une page web :

-la version originale (dont le développement a semble t-il été arrêté depuis 3 ans);

http://www.flumotion.net/jar/cortado/

-la version (toujours en développement) reprise par le consortium Wikimedia.

http://svn.wikimedia.org/viewvc/mediawiki/trunk/extensions/OggHandler/

Nous avons utilisé cette dernière version pour nos tests.

Voici comment on inclut l’applet Cortado dans une page web :

<applet archive="cortado/cortado-ovt-debug-0.2.2b.jar" code="com.fluendo.player.Cortado.class" width="300" height="300">
<!-- URL de la vidéo Theora. -->
<param name="url" value="ogg-theora/video_longue.ogv"/>
<!-- Si l'applet et le fichier vidéo sont sur l'ordinateur de l'utilisateur, cette option doit avoir pour valeur "true". Cette option doit avoir pour valeur "false" dans le cas d'une utilisation sur le web. -->
<param name="local" value="false"/>
<!-- Cette option ne fonctionne qu’avec la version reprise par Wikimedia, elle permet de conserver le rapport hauteur/largeur de l’image. -->
<param name="keepaspect" value="true"/>
<!-- Activer la prise en charge de l'audio. -->
<param name="video" value="true"/>
<!-- Activer la prise en charge de la vidéo. -->
<param name="audio" value="true"/>
<!-- Cette valeur est la durée de la vidéo en secondes, elle est obligatoire si on souhaite afficher correctement la barre de défilement de la vidéo. -->
<param name="duration" value="699"/>
<!-- Il faut mettre ce paramètre à FALSE, si on ne connaît pas la durée des vidéos, on cache ainsi un bug d’affichage en n’affichant pas la barre de défilement. -->
<param name="seekable" value="false"/>
<!-- Si on veut que la vidéo se joue automatiquement au début; la valeur par défaut est true. -->
<param name="autoPlay" value="true"/>
<!-- Pour afficher ou non la barre de défilement. -->
<param name="showStatus" value="show"/>
<!-- Pour afficher le bouton pour couper le son. -->
<param name="showSpeaker" value="false"/>
<!-- Hauteur en pixels de la barre de défilement. -->
<param name="statusHeight" value="18"/>
</applet>

L’avantage de cette applet est qu’elle est développée en Java, or Java fait partie de MacOS X et fait souvent partie des logiciels installés sur les ordinateurs avec Windows.

Un défaut du format Theora, est que la durée des vidéos n’est enregistrée nulle part dans les fichiers. On peut calculer la durée, mais la méthode est malaisée et il faut lire le fichier plusieurs fois.

Avec l’applet Cortado, il faut mettre le paramètre seekable à false quand on ne précise pas la durée. Cela cache la barre de lecture.

Remarques sur Cortado :

- La barre de défilement présente un bug : le curseur se place systématiquement à la fin de la vidéo si la durée de la vidéo n'est pas précisée en paramètre. Il est cependant possible de le déplacer dans une zone de la vidéo pour avancer à cet endroit. On peut aussi éviter ce problème en n'affichant pas la barre de défilement ou en précisant la durée de la vidéo en paramètre.

Bugs :

-Il y a une erreur lors de la conversion des couleurs de YUV vers RVB qui fait que la couleur rouge apparaît orangée

dans Cortado.

-Avec Safari si on a plusieurs onglets lorsqu'on passe d'un onglet à l'autre, l'applet plante. Le plantage ne se produit qu'avec Safari, il est probable qu'il s'agisse d'un bug de Safari

Code pour intégrer Ogg Theora dans l’applet Java Cortado:

<applet archive="cortado/cortado-ovt-debug-0.2.2b.jar" code="com.fluendo.player.Cortado.class" width="300" height="300">
<param name="url" value="ogg-theora/video_longue.ogv"/>
<param name="local" value="false"/>
<param name="framerate" value="5.0"/>
<param name="keepaspect" value="true"/>
<param name="video" value="true"/>
<param name="audio" value="true"/>
<param name="duration" value="699"/>
<param name="seekable" value="false"/>
<param name="autoPlay" value="true"/>
<param name="showStatus" value="show"/>
<param name="showSpeaker" value="false"/>
<param name="statusHeight" value="18"/>
</applet>

C'est ce code que nous avons utilisés pour nos tests. Cependant il y a d'autres alternatives :

Sur Firefox 3.1beta 2 on peut aussi utiliser ce code à l’intérieur d’un élément <video>:

(http://ljouanneau.com/blog/post/2008/10/16/L-element-video)

<video src="ogg-theora/video_longue.ogv" autoplay>
.
.
.
</video>

Ainsi les prochaines versions de Firefox pourront lire directement la vidéo sans utiliser d’applet.

Cependant nous ne pouvons pas utiliser ce code car Safari prend en charge l’élément <video> avec QuickTime depuis la version 3.1, mais QuickTime n’implémente pas actuellement Ogg Theora sans l'extension de Xiph, et dans ce cas rien ne s’affiche à l’écran. Il faudrait donc inclure plusieurs sources (ce qui est possible avec la balise <video>) c’est à dire plusieurs fichiers encodés différemment ( par exemple un Ogg Theora et un MPEG-4) et conserver la syntaxe avec l'élément <object> à l’intérieur pour tous les navigateurs qui ne prennent pas en charge l'élément <video>. Le résultat est assez lourd à mettre en place puisqu’on a besoin d’au moins deux formats vidéo.

Une autre option est d'utiliser un élément <object> pour afficher directement le fichier Ogg Theora dans le navigateur. Dans ce cas là il faut utiliser des instructions conditionnelles pour utiliser Cortado avec IE sinon on utilise l'élément <object> avec un fichier Ogg Theora, enfin si ce type de fichier n'est pas lu par le navigateur on utilise l'applet.

Dans ce Tableau, la mention OK signifie que la vidéo s’est affichée et a défilé à l’écran.

Ogg Theora avec l’applet Cortado de Wikimedia

Java 1.4.2

Java 1.5

Java 1.6

OpenJDK Java 1.6

Mac OS X v 10.3.9

Avec la machine Java d'Apple

OK

OK

OK

Mac OS X v 10.4.11

OK

OK

Mac OS X v 10.5.6

OK

OK

OK

OK

Windows XP

Avec la machine Java de Sun

OK

OK

OK

OK

OK

OK

Windows Vista

OK

OK

OK

OK

Linux Ubuntu

Avec la Machine Java de Sun

Avec OpenJDK

OK

OK

Avec IcedTea6 plugin

Bug : Quant on affiche plusieurs fois la même vidéo dans une page, une des vidéos ne s’affiche pas.

OK

OK

Linux Fedora

Avec la Machine Java de Sun

Avec OpenJDK

OK

OK

Avec OpenJDK web browser plugin : OK

OK

OK

FLV dans un lecteur Flash

Adobe Flash Player 9

Adobe Flash Player 10

SWFdec 0.8.4

Mac OS X v 10.3.9

OK

OK

OK

Mac OS X v 10.4.11

OK

OK

Mac OS X v 10.5.6

OK

OK

OK

OK

Windows XP

OK

OK

OK

Windows Vista

OK

OK

Linux Ubuntu

OK

Non

OK

Non

Linux Fedora

OK

Non

MPEG-4

QuickTime player 7

Mplayer

+ plugin navigateur

VLC

+ plugin navigateur

Mac OS X v 10.3.9

OK

OK

OK

Mac OS X v 10.4.11

OK

Mac OS X v 10.5.6

OK

OK

Windows XP

OK

OK

OK

Windows Vista

OK

OK

Linux Ubuntu

OK (http://doc.Ubuntu-fr.org/mplayer pour l’installation). Bien configurer le plugin.

OK mais temps de chargement très long pour les vidéos longues (pas de pré-chargement).

Linux Fedora

OK ( avec gecko mediaplayer).

OK mais temps de chargement très long pour les vidéos longues (pas de pré-chargement).

Popularité du lecteur Flash, de QuickTime et de Java

http://www.adobe.com/products/player_census/Flashplayer/

Sur le site d’Adobe, qui distribue le lecteur Flash, figure une étude du cabinet Millward Brown estimant la popularité de divers lecteurs vidéo sur le web. Cette étude, datée de décembre 2008, porte sur un panel d’utilisateurs de plusieurs pays: Etats-Unis, Canada, Royaume uni, France, Allemagne, Japon ...

L’étude a été menée de la façon suivante : on demandait aux utilisateurs de charger plusieurs pages web; puis on leur demandait si une image s’affichait à l’écran. Ce qui permet de déterminer si tel ou tel plugin est installé sur l’ordinateur de la personne interrogée.

Il en ressort que :

Adobe Flash est utilisé majoritairement (99%)

Java viens ensuite (88%)

Windows Media Player (75%)

QuickTime (64%)

Le site internet Statowl.com indique, à l'aide de mesures faites avec une méthode différente, des chiffres qui vont dans le même sens :

En février 2009

Adobe Flash est utilisé majoritairement (97%)

Java viens ensuite (81,4%)

Windows Media Player (76%)

QuickTime (65%)

Ces résultats sont à nuancer.

La présence de Java et QuickTime peut dépendre du contexte.

Par exemple il est plus probable que Java soit installé sur un ordinateur dans une université que sur un ordinateur de maison. Dans certains secteurs (graphisme PAO), la popularité d’Apple étant plus grande, il y a plus de chance que QuickTime soit présent.

A l’inverse le Flash Player n’étant pas livré avec le système d'exploitation Windows ou Linux, il y a des secteurs dans lesquels il y a moins de chance de le trouver installé (par exemple il est plus probable que le lecteur Flash soit installé sur un ordinateur de maison que sur un poste de travail d’une entreprise ou d’une université).

Contraintes et Avantages

Format

Contraintes

Avantages

Ogg Theora

Utiliser l’applet Java Cortado et donc avoir Java d’installé, ce qui n’est pas le cas par défaut sur Windows et Linux.

Cependant 9 constructeurs sur les 10 plus importants ont des contrats avec Sun pour pré-installer Java.

L'exécution est plus coûteuse en mémoire que la lecture du FLV ou du Mpeg-4 du fait du chargement de la machine Java au moment de l'affichage de la première applet Java. D'où une exécution qui peut être lente sur des machines anciennes.

Si Java est déjà installé ou requis par le site, cela ne fait aucun autre logiciel à installer pour voir ces sites.

Ogg Theora est un format ouvert et il existe des lecteurs libres pour ce format.

On commence à lire le fichier avant son téléchargement intégral.

Ce format est pris en charge dans l'élément <object> sur Firefox à partir de 3.1 beta.

Sur Mac OS X Java est pré-installé. En outre les machine Java existent sur toutes les grandes plateformes.

FLV

Avoir une version pas trop ancienne (6,7 ou 8 selon le codec utilisé) du lecteur Flash de Adobe.

Le lecteur Flash n'est pas livré avec Windows et Linux.

C’est un format propriétaire, on ne peut pas développer d’encodeur FLV.

Le player Flash existe pour Windows 98, XP Vista, Mac OS, Linux. Il est pré-installé sur Mac OS X et très souvent présent par défaut sur les machines utilisant Windows.

Le format FLV est très présent sur le web (Dailymotion, Youtube ...)

On commence à lire le fichier avant son téléchargement intégral.

MPEG-4

Avoir installé QuickTime ou bien le codec MPEG-4 pour Windows Media Player, Mplayer ou VLC selon la machine.

QuickTime n'existe pas pour Linux.

Il n'y a pas de lecteur comprenant les codecs MPEG 4 livrés avec Windows ou Linux.

Format standard répandu. Bon rapport qualité/compression.

QuickTime est inclus dans Mac OS X.