Ajouter des éléments audio et vidéo à votre page Web

L’ajout d’éléments audio et vidéo dans vos pages Web est plus facile avec HTML5. Grâce à la prise en charge des objets audio et video natifs dans les navigateurs modernes, vous pouvez ajouter des éléments de style et des éléments de programme multimédias sans logiciel supplémentaire.

Dans cette section

RubriqueDescription

Ajouter un lecteur audio à votre page Web

Grâce à HTML5, vous pouvez ajouter un lecteur de musique à votre page Web sans recourir à un module complémentaire ou plug-in tiers.

Comment utiliser HTML5 pour lire des fichiers vidéo sur votre page Web

À l’aide de la vidéo HTML5, vous pouvez ajouter et contrôler du contenu vidéo sur vos pages Web, sans avoir besoin de contrôles externes ni de plug-ins.

Rendre vos vidéos accessibles à l’aide de pistes de texte synchronisé

En tant que compagnon de l’élément video HTML5, l’API Timed Text Track fournit les outils permettant d’ajouter des éléments d’accessibilité, des transcriptions traduites ou du contenu étendu à vos vidéos.

 

Introduction

Traditionnellement, l’ajout de contenu multimédia à vos page Web implique de choisir entre de nombreux modèles pour ajouter des éléments audio et vidéo. La plupart des éléments multimédias pris en charge nécessitent des logiciels supplémentaires qui exigent des mises à jour fréquentes, sont parfois difficiles à programmer et peuvent s’avérer limités lorsqu’il s’agit de les intégrer dans votre page. La prise en charge des éléments audio et vidéo HTML5 natifs peuvent grandement faciliter l’ajout de contenu multimédia.

La spécification HTML5 décrit les éléments audio et vidéo et les propriétés et méthodes associées qu’il est possible d’utiliser au même titre que n’importe quel autre élément dans une page. À mesure qu’augmente la prise en charge des navigateurs et que la spécification s’améliore, il sera possible de créer des pages avec du contenu plus attrayant. Par exemple, en intégrant plusieurs éléments audio, votre page peut lire un morceau avec plusieurs instruments sur des pistes audio distinctes.

Lorsque vous ajoutez un élément vidéo à votre page, vous pouvez afficher une image d’espace réservé, affiner le style de l’élément à l’aide de feuilles de style en cascade (CSS) et choisir entre des contrôles natifs ou la possibilité de créer vos propres contrôles. Les méthodes, les événements et les propriétés vous permettent de lancer et d’interrompre une lecture, de rechercher ou de modifier du contenu, ou bien de basculer entre plusieurs pistes audio.

Grâce à l’élément track, vous pouvez ajouter des sous-titres à vos vidéos aussi aisément que si vous créiez et spécifiiez un simple fichier texte. L’élément vidéo gère l’ensemble de la synchronisation et de l’affichage. Si vous souhaitez ajouter des légendes vous-même, des API vous permettent également de le faire à partir d’un script.

En progressant dans l’écriture de scripts audio et vidéo HTML5, vous découvrirez que ces deux types de script partagent de nombreuses méthodes et propriétés similaires. Dès que vous saurez comment créer un événement à déclencher au démarrage et à l’arrêt de vos scripts audio, vous pourrez réutiliser ce code dans vos scripts vidéo.

Les liens présentés ci-dessous vous permettront d’approfondir votre maîtrise des éléments audio et vidéo HTML5 pour mieux surprendre le public que cible votre site Web.

Soyez inspiré

Une fois les rudiments assimilés, inspirez-vous du contenu créatif des articles suivants et profitez d‘informations détaillées sur les performances, les meilleures pratiques et tout ce que l’utilisation des fonctionnalités audio et vidéo HTML5 vous permet d’accomplir de plus.

Exploiter la puissance de l’élément audio HTML5Cet article commence par une présentation rapide sur la manière d’ajouter et d’initialiser des éléments audio dans votre page. Vous découvrirez ensuite les différentes façons de précharger du contenu et les effets de cette action sur les performances. Un exemple de musique multipistes y est également inclus pour vous montrer comment lire du contenu en boucle et synchroniser plusieurs pistes audio. L’article présente enfin des sites réels dans lesquels l’élément audio HTML5 est utilisé de manière créative et ingénieuse.
Format audio natif avec HTML5Aborde la compatibilité de l’élément audio HTML5 et des API dans les principaux navigateurs. Vous découvrirez aussi comment utiliser les différents codecs pris en charge, définir des types MIME et établir un mécanisme de secours quand votre page se charge dans un navigateur qui ne prend pas en charge l’élément audio HTML5.
Lire vos vidéos HTML5 sur des appareils mobilesCet article explique comment diffuser vos créations. Il présente à la fois la solution vidéo HTML5 et d’autres solutions compatibles. L’auteur dévoile aussi quelques pièges pouvant surprendre même des programmeurs chevronnés.
Création de sous-titres de vidéo HTML5 (HTML5 Video Caption Maker)Cet outil vous permet de créer facilement des fichiers de texte synchronisé dans les formats WebVTT (Web Video Text Track) et TTML (Timed Text Markup Language).

 

Mettez le code en pratique

Voici quelques démonstrations intéressantes qui présentent ce qu’il est vous est possible de réaliser avec votre code audio et vidéo HTML5. Utilisez les outils de développement F12 et l’onglet Script pour découvrir le code que cachent les démonstrations. Pour plus d’informations sur les outils F12, voir Comment utiliser les outils de développement F12 pour déboguer vos pages Web.

Sous-titrage vidéo IE10Montre comment ajouter des sous-titres dans vos vidéos HTML5 à l’aide de l’élément <track>.
IE BeatzDémonstration amusante destinée aux batteurs chevronnés et en herbe décrivant comment utiliser plusieurs éléments audio pour superposer des sons.
Lecteur audio HTML5 + Sélection XMLCette démonstration allie l’élément audio HTML5 à du code XML natif pour la sélection et la technologie SVG (Scalable Vector Graphics) pour les contrôles.

 

 

 

Afficher:
© 2014 Microsoft