Résolution de problèmes multimédias HTML5 liés à l'audio et au vidéo

Attention ! Cet article a plus de 1 an (3297 jours), ce qui signifie qu'il n'est pas forcément à jour !

Ian Devlin a écrit un article sur html5doctor.com très intéressant sur les problèmes rencontrés lors de l’intégration HTML5 du vidéo et de l’audio. Vous pouvez lire l’article original (en anglais) Multimedia Troubleshooting.

Pendant que je recherchais des articles reliés aux multimédias HTML5 pour mon livre, HTML5 Multimedia: Develop and Design, j’ai remarqué qu’un nombre considérable de personnes avaient de la difficulté à faire fonctionner l’audio et le vidéo en HTML5. De Twitter à Stack Overflow, les mêmes questions reviennent continuellement, donc j’ai dressé une liste des problèmes communs (et certains moins communs) et leurs solutions (s’il y en a une !).

Dans la plupart des cas, les problèmes et solutions s’appliquent autant à l’audio qu’au vidéo. Je vais annoter lorsque ce sera spécifique à l’un ou l’autre.

Avant d’aller plus loin, si vous n’êtes pas familier avec le concept d’ajouter du vidéo et de l’audio en HTML5 sur votre site web, vous pouvez lire plusieurs autres articles sur ce site qui vont vous permettre un rattrapage. (note du traducteur: Sur le site de RDSign quelques articles aussi pourraient vous aider, voir les liens à la fin de l’article) Tom Leadbetter a écrit sur l’élément vidéo, et Mark Boas a écrit sur l’audio natif dans le navigateur et HTML5 Audio - The State of Play.

En supplément, j’ai couvert les mêmes sujets, vidéo et audio, en tant que partie d’une série sur le sujet sur Adobe Developer Connection.

1. Support des navigateurs

C’est la première chose à voir: Est-ce que le navigateur que vous utilisez actuellement supporte le type de média vous tentez de jouer? C’est assez facile d’oublier quels navigateurs supportent quels fichiers, donc je vais vous rafraîchir la mémoire ici.

Audio

  • Firefox supporte Ogg Vorbis et WAV
  • Opera supporte Ogg Vorbis et WAV
  • Safari supporte MP3, AAC, et MP4
  • Chrome supporte Ogg Vorbis, MP3, WAV, AAC, et MP4
  • Internet Explorer 9+ supporte MP3, AAC, et MP4
  • iOS supporte MP3, AAC, et MP4
  • Android supporte AAC et MP3

Dans l’ordre pour supporter tous les navigateurs mentionnés ci-dessus, c’est conseillé de mettre vos fichiers audio en Ogg Vorbis et MP3. Par exemple:

<audio controls>
 <source src="myAudio.ogg" type="audio/ogg">
 <source src="myAudio.mp3" type="audio/mp3">
</audio>

Vidéo

  • Firefox supporte Theora Ogg et WebM
  • Opera supporte Theora Ogg et WebM
  • Safari supporte MP4
  • Chrome supporte Theora Ogg, MP4, et WebM
  • Internet Explorer 9+ supporte MP4 et WebM (requiert un plugin)
  • iOS supporte MP4
  • Android supporte MP4 et WebM (2.3+)

Dans l’ordre pour supporter tous les navigateurs mentionnés ci-haut, vous devriez avoir vos fichiers vidéo en WebM et MP4 en utilisant l’élément source. Par exemple:

<video controls>
 <source src="myVideo.mp4" type="video/mp4">
 <source src="myVideo.webm" type="video/webm">
</video>

2. MIME types

Même si vous avez le bon fichier média pour le navigateur, c’est possible que votre serveur n’a pas le bon MIME type d’installé.

Le MIME type dit au serveur comment gérer les différents types de fichiers. Si vous utilisez quelque chose semblable à Apache et que vous connaissez vos trucs, allez dans votre fichier .htaccess et ajoutez ce qui suit pour supporter l’audio:

AddType audio/ogg ogg
AddType audio/ogg oga
AddType audio/wav wav
AddType audio/mpeg mp3
AddType audio/mp4 mp4
AddType audio/mp4 mpa

