Dans cette vidéo, le présentateur explique comment intégrer des médias audio et vidéo dans une page web en utilisant les balises HTML5 <video> et <audio>. Il décrit d'abord le contexte historique, où les plugins (notamment Flash) étaient nécessaires, puis montre comment le HTML5 permet une lecture native. Le tutoriel détaille la création d'éléments <video> avec plusieurs balises <source> afin d'assurer la compatibilité entre navigateurs grâce aux formats WebM, MP4 (H.264) et Ogg. Il passe en revue les principaux attributs de la balise vidéo – controls, width, height, autoplay, autobuffer, preload (none, metadata, auto), loop – en expliquant leurs effets et les interactions entre eux. Le même principe est appliqué à l'audio, avec les formats recommandés MP3 et Ogg (et éventuellement WAV, AAC). Le présentateur insiste sur la nécessité de convertir les médias dans plusieurs formats pour couvrir tous les navigateurs, et souligne que les contrôles natifs varient d’un navigateur à l’autre, ce qui justifie la création de contrôles personnalisés via JavaScript. La vidéo se conclut en rappelant que la conception d’interfaces cohérentes nécessite de dessiner ses propres boutons et de les programmer.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle vidéo qui sera consacrée à l'intégration de l'audio et la vidéo sur son site web. Avant le HTML5, la seule manière qui permettait d'intégrer l'audio et la vidéo sur une page web est l'utilisation des plugins. C'est-à-dire que pour lire une piste audio ou une séquence vidéo, il fallait que le navigateur fasse appel à un plugin. Le plugin, c'est tout simplement un petit programme qui est incorporé au navigateur et qui permet d'exécuter des tâches supplémentaires comme la lecture du flux multimédia. Le plugin le plus populaire à l'époque, c'était Flash Media Player. Avec l'avènement du HTML5, la donne a changé puisque le navigateur est actuellement capable de lire les séquences audio et vidéo d'une manière autonome sans faire appel aux plugins. Pour intégrer une vidéo dans sa page web, on fait appel à la balise vidéo. Ensuite, on va spécifier des attributs qui permettent de personnaliser notre vidéo. Par exemple, src égale src, ça spécifie le chemin de la vidéo à exécuter. Ici, dans un dossier qui s'appelle vidéo, j'ai prévu une vidéo avec plusieurs formats. On va par exemple choisir le format WebM, la vidéo WebM. Voilà, il y a juste un problème, c'est que pas tous les navigateurs qui comprennent HTML5 peuvent déchiffrer le contenu du WebM. En fait, même si les navigateurs se partagent le même moteur de rendu, sur le point de vue de l'exécution du flux multimédia, ils ne se ressemblent pas. C'est-à-dire que tout dépend des codecs qui sont embarqués au sein du navigateur. Autrement dit, il y a des navigateurs qui peuvent lire le WebM, il y en a d'autres qui peuvent lire le MP4 ou bien le codec H.264. Et d'autres navigateurs qui peuvent lire le format Ogg. Alors pour ne pas tomber dans le problème d'incompatibilité, la solution la plus simple c'est de prévoir ces 3 vidéos-là. Comment est-ce qu'on va faire? Au lieu de mettre src, on va entrer dans la balise vidéo, on va mettre ici source, la balise source avec src, on va prévoir les 3 extensions possibles, donc video/ webm. On va juste mettre copier. Bon, notez que source est une balise autofermante, alors il n'y a pas de slash source. Ici mp4 et enfin ogv. Bon, maintenant si on fait ça, alors normalement notre vidéo elle peut bien se jouer correctement, sauf qu'il manque encore des attributs pour que notre vidéo puisse vraiment être jouée par l'internaute. On ajoutera l'attribut controls. Control, c'est un attribut booléen, ça veut dire qu'il peut disposer de valeurs soit true ou bien false. Dans ce cas, control signifie que les boutons qui vont contrôler la vidéo sont actifs. Donc quand j'exécute pour voir ce que ça donne, je vais voir maintenant que ma vidéo c'est un petit peu ça, c'est un peu gros, et en plus j'ai des boutons qui permettent de contrôler ma vidéo. Si vous disposez d'une vidéo avec n'importe quelle extension, il suffit de la convertir avec les logiciels de conversion ont ces 3 formats, à savoir le WebM, le MP4 et le Ogg. Vous les intégrez toutes et dans ce cas tous les navigateurs qui comprennent le HTML5, ils sont en mesure de déchiffrer une de ces extensions et du coup lire correctement votre vidéo. Maintenant si je veux redimensionner ma vidéo, il suffit d'appliquer les attributs width et height. Par exemple pour width, je vais mettre 300 ou bien 400. Et height c'est 300. Je réexécute. Et là, donc la fenêtre a été réduite. Donc quand je clique, il y a toujours la vidéo qui s'exécute correctement. Je peux aussi ajouter d'autres attributs comme par exemple ici vous souhaitez que la vidéo se joue automatiquement comme c'est le cas sur YouTube. Il suffit d'ajouter l'attribut autoplay. Dans ce cas, la vidéo s'exécutera au chargement de la page d'une manière automatique. On peut aussi ajouter d'autres attributs comme par exemple autobuffer. Dans ce cas, autobuffer et autoplay font choisir une seule, pas de mettre toutes les deux parce qu'ils sont en quelque sorte contradictoires. Dans ce cas par exemple, on va enlever autoplay. Autobuffer, ça veut dire que tout simplement on ordonne au navigateur de bufferiser le contenu, c'est-à-dire que même si l'internaute n'a pas encore décidé de jouer la vidéo, le navigateur va quand même se mettre à charger le contenu pour qu'il soit bufferisé. Comme ça, si l'internaute décide de jouer la vidéo, le contenu sera déjà chargé. Il y a aussi preload. Preload, il peut posséder 3 valeurs, soit none, auto, voilà comme ça, soit none, auto, ou bien metadata. Là encore, il faut noter une chose, c'est que preload et autobuffer ne vont pas ensemble, il faut en choisir une seule. Par exemple, preload, quand je fais 100, dans ce cas je demande au navigateur de charger juste les metadata, c'est-à-dire il va pas charger le contenu de la vidéo lui-même. Mais juste les informations qui concernent la vidéo, comme par exemple la longueur, le nom de la vidéo, le codec, etc. Donc plein d'informations qui concernent la vidéo. Ce sont des informations qui sont légères à télécharger. Si je mets auto, dans ce cas le navigateur, c'est lui qui va décider est-ce qu'il va charger juste les métadatas ou bien la vidéo en entier. Et si je mets none, alors dans ce cas rien ne sera téléchargé. Il faut attendre jusqu'à ce que l'internaute clique sur le bouton play pour que la vidéo se charge. Il y a aussi l'attribut loop. Alors loop, par défaut, il vaut 1, c'est-à-dire que la vidéo s'exécute une seule fois. Et si vous mettez la valeur -1, alors dans ce cas, la vidéo va se répéter indéfiniment jusqu'à ce que vous décidiez de l'arrêter vous-même. En ce qui concerne l'audio, c'est presque le même principe que la balise vidéo. Il suffit d'exclure les attributs width et height. Par exemple, on va mettre ici audio controls slash audio. Et là, pour les sources, il suffit de mettre source, par exemple audio.mp3 et audio.aug. Alors là, ce qu'il faut noter, c'est la même remarque que pour les vidéos, c'est que tous les navigateurs ne peuvent pas lire le même format même s'ils partagent le même moteur de rendu. Alors les formats possibles, c'est MP3, Ogg, WAV et AAC. Mais généralement, avec juste ces 2 formats-là, on est sûr que tous les navigateurs arriveront à en lire un. Ça veut dire soit MP3 ou bien le Ogg. Même principe que pour les vidéos, si vous disposez d'une piste audio, il suffit de la convertir en ces 2 formats-là les mettre sur le serveur et les déclarer de cette manière. Et dans ce cas, ça va se jouer d'une manière correcte. Bon, maintenant quand j'exécute, je vais voir que la piste audio est là. Malheureusement, je n'ai pas de piste audio pour faire la démonstration, mais de contrôle, ça ressemble un petit peu à ceci. Une dernière remarque, c'est que les boutons qui seront intégrés sur le navigateur, ils sont pas uniformes. Ça veut dire que sur Chrome, ça donne une forme, et sur Safari ou bien d'autres navigateurs, ça donne autre chose. Bien sûr, ça ce n'est pas très professionnel parce que quand même il faut que le design ou bien le rendu soit le même quel que soit le navigateur. Dans ce cas, la solution c'est de dessiner vous-même vos propres boutons et les programmer ensuite avec un langage tel que JavaScript pour qu'ils puissent contrôler la vidéo. Merci pour votre attention et à la vidéo prochaine.
