Audio et vidéo en HTML5
Avant HTML5, les fichiers audios étaient ajoutés aux pages Web, intégrant le fond sonore à l’aide du tag <bgsound>. Le fichier a été lu lors de l'affichage de la page et l'utilisateur n'a pas eu la possibilité de le désactiver. Avec l'avènement de la nouvelle balise <audio> en HTML5, les fichiers audios sont ajoutés avec une interface logicielle intégrée, et il n'est pas nécessaire de connecter des modules tiers.
Comment ajouter de l'audio à une page Web
Pour ajouter des fichiers audios à une page Web, utilisez l'élément <audio>. Le chemin d'accès au fichier audio est indiqué par l'attribut src, et l’attribut control ajoute un panneau de configuration (bouton de démarrage, défilement, contrôle du volume).
Dans le code, cela ressemble à ceci:
<audio src="name.ogg" controls></audio>Codecs audio et formats de fichiers audio
Étant donné que tous les navigateurs ne prennent pas en charge tous les formats audios, le fichier audio est codé à l'aide de codecs spéciaux (programmes de conversion de données numériques au format d'un fichier audio ou d'un flux audio) et ajoute des fichiers simultanément via la balise <source> avec l'attribut src.
Lorsque vous spécifiez différents formats de fichier, nous vous recommandons de spécifier le type MIME pour chaque fichier afin de permettre au navigateur de localiser le fichier qu'il prend en charge. Définit le type MIME à l'aide de l'attribut type.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg">
<source src="/build/audios/audio.mp3" type="audio/mpeg">
</audio>
<p>Cliquez sur le bouton</p>
</body>
</html>Les formats audios les plus populaires sont les suivants :
MP3 - Le format audio le plus populaire qui utilise une compression avec perte et vous permet de réduire la taille du fichier plusieurs fois. Malgré leur popularité parmi les utilisateurs, les chaînes de télévision et les stations de radio utilisent des codecs ISO-MPEG plus modernes, tels que AAC ou MPEG-H.
AAC (Advanced Audio Codec) — codec fermé, analogue au format MP3, mais comparé à ce dernier, AAC offre une qualité sonore supérieure avec un taux de compression identique ou supérieur.
Ogg Vorbis — format libre open source pris en charge par Firefox, Opera et Chrome. Offre une bonne qualité sonore mais n’est pas largement prise en charge par les lecteurs matériels.
Comment ajouter des fichiers vidéos
Avant la norme HTML5, des plug-ins tiers, tels que QuickTime, RealPlayer ou Flash, étaient utilisés pour ajouter de la vidéo au site. En HTML5, une nouvelle balise <video> a été ajoutée. Elle permet d'insérer des insertions vidéo dans une page Web.
Dans le code, cela ressemble à ceci:
<video src="example.webm." controls></video>L'attribut src indique l’URL du fichier et l'attribut controls est utilisé pour afficher les contrôles. (Plus d'informations sur les attributs de la balise <video>).
Codecs vidéo et formats de fichiers vidéo
Chaque navigateur prend en charge un codec spécifique. Par conséquent, pour assurer la lecture vidéo dans tous les navigateurs, le fichier vidéo doit être placé dans plusieurs formats. Comme dans le cas des fichiers audio, les formats de fichier vidéo sont contenus dans les formats d'élément <source>, en commençant par le plus préféré. De plus, pour chaque fichier vidéo, vous devez spécifier le type MIME, spécifié par l'attribut type.
Pour vous assurer que le navigateur peut gérer les fichiers vidéo, créez un fichier .htaccess dans le dossier contenant la page Web définissant les types MIME de la vidéo :
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
<source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
</video>
<p>Quelques informations sur le vidéo</p>
</body>
</html>Il existe actuellement 3 formats vidéos principaux : MP4 / MPEG-4, OGG et WebM +. Les codecs sont utilisés pour compresser les données vidéo et les restaurer.
Pour le fichier vidéo MPEG-4, le codec vidéo H.264 et le codec audio AAC sont utilisés. Pour utiliser les codecs, vous devez obtenir une licence.
Pour le fichier vidéo Ogg, le codec vidéo Theora et le codec audio open source Vorbis sont utilisés.
Pour les fichiers vidéo WebM +, le codec vidéo VP8 et le codec audio Vorbis sont utilisés. Aucune licence n'est requise pour les utiliser.
Comment ajouter des sous-titres et des légendes
Les sous-titres et les légendes sont ajoutés aux fichiers audio et vidéo à l’aide de l’élément <track>, utilisé comme élément enfant de <audio> et <video>.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4"/>
</video>
<p>Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique, demeurant essentiellement inchangé.</p>
</body>
</html>Pratiquez vos connaissances