Assez similaire pour le support vidéo:

AddType video/webm webm 
AddType video/mp4 mp4 
AddType video/ogg ogg 
AddType video/ogg ogv

Si vous n’avez pas accès à votre fichier .htaccess sur le serveur, votre panneau de configuration devrait avoir une option quelque part qui vous permet de voir et d’ajouter des MIME types.

Si vous avez un serveur Windows, alors vous allez devoir ajouter les MIME types à IIS, soit en utilisant le IIS Manager ou dans le fichier web.config.

3. Conversion de fichier

C’est fort possible qu’un client vous ait envoyé un fichier média et que vous ayez identifié son MIME type selon son extension fichier. C’est possible, cependant, que le fichier n’ait pas été encodé correctement. Il pourrait, par exemple, être un fichier MP4 parfaitement valide, mais pour des raisons X quelques navigateurs pourraient ne pas le jouer. Si cela arrive, vous devriez vous même encoder le fichier en utilisant un outil comme Miro Video Converter ou Media Converter, vous allez donc être sûr de l’encodage.

De plus, certains fichiers, spécialement les fichiers MP4, ne jouent pas toujours dans les navigateurs qui sont censés les supporter. C’est dû au fait que les fichiers MP4 (aussi connu comme H.264) peuvent être encodés selon différents "profils". Si le fichier en question est encodé dans un profil qui n’est pas supporté par le navigateur, alors naturellement il ne fonctionnera pas. Si cela vous arrive, assurez-vous que le fichier est encodé selon les bases du profil, qui est habituellement supporté davantage que tout autre plus avancé. Au travers de mon expérience, utiliser un outil tel que Miro assure que le MP4 va bien fonctionner dans les navigateurs supportés.

Si vous devez supporter Firefox 3.6 et en dessous, vous allez aussi devoir convertir votre fichier audio en Ogg et les ajouter en tant qu’extra pour l’élément 

4. Fichiers MP4 qui ne jouent pas avant d’être complètement téléchargés

Habituellement les lecteurs audio et vidéo HTML5 vont permettre à l’utilisateur de lire le média avant qu’il soit complètement téléchargé (pourvu qu’il ait au moins quelque chose à jouer!). Quelques fois ce n’est pas le cas avec un fichier MP4, le navigateur attend de télécharger le fichier complet avant de le rendre possible à la lecture. Ceci provient d’un problème d’encodage.

Quelques fois, les fichiers MP4 sont encodés avec un fichier index (lequel contient les informations sur le fichier comme sa durée) placé à la fin du média au lieu de son début. Cet index contient le metadata requis par le navigateur pour offrir un téléchargement progressif. Si cet index est à la fin, on doit attendre de le recevoir avant de pouvoir le transmettre.

Si cela vous arrive, il existe un outil simple appelé QTIndexSwapper fait par Renaun Erickson que vous téléchargez sur votre ordinateur et dans lequel vous exécutez votre fichier pour qu’il déplace votre index au début du fichier et l’enregistre.

5. Avoir les bons attributs

Ceci peut sembler évident, mais c’est stupéfiant le nombre de questions que je vois sur Stack Overflow où le monde se demande pourquoi une certaine fonction ne s’exécute plus quand ils utilisent des attributs qui n’existent plus. Le meilleur exemple est l’attribut "autobuffer" sur l’élément audio ou vidéo, lequel a été remplacé par l’attribut "preload" aussi loin qu’en février 2010.

Le monde semble oublier que le HTML5 n’est pas finalisé (bien qu’en bonne partie très stable) et que tout ce que vous lisez pourrait être périmé. Ça vaut la peine de vérifier sur W3C HTML5 Specification et aussi sur pour voir le support par navigateur.

6. Contrôle du volume dans Firefox 11+

