HTML5 - Fonctionnalités évoluées

-  Audio et Vidéo -

1 - Les formats audio

Pour diffuser de la musique ou du son, il existe de nombreux formats. La plupart sont compressés ce qui permet de réduire leur poids :
• MP3 : C'est l'un des plus vieux, mais aussi l'un des plus compatibles, ce qui fait qu'il est toujours très utilisé.
• AAC : utilisé majoritairement par Apple sur iTunes. Les iPod, iPhone et autres iPad savent les lire sans problème.
• OGG : le format Ogg Vorbis est très répandu dans le monde Linux. Ce format est libre, c'est-à-dire qu'il n'est protégé par aucun brevet.
• WAV (format non compressé) : évitez autant que possible de l'utiliser car le fichier est très volumineux avec ce format.

Aucun navigateur ne gère tous ces formats à la fois. Retenez surtout la compatibilité pour les MP3 et OGG :

2 - Les formats vidéo

Le stockage de la vidéo est autrement plus complexe. On a besoin de trois éléments :
• Un format conteneur qui va contenir les deux éléments ci-dessous ( extension générale : 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.
  • Un codec vidéo : c'est le format qui va compresser les images. Ces formats sont complexes et ne sont pas tous gratuits.
   Les principaux à connaître pour le Web sont :
    ◦ H.264 : l'un des plus puissants et des plus utilisés mais il n'est pas 100% gratuit. Il est donc risqué de l'utiliser à tout va.
    ◦ Ogg Theora : un codec gratuit et libre de droits. Il est reconnu sous Linux mais sous Windows il faut installer des programmes pour le lire.
    ◦ WebM : un autre codec gratuit et libre de droits, plus récent. Proposé par Google, c'est un concurrent sérieux de H.264 à l'heure actuelle.

Ci-dessous, tableau de la compatibilité des codecs vidéo sur les différents navigateurs :

Là encore, aucun format ne sort du lot. Il est conseillé de proposer chaque vidéo dans plusieurs formats pour qu'elle soit lisible sur un maximum de navigateurs.

3 - Insertion d'un élément audio

Placez votre fichier audio dans le répertoire Multimedia et adaptez le code ci-dessous avec le nom de celui-ci.
Utilisez un freeware comme Audacity pour assurer les nécessaires conversions de formats audio.

Code HTML :

<p>- Insertion d'un fichier audio - Musique gratuite et libre de droits proposée par <a href="http://alban.lepsy.free.fr">Alban Lepsy</a></p>
  <audio controls="controls">
    <source src="../Multimedia/rock.mp3" />
    <source src="../Multimedia/rock.ogg" />
    Votre navigateur ne supporte pas la balise audio
  </audio>

Résultat >>

- Insertion d'un fichier audio - Musique gratuite et libre de droits proposée par Alban Lepsy

Vous pouvez compléter la balise avec les attributs suivants :
• controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
• width : pour modifier la largeur de l'outil de lecture audio.
• loop : la musique sera jouée en boucle.
• autoplay : la musique sera jouée dès le chargement de la page.
• preload : indique si la musique peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs :
  ◦ auto (par défaut) : le navigateur décide s'il doit précharger toute la musique, uniquement les métadonnées ou rien du tout.
  ◦ metadata : charge uniquement les métadonnées (durée, etc...).
  ◦ none : pas de préchargement. Utile si vous ne voulez pas gaspiller de bande passante sur votre site.

Code CSS associé :
audio
{
margin-left: 30px;   /* Marge extérieure gauche */
}

4 - Insertion d'une vidéo

Placez votre fichier vidéo dans le répertoire Multimedia et adaptez le code ci-dessous avec le nom de celui-ci.
Utilisez un freeware comme Freemake Video Converter pour assurer les nécessaires conversions de formats vidéo.

Code HTML :

<p>Insertion d'un fichier vidéo - Film gratuit et libre de droits proposé sur le site <a href="http://www.videezy.com">Videezy</a></p>
  <video controls poster="../Multimedia/moto.jpg" width="320" height="240">
    <source src="../Multimedia/moto.mp4" type='video/mp4'/>
    <source src="../Multimedia/moto.webm" type='video/webm' />
    <source src="../Multimedia/moto.ogv" type='video/ogg; codecs="theora, vorbis"' />
    Votre navigateur ne supporte pas la balise video
  </video>

Résultat >>

Insertion d'un fichier vidéo - Film gratuit et libre de droits proposé sur le site Videezy

Vous pouvez compléter la balise avec les attributs suivants :
• poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée.
• controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
• width : pour modifier la largeur de la vidéo.
• height : pour modifier la hauteur de la vidéo.
• loop : la vidéo sera jouée en boucle.
• autoplay : la vidéo sera jouée dès le chargement de la page.
• preload : indique si la vidéo peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs :
  ◦ auto (par défaut) : le navigateur décide s'il doit précharger toute la vidéo, uniquement les métadonnées ou rien du tout.
  ◦ metadata : charge uniquement les métadonnées (durée, dimensions, etc.).
  ◦ none : pas de préchargement. Utile si vous souhaitez éviter le gaspillage de bande passante sur votre site.

Code CSS associé :
audio, video
{
margin-left: 30px;   /* Marge extérieure gauche */
}

Suite...