Apprendre la programmation HTML et CSS #11 Figures, videos et audios

Bienvenue dans la 11e partie de cette série pour apprendre le HTML et CSS pour les débutants. Nous allons voir aujourd’hui comment ajouter des médias en HTML. Par média, je veux dire, comment ajouter des vidéos HTML, comment ajouter des sons audio en HTML et comment gérer plusieurs sources avec différents types fichier. 

Et C’est ainsi que nous allons voir aussi comment gérer des figures qui permet de structurer au moteur de recherche et au navigateur que nous visionnons du contenu média. Et nous allons terminer par l’ajout de vidéos sur YouTube sur votre site web. 

Version vidéo

Tu préfères la version vidéo ? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Cours HTML/CSS Débutant #11 – Ajouter des Médias Audio/Vidéo (2022)

Comment ajouter des vidéos en HTML

    Nous allons voir en premier lieu l’ajout de vidéos en HTML. Ce qui est cool avec les vidéos HTML, c’est qu’elles sont simples, il nous faut simplement une balise. Nous allons pouvoir avec les vidéos HTML pouvoir ajouter des contrôles pour faire l’avancement de la vidéo, mettre sur pause etc. Nous allons pouvoir aussi définir une miniature avant de cliquer.

Voici la balise qu’il va falloir ajouter pour ajouter des vidéos en HTML:

<video src=”emplacementdemonfichier.mp4”> </video>

Ici nous ajoutons la balise vidéo et nous y ajoutons l’attribut src qui permet de définir l’emplacement de notre vidéo.

Maintenant si vous allez voir votre vidéo HTML, vous allez voir que vous ne pourrez pas commencer à lire votre vidéo et ça, c’est parce qu’il n’y a pas encore de contrôle pour contrôler la vidéo.

Voici comment ajouter les controls:

<video src=”monemplacement controls> </video>

Il va falloir simplement ajouter l’attribut Controls. 

Comment ajouter des sons en HTML

Ce qui est cool avec le HTML, c’est que sa simplicité qui a grandement évolué au fil du temps. Car oui, je vais vous expliquer comment ajouter des sons, de l’audio en HTML, mais en bref, ça marche simplement de la même manière que les vidéos, nous avons simplement qu’à changer de vidéo par audio. 

Voici la valise pour ajouter des audio en HTML:

<audio src=”mon emplacement” controls> </audio>

Ici, comme nous avons vu plus haut, ce sont les mêmes attributs que la vidéo. Le SRC lui permet de définir l’emplacement de vos fichiers et le controls permet d’ajouter les contrôles pour jouer le fichier. 

Ajouter plusieurs sources

Maintenant que ceci est fait, nous allons voir comment ajouter plusieurs sources. Alors je vais vous expliquer quelque chose. Voici le site qui vous permet de vérifier la comptabilité des navigateurs. En bref, il se peut que certains navigateurs ne supportent pas certains types de fichiers média, ce qui est un gros problème lorsqu’on veut jouer des fichiers video et audio sur notre site web. C’est alors que plusieurs sources sont utiles. 

Bref, nous allons pouvoir prendre notre fichier vidéo ou audio qui sont sous plusieurs formats par exemple MP3, le wav etc…

Et un navigateur va prendre, lui qui est plus compatible avec lui. 

Pour ajouter plusieurs sources vous allez tout d’abord enlever l’attribut src à votre balise.

Ensuite, nous allons ajouter la balise source entre les balises audio où vidéo. 

<audio controls>
    <source>monemplacement.mp3</source>
    <source>monemplacement.wav</source>
</audio>

Et donc si un de vos navigateurs n’est pas compatible avec MP3, il va prendre le wav.

Petit Rappel sur les Figures

Bon désormais que nous avons comment ajouter les vidéos et les audios. Nous allons voir comment ajouter des figures. Les figures, elles permettent de définir du média et du contenu. En bref, je vous conseillerais de l’ajouter à tout les médias qui sont dans votre contenu. Exemple, vous avez des vidéos, de l’audio et images dans votre contenut ? Tentez de tous les englober dans des balises figures.

Cela va permettre de définir ce qui est votre contenu média et non du texte, ceci seras une figure et donc vous allez pouvoir dire au navigateur ainsi qu’aux monteurs de recherche que votre contenu est du contenu supplémentaire.

Voici comment ajouter des figures:

<figure>
    <audio></audio>
</figure> 

<figure>
    <video> </video>
</figure>

<figure>
    <img src=”...” />
</figure>

En bref, ceci va vous permettre de définir tout ce qui est du contenu autre que du texte. Mais il y a un autre avantage, ça va permettre de sous-titré nos médias. 

Voici comment sous-titrer n’importe quel élément qui se retrouve dans une figure. 

<figure>
    <audio src=”booba.mp3”></audio>
<figcaption>Chanson de booba</figcaption>
</figure>

<figure>
    <video src=”videoinformerick.mp4> </video>
<figcaption> Video d’informerick </figcaption>
</figure>

En bref, ceci va ajouter un texte en dessous de l’élément pour lui dire que qu’est ce qui le correspond et qu’est ce qui est son sous-titre.

Comment Ajouter une video Youtube en HTML avec Iframe

Maintenant, il se peut que vous vous retrouvez dans cette situation que vous devez ajouter une vidéo Youtube sur votre site web. Alors ne vous en faites pas, vous allez pouvoir le faire. Je vais vous montrer comment et en plus c’est encore plus simple que d’ajouter une vidéo HTML. 

Cependant, faites attention. Ajouter une vidéo YouTube sur votre site web devrait être considérée avant de le faire. 

Lorsque nous ajoutons des vidéos YouTube sur notre site web. Cela représente un bout de YouTube sur votre site, alors il va falloir charger YouTube directement dans votre site. Et ce qui est un gros élément qui va ralentir votre site web. 

Alors s’il n’est pas nécessaire de mettre des vidéos YouTube, je ne vous conseille pas de le faire. 

Voici comment ajouter une vidéo YouTube sur son site web:

FAQ

Comment centrer une video html ?

Pour centrer une vidéo HTML, tu dois lui définir en CSS un width (largeur). Par la suite, ajoutes-lui ces propriétés CSS:

• margin-left: auto;
• margin-right: auto;

Comment mettre un audio html?

Tu peux ajouter un fichier audio en html avec la balise:

<audio src= »emplacement de ton fichier.mp3″ controls> </audio>

Ce tutoriels se trouve dans la catégorie: Programmation