C’est un problème apparu récemment. Quelques-uns de vous l’avez peut-être remarqué, le contrôle du volume a disparu du lecteur audio dans Firefox 11+. Vrai, vous pouvez le mettre en sourdine, et le contrôle du volume peut toujours être ajusté par les touches HAUT et BAS du clavier, mais le "slider" lui-même a été enlevé dû à deux "bugs". J’assume que cela va revenir dans le futur, mais pour l’instant, si vous vous demandiez ce qui se passait, ce n’est pas votre faute. (Vous pouvez, bien sûr, utiliser l’API Media pour construire votre propre collection de contrôles personnalisés.

7. Plugins requis

Un des points le plus vendeur du HTML5 est le fait que l’audio et le vidéo n’ont nul besoin de "third-party plugins" - comme Flash - pour pouvoir jouer les fichiers multimédias, pourvu que le navigateur les supporte.

Malheureusement, ce n’est pas totalement vrai, car Internet Explorer (9+) et Safari ont, respectivement, besoin de Microsoft Media Player et Apple QuickTime pour être capable de jouer les fichiers audio et vidéo HTML5.

Vidéo et plein écran

Une condition souvent demandée pour le vidéo HTML5 est l’habileté de jouer en mode plein écran. Les spécifications HTML5 ne disent rien à ce sujet, mais une spécification pour un Fullscreen API est présentement en travail, avec des versions expérimentales disponibles pour la majorité des navigateurs.

Ces navigateurs supportent d’une certaine façon le Fullscreen API bien qu’en utilisant leur propre version marchande :

  • Chrome 19+
  • Firefox 12+
  • Safari 5.1+

Il y a aussi screenfull.js JavaScript polyfill qui implémente ces fonctions pour un nombre limité de navigateurs.

9. Internet Explorer 9+ ignore vos images d’affiche

Si vous avez un vidéo HTML5 défini avec une image d’affiche (utilisant l’attribut "poster"), vous allez être surpris de voir qu’Internet Explorer 9 l’ignore complètement à moins que vous ayez mis "none" à l’attribut "preload".

En raison du fait qu’Internet Explorer était un des derniers navigateurs à supporter HTML5, nous avons tous été habitués à la gestion de l’attribut "poster" des autres navigateurs: si c’est spécifié, montrer cette image jusqu’à ce que l’utilisateur débute la lecture du vidéo. Internet Explorer 9 ne fait pas cela. Il ne montre l’image contenue dans l’attribut "poster" seulement s’il n’a rien d’autre à montrer, donc si la première image du vidéo a été téléchargé (avec "preload" mis à "auto" - la valeur par défaut - ou "metadata"), alors il utilise cette dernière peu importe ce qui est dans l’attribut "poster".

C’est donc un cas où Internet Explorer interprète cette spécification à sa manière et d’une façon différente de tous les autres navigateurs. Internet Explorer 10 expose le même (mauvais) comportement.

Accéder aux Webcams et Microphones

L’aptitude d’accéder aux périphériques tels que les microphones et les webcams a toujours été dans l’esprit des développeurs du HTML5 quand ils ont ajouté l’élément . Cela a maintenant été enlevé et remplacé par de quoi de plus approfondi: getUserMedia API, lequel permet d’accéder à de tels périphériques.

L’API en soi est facile d’utilisation, mais son support par les navigateurs est très limité. Opera est présentement le seul navigateur qui l’a implémenté, supportant seulement le vidéo, mais vous pouvez tout de même voir ce qu’il peut faire. Internet Explorer 10 va en faire autant, et cela va bientôt apparaître dans Firefox Nightly.

Sommaire

Ceci termine ma tournée de petits accrocs que vous pourriez rencontrer en travaillant avec l’audio et vidéo HTML5. Bien sûr, cela ne couvre pas tout, et je suis sûr qu’il y a des problèmes que vous avez rencontrés et qui ne sont pas mentionnés ici. Si vous en avez, s’il-vous-plaît les ajouter dans les commentaires, avec leur solution si possible, ou sinon, moi ou un autre HTML5 Doctors allons tenter d’aider.

Articles associés

Comment créer un lecteur audio HTML5

Menu avec vidéo sous les boutons en HTML5

Catégories :

HTML CSS