Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Eskimon Les balises audio et vidéo en HTML5 12 août 2019 Table des matières 1.

Eskimon Les balises audio et vidéo en HTML5 12 août 2019 Table des matières 1. Les balises audio et vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.1. Les balises audio et vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.2. Les éléments importants de ces balises . . . . . . . . . . . . . . . . . . . 2 1.3. Contrôler (simplement) le média . . . . . . . . . . . . . . . . . . . . . . 3 2. Interagir un peu plus avec les médias . . . . . . . . . . . . . . . . . . . . . . . . 5 3. TP : Faire votre propre lecteur multimédia . . . . . . . . . . . . . . . . . . . . . 9 3.1. Consigne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.2. Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Contenu masqué . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Le HTML5 a apporté son lot de nouveautés, notamment au niveau du contenu multimédia. En effet, avant, il était bien souvent nécessaire de faire appel à des conteneurs lourds comme Flash. Dorénavant, des balises dédiées à ces usages ont été introduites : — <video> pour les contenus audio ET vidéo ; — <audio> pour les contenus audio uniquement. Dans ce tutoriel, nous allons découvrir comment utiliser ces deux balises. Nous verrons tout d’abord une approche simple de ces dernières, puis nous étudierons comment rendre les choses plus intéressantes en essayant de créer notre propre lecteur multimédia en HTML5. i Afin de bien suivre ce tutoriel, de (petites) bases en HTML sont nécessaires ainsi qu’un peu de JavaScript. i La balise <audio> ayant un comportement très proche de celle de la vidéo (à quelques fonctions près), je me concentrerai davantage sur cette dernière. A la fin de ce tutoriel, vous serez en mesure de réaliser votre propre lecteur multimédia HTML5. Voici quelques exemples : Contenu masqué n°1 1 1. Les balises audio et vidéo 1. Les balises audio et vidéo 1.1. Les balises audio et vidéo Comme vous le savez, en HTML, tout élément est représenté par une balise. audio et video ne feront pas exception. Ces éléments sont de type block et sont écrits de la manière suivante : <audio>  </audio> <video>  </video> 1.2. Les éléments importants de ces balises Bien que leurs buts soient différents, ces deux balises sont très similaires dans leur comportement. Finalement, la seule différence entre un contenu audio et vidéo est que le second peut inclure le premier (mais pas nécessairement). Dans un cas comme dans l’autre, on souhaite lire une piste et aﬃcher une interface à l’utilisateur pour interagir avec cette dernière. Cela nous amène donc au premier attribut indispensable de ces deux balises : la source. 1.2.1. La source Savoir aﬃcher une balise audio/vidéo c’est bien, mais si on ne lui donne rien à aﬃcher, on n’est pas plus avancé ! Il va donc falloir donner une source à aﬃcher. Tout comme pour une image, elle peut être relative ou absolue. Il existe deux moyens pour la spécifier. 1.2.1.1. Via l’attribut src Là encore, comme pour une image, il suﬃt de spécifier l’attribut src pour donner un lien vers la vidéo ou le ﬂux audio à lire. <video src="http://masource.com/lavideo.avi"> </video> 2 1. Les balises audio et vidéo 1.2.1.2. Via la balise <source> Cependant, il peut être intéressant de proposer plusieurs formats à l’utilisateur. En effet, tous les navigateurs ne savent pas lire tous les formats vidéo. On propose donc la même vidéo dans des formats différents et le navigateur choisira ! Pour cela, on utilise la balise <source> dans la balise audio/vidéo. <video> <source src="chemin/vers/masource.mp4" type="video/mp4"> <source src="chemin/vers/masource.ogg" type="video/ogg"> <source src="chemin/vers/masource.webm" type="video/webm"> </video> Voici une petite démonstration1 de ce dernier cas : !(https ://jsfiddle.net/tmjosu22/3/) ? Mais c’est pourri, on peut pas lancer la vidéo ! Ça marche pas ! En fait si, tout marche très bien, c’est juste que maintenant que nous avons la vidéo, il va falloir la contrôler… 1.3. Contrôler (simplement) le média Maintenant que la vidéo est présente, ajoutons un peu d’interactivité à cette dernière… 1.3.1. Les options « natives » Les balises multimédia possèdent par défaut quelques attributs bien pratiques. En effet, voici une liste non exhaustive de celles que j’estime être les plus utiles dans l’immédiat : — controls : permet de rajouter des boutons de contrôle de lecture standards (lec- ture/pause, barre de progression, plein-écran…) ; — autoplay : (plutôt évident…) la lecture est lancée automatiquement dès que la vidéo commence à se charger ; n’en abusez pas, cela peut être assez gênant pour la navigation ; — poster * : lien vers une image d’illustration si la vidéo n’est pas disponible à l’adresse spécifiée ; — loop : relance la lecture quand cette dernière est terminée, encore et encore ; — height et width * : pour spécifier une hauteur et une largeur au lecteur ; — muted : coupe le son. * ne s’applique pas à la balise audio Voici par exemple une vidéo avec des contrôles, dont le son est coupé, qui jouera en boucle et dont la taille a été limitée à 320x240 pixels. 3 1. Les balises audio et vidéo <video width="320" height="240" controls muted loop> <source src="chemin/vers/masource.mp4" type="video/mp4"> <source src="chemin/vers/masource.ogg" type="video/ogg"> <source src="chemin/vers/masource.webm" type="video/webm"> </video> !(https ://jsfiddle.net/tmjosu22/4/) Vous savez maintenant aﬃcher une vidéo ou jouer un son ! 1.3.2. Encore plus loin, des sous-titres pour les vidéos Dans notre monde moderne et international, il arrive que les sous-titres puissent être nécessaires pour offrir le contenu à un plus grand public. Et c’est là que la balise <track> intervient. Placée dans une balise vidéo, cette dernière proposera des sous-titres au lecteur. La balise track a besoin des informations suivantes : — src : la source (relative ou absolue) du fichier de sous-titres (au format WebVTT .vtt (WEB Video Text Track)) ; — kind="subtitles" : pour préciser que l’on parle de sous-titres ; — srclang : le code international de la langue (en, de, fr…) ; — label : le nom littéral de la piste de sous-titres. Par exemple : <video controls> <source src="ma-super-video.mp4" type="video/mp4"> <source src="ma-super-video.ogg" type="video/ogg"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="Francais"> </video> ! À l’heure d’écriture de ce tutoriel, cette balise est encore très peu supportée dans les navigateurs. 4 2. Interagir un peu plus avec les médias 1.3.3. Fallback Si l’utilisateur qui visite votre site possède un navigateur un peu rétro ou incomplet vis-à-vis des standards du Web, il serait de bon ton de l’avertir que le contenu ne peut être aﬃché plutôt que de le laisser attendre indéfiniment un média qui n’arrivera jamais. Pour cela, il suﬃt tout simplement d’ajouter du HTML dans la balise média concernée. Si le navigateur ne sait pas interpréter la balise vidéo/audio, alors il ignorera les balises et aﬃchera notre fallback. Sinon ce contenu est ignoré car la balise est correctement interprétée. <video>  <source src="…">  <p class="alert"> Votre navigateur ne supporte pas la balise vidéo ! Mettez-vous à jour ! </p> </video> i Plutôt que d’aﬃcher du texte, vous pouvez très bien aussi aﬃcher un conteneur Flash en solution de secours pour jouer la vidéo. L’idéal est même de proposer une alternative ET les liens de téléchargement de la vidéo, si la licence de distribution de cette dernière le permet. 2. Interagir un peu plus avec les médias Lorsque l’on a un média, on peut avoir envie d’interagir un peu plus avec que simplement aﬃcher les contrôles de base. Nous ferons alors appel à JavaScript pour rentrer dans les entrailles du lecteur… Imaginons que nous voulions proposer un lecteur sans contrôles natifs, mais uniquement avec nos boutons HTML que nous pourrions styliser via du CSS. Il faudrait alors que ces boutons interagissent avec la vidéo correctement. Admettons que nous uploads/Litterature/ les-balises-audio-et-video-en-html5.pdf