Les Balises Multimédia En HTML

Contenu du cours

A propos des balises multimédia
Liste des balises multimédia
Exemples d'usage des balises multimédia

1. A propos des balises multimédia

Les balises multimédia en HTML permettent d'intégrer différents types de contenus visuels et audio sur une page web. Elles offrent aux développeurs la possibilité d'enrichir l'expérience utilisateur en incluant des images, des vidéos, des fichiers audio et d'autres éléments interactifs. Ces balises permettent de rendre le contenu plus engageant et informatif pour les visiteurs du site. Les balises multimédia permettent d'intégrer des ressources externes ou de référencer des fichiers locaux, offrant ainsi une grande flexibilité dans la présentation du contenu. Les navigateurs interprètent ces balises pour afficher le contenu multimédia de manière appropriée, que ce soit en affichant des images, en jouant des vidéos ou en diffusant des fichiers audio... L'utilisation appropriée de ces balises améliore l'accessibilité et l'expérience utilisateur pour les personnes ayant des besoins différents, tout en apportant de la variété et de l'interaction aux pages web.

2. Liste des balises multimédia

<img> : Utilisée pour afficher des images sur une page web. Elle permet d'intégrer des images statiques, des icônes ou des graphiques.
<audio> : Utilisée pour intégrer et lire des fichiers audio sur une page. Les balises <source> peuvent être utilisées à l'intérieur de <audio> pour fournir des formats audio différents pour une compatibilité étendue.
<video> : Permet d'intégrer et de lire des vidéos sur une page web. Les balises <source> peuvent également être utilisées à l'intérieur de <video> pour fournir des formats vidéo variés.
<source> : Utilisée à l'intérieur des balises <audio> et <video> pour spécifier des sources de fichiers audio ou vidéo. Cela permet de fournir plusieurs formats pour une meilleure compatibilité entre les navigateurs.
<track> : Utilisée à l'intérieur de la balise <video> pour fournir des pistes de texte associées à la vidéo, comme des sous-titres ou des descriptions audio.
<map> : Utilisée avec l'élément <area> pour créer des zones cliquables sur une image, créant ainsi des images cartographiques ou interactives.
<area> : Utilisée à l'intérieur de l'élément <map> pour définir des zones cliquables sur une image, souvent utilisées pour créer des liens ou des actions interactives.
<object> : Utilisée pour intégrer des objets multimédias tels que des applets Java, des fichiers Flash ou d'autres contenus embarqués.
<param> : Utilisée à l'intérieur de l'élément <object> pour spécifier des paramètres pour un objet multimédia.
<embed> : Utilisée pour intégrer des contenus multimédias tels que des fichiers audio, vidéo, Flash ou d'autres types, directement dans la page.
<canvas> : Permet de dessiner des graphiques, des images et des animations en utilisant JavaScript.
<svg> : Utilisée pour créer des graphiques vectoriels et des illustrations en utilisant Scalable Vector Graphics (SVG).
<iframe> : Permet d'afficher un contenu intégré dans une fenêtre incorporée à l'intérieur d'une page web.

3. Exemples d'usage des balises multimédia

Exemple. (Balise <audio> : intégration d'un fichier audio dans une page.)

<audio controls>
<source src="morceau.mp3" type="audio/mpeg">
Votre navigateur ne prend pas en charge l'élément audio.
</audio>

Votre navigateur ne prend pas en charge l'élément audio.

</audio>

Exemple. (Balise <video> : intégration d'une vidéo dans une page.)

<video controls width="400">
<source src="video.mp4" type="video/mp4">
Votre navigateur ne prend pas en charge la vidéo.
</video>

Votre navigateur ne prend pas en charge la vidéo.

</video>

Exemple. (Balise <canvas>: dessiner un cercle dans un canvas avec JavaScript.)

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fillStyle = "blue";
context.fill();
</script>

const canvas = document.getElementById("myCanvas");

const context = canvas.getContext("2d");

context.beginPath();

context.arc(100, 100, 50, 0, 2 * Math.PI);

context.fillStyle = "blue";

context.fill();

</script>

balise canva html cercle

Exemple. (Balise <svg> : création d'un rectangle avec SVG.)

<svg width="100" height="100">
<rect width="80" height="80" style="fill:rgb(0,0,255)" />
</svg>

</svg>

draw rectangle with svg html tag

Balise <iframe> : intégration de la page d'accueil de wikipedia)

<iframe 
src="https://fr.wikipedia.org/wiki/Portail:Accueil"  
width="400" height="300" style="border:2;"> 
</iframe>

<iframe

src="https://fr.wikipedia.org/wiki/Portail:Accueil"

width="400" height="300" style="border:2;">

</iframe>

balise iframe html

Exemple. (Balise <object> : intégration d'un fichier Flash)

<object width="400" height="300" data="animation.swf">
<param name="movie" value="animation.swf">
Votre navigateur ne prend pas en charge l'élément object.
</object>

Votre navigateur ne prend pas en charge l'élément object.

</object>

Exemple. (Balise <embed> )

intégration d'un fichier audio en utilisant <embed> (bien que <audio> soit préférable dans ce cas).

<embed src="morceau.mp3" type="audio/mpeg" width="300" height="45">

1	<embed src="morceau.mp3" type="audio/mpeg" width="300" height="45">

Remarque

Gardez à l'esprit que les exemples ci-dessus ne sont qu'une illustration basique des possibilités de chaque balise. Dans des projets réels, vous pouvez personnaliser davantage le contenu et les attributs pour répondre à vos besoins spécifiques.

Younes Derfoufi
CRMEF OUJDA

Post Views: 445

Acheter sur Très Facile !