Test de lisibilité des formats audio et vidéo du web/html5 dans les navigateurs internet
Avec "Miro Video Converter" (gratuit : http://www.mirovideoconverter.com/) on peut très facilement créer des audios aux formats mp3 et ogg, ainsi que des vidéos aux formats mp4 (codage h264) et WebM (codage vp8) : ce sont les formats les plus largement reconnus sur le web.
À partir du fichier vidéo original, pour réaliser la conversion en mp4 tout en conservant la taille d’origine de la vidéo, choisir le menu "Video" du bouton "Format" et sélectionner "MP4". Pour réaliser la conversion en webm, l’outil propose deux choix : Webm-HD et Webm-SD qui produiront des vidéos en 1080x608 et en 720x405 respectivement. (Attention, les conversions en webm réduisent la vidéo originale aux tailles indiquées : si la vidéo originale est plus petite -ex. 480x360- sa taille sera conservée)
S’il faut réduire la taille de la vidéo mp4 afin qu’elle soit lue par des appareils de première génération (iPhone3), choisir le menu "More devices" du bouton "Android" et sélectionner la taille voulue :
"Small (480x320)" ou "Normal (800x480) pour obtenir une vidéo en 480 ou 800 pixels de largeur respectivement (la hauteur de la vidéo est adaptée automatiquement)
"Large (720p)" ou "Large (1080p)" pour obtenir une vidéo en 720 ou 1080 pixels de hauteur respectivement (la largeur de la vidéo est adaptée automatiquement)
Les mp3 et mp4 n’étant pas des formats libres (les développeurs des navigateurs web doivent payer des royalties pour pouvoir les intégrer) ce test a pour objectif de vérifier la compatibilité des formats libres (ogg et webm) avec les différents navigateur et systèmes d’exploitation (O.S.=Operating system).
Sur ordinateur, pour utiliser les formats mp3 et mp4 il est préférable d’avoir installé le lecteur gratuit QuickTime Player (http://support.apple.com/downloads/...) : ce qui n’empêchera pas certains navigateurs internet de ne pas accepter ces types de fichiers ...
Pour utiliser les formats libres du html5, il faut ajouter à SPIP des composants spécifiques. Pour SPIP2.1 :
il faut ajouter les reconnaissances des formats vidéo dans le fichier .htaccess placé à la racine du site :
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm il faut installer le plugin "html5media" (http://plugins.spip.net/html5_media...) après avoir téléchargé la librairie "dewplayer" (http://www.alsacreations.fr/dl/dewp...) dans un répertoire /lib à créer à la racine de spip.
Ne pas oublier de donner des dimensions (ex. 480x270 pour les vidéos et 400x16 pour les audios) aux documents téléchargés : ce sont les dimensions d’affichage dans la page web des contrôleurs vidéo et audio.
Après essais, le 17/5/2013, sur mac, pc, tablettes et smartphones, tout n’est pas encore parfait !
| Device | O.S. | Browser | video mp4 | video WebM | audio mp3 | audio ogg |
|---|---|---|---|---|---|---|
| Tablet | Android4 | (default) | no | yes | yes | no |
| Tablet | Android4 | Chrome | yes | yes | yes | yes |
| Tablet | Android4 | Dolphin | no | yes | yes | no |
| Tablet | Android4 | Firefox | no | yes | yes | yes |
| Phone-LG | Android2.3 | (default) | yes | no | yes | yes |
| Phone-LG | Android2.3 | Opera | yes | no | yes | yes |
| Phone-LG | Android2.3 | Firefox | no | yes | no | yes |
| Mac | OSX.6.8 | Firefox | yes | yes | no | yes |
| Mac | OSX.6.8 | Safari5 | yes | yes | yes | no |
| Mac | OSX.6.8 | Chrome | yes | yes | yes | yes |
| Mac | OSX.7 | Safari6 | yes | no | yes | no |
| iPhone3 | iOS4.2 | Safari | yes | no | no | no |
| iPhone4s | iOS6.1 | Safari | yes | no | yes | no |
| iPhone4s | iOS6.1 | Chrome | yes | no | yes | no |
| iPad | iOS6.1 | Safari | yes | no | yes | no |
| iPad | iOS6.1 | Chrome | yes | no | yes | no |
| PC | Linux-Ubuntu12.04 | Firefox | yes | yes | no | yes |
| PC | Linux-Ubuntu12.04 | Konqueror | no | yes | yes | yes |
| PC | Windows-Vista | Explorer9 | yes | no | yes | no |
| PC | Windows-Vista | Safari | yes | no | yes | no |
| PC | Windows-Vista | Firefox | yes | yes | no | yes |
| PC | Windows-Vista | Chrome | yes | yes | yes | yes |
| PC | Windows-XP3 | Explorer6 | no | no | no | no |
| PC | Windows-XP3 | Firefox | no | yes | no | yes |
| PC | Windows-XP3 | Chrome | yes | yes | yes | yes |
Moralité ...
mettre online des vidéos WebM et utiliser Firefox ou Chrome ... ça fonctionne sur tous les devices, sauf sur iOS (les iPhones, les iPad et les Mac récents) ?
mettre online des vidéos mp4 ... ça fonctionne sur tous les devices, sauf sur Android (smartphones et tablettes, à moins d’y installer Chrome) ?
Les deux vidéos ci-dessus sont produites à partir du même clip de 10" en HD : vérifiez leur lisibilité sur votre device (ordi, tablet ou smartphone)
vidéo mp4 en h264 - 480 x 270 px - 1,8Mo
vidéo WebM en vp8 - 480 x 270 px - 1,0Mo
En dernier recours on peut donc proposer sur la page web un lien de téléchargement de la vidéo au format mp4 (cette procédure est inutile pour le format WebM, car celui-ci fait toujours appel au navigateur pour l’affichage) : c’est la certitude que l’utilisateur pourra télécharger le fichier et ensuite le visionner avec un des lecteurs multimédia de son device.
<audio controls title="MP3 ou OGG" style="display:block;width:400px;height:16px;">
<source src="WhiteChristmas.mp3">
<source src="WhiteChristmas.ogg">
</audio>Le navigateur essayera d’afficher le premier (mp3) et s’il ne le peut pas, il essayera ensuite d’afficher le deuxième (ogg) : cela fonctionnera donc partout (sauf sur les devices les plus vieux de ce test - LG/android2 et iPhone3/iOS4).
La même structure html permet, en remplaçant "audio" par "video", de mettre plusieurs fichier vidéo à disposition de la page web pour qu’elle trouve automatiquement un format lisible. En particulier, si on veut afficher des vidéos en grande taille (ex. 1280x720) mais aussi permettre aux vieux smartphones d’afficher la vidéo en petite taille (ex. 480x270), il conviendra d’écrire :
<video controls title="MP4 ou WEBM" style="display:block; width:480px;height:270px;">
<source src="WhiteChristmas1280x720.mp4">
<source src="WhiteChristmas480x270.mp4">
<source src="WhiteChristmas.webm">
</video>C’est faisable pour les fichiers qui ne sont pas très lourds, car ceci oblige à augmenter l’occupation de l’espace sur le serveur ... à voir si ça en vaut la peine.
Avec nos fichiers audio et vidéo de test, cette méthode donne ceci :
lecteur proposant un fichier audio mp3 + un fichier audio ogg
lecteur proposant un fichier vidéo mp4 + un fichier vidéo webm
Effectivement, cette méthode est très séduisante ... sur des devices pas encore obsolètes l’utilisateur voit à tous les coups s’afficher l’audio et la vidéo dans sa page web ... c’est magique !
J’ai vérifié des dysfonctionnement sur certains appareils sous android avec le navigateurs chrome et android : le contrôleur vidéo s’affiche mais pas l’image ni le son ...
Pour y remédier il faut insérer une ligne de code faisant appel à une version de la vidéo codée h264/AAC en 480px de large pour iphone : le mieux est de la générer avec quicktime7, ce qui produit un fichier m4v. Cette ligne est à placer avant les mp4 de plus grand format, sinon ces appareils android chargent les mp4 qui ne savent pas afficher !
Donc, mon conseil est d’organiser les lignes de vidéo en commençant par la webm, puis la m4v et enfin la mp4.