Cours IT Bases HTML 014_Multimédia et contenu intégré

Multimédia et contenu intégré Utilisation des balises audio et vidéo dans HTML5 Application de contenu intégré, comme les cartes, les pages web intégrées, etc.

Images

Les images sont un type de média très important qui peut améliorer l’expérience utilisateur et rendre la transmission d’informations plus intuitive et vivante. En HTML, nous utilisons la balise <img> pour insérer des images. La balise <img> est une balise vide auto-fermante, c’est-à-dire qu’elle n’a pas de balise de fermeture. L’adresse de l’image est spécifiée via l’attribut src (source) de la balise <img>.

Exemple :

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Description de l'image">

Effet :

Les éléments d’image peuvent également inclure les attributs suivants :

• width : Spécifie la largeur de l’image.
• height : Spécifie la hauteur de l’image.
• align : Spécifie l’alignement de l’image.
• border : Spécifie la bordure de l’image.
• hspace : Spécifie l’espacement horizontal entre l’image et les éléments environnants.
• vspace : Spécifie l’espacement vertical entre l’image et les éléments environnants.
• ismap : Spécifie si l’image est une image de carte.

Définir la taille de l’image

Nous pouvons définir la largeur et la hauteur de l’image via les attributs width et height de la balise <img>. Les valeurs de ces deux attributs peuvent être des valeurs de pixels spécifiques ou des pourcentages.

Exemple :

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Description de l'image" width="100" height="100" align="center" border="1">

Effet :

Définir le texte alternatif

Le texte alternatif (alt text) est utilisé pour s’afficher lorsque l’image ne peut pas être chargée. Il est également utilisé par les lecteurs d’écran pour lire le contenu de l’image et aider les personnes malvoyantes à comprendre l’image. Nous définissons le texte alternatif via l’attribut alt de la balise <img>.

Exemple :

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="Ce texte s'affiche lorsque l'image n'est pas trouvée">

Effet :

Lien d’image

Les images peuvent également être utilisées comme hyperliens. Nous devons simplement placer la balise <img> à l’intérieur de la balise <a> pour créer un lien d’image.

Exemple :

1
<a href="https://www.zhaojian.net/">
2
  <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Description de l'image" width="100" height="100" align="center" border="5">
3
</a>

Effet :

[!Résumé]

• Les attributs width et height définissent la largeur et la hauteur de l’image. Les valeurs de ces deux attributs peuvent être des valeurs de pixels spécifiques ou des pourcentages.
• Si la largeur et la hauteur de l’image sont toutes deux définies et que le rapport de ces deux valeurs n’est pas cohérent avec le rapport de l’image elle-même, l’image peut être étirée ou compressée, provoquant une déformation.
• Si un lien d’image a une bordure, la bordure a par défaut la même couleur que l’hyperlien

Vidéo

L’élément vidéo HTML est utilisé pour intégrer des vidéos dans une page web. La balise de l’élément vidéo est <video>.

Exemple :

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Effet :

Les éléments vidéo peuvent également inclure les attributs suivants :

• width : Spécifie la largeur de la vidéo.
• height : Spécifie la hauteur de la vidéo.
• poster : Spécifie l’image d’affiche de la vidéo.
• autoplay : Spécifie si la vidéo se lit automatiquement lors du chargement.
• loop : Spécifie si la vidéo se lit en boucle.
• muted : Spécifie si la vidéo est en sourdine.
• preload : Spécifie si la vidéo est préchargée lors du chargement.

Exemple :

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto">
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Cet exemple contient un élément vidéo. L’URL du fichier vidéo est définie sur mp4.mp4, la largeur sur 400 pixels, la hauteur sur 300 pixels, l’image d’affiche sur zhaojian-avatar.png, la lecture automatique sur true, la boucle sur true, la sourdine sur true et le préchargement sur auto.

Effet :

Une solution vidéo HTML très complète (non recommandée)

L’exemple suivant utilise 4 formats vidéo différents. L’élément <video> de HTML 5 tentera de lire la vidéo dans l’un des formats mp4, ogg ou webm. Si tous échouent, il reviendra à l’élément <embed>.

Exemple :

1
<video width="320" height="240" controls>
2
  <source src="video.mp4" type="video/mp4">
3
  <source src="video.ogg" type="video/ogg">
4
  <source src="video.webm" type="video/webm">
5
  <object data="video.mp4" width="320" height="240">
6
    <embed src="video.swf" width="320" height="240">
7
  </object>
8
</video>

[!Résumé]

• L’élément <source> fournit une option de secours. Si le navigateur ne prend pas en charge ce format, il tentera de lire le fichier vidéo spécifié dans le deuxième élément <source>.

Audio

L’élément <audio> en HTML est utilisé pour intégrer du contenu audio dans une page web.

Exemple :

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls>
2
</audio>

Effet :

Les éléments audio peuvent également inclure les attributs suivants :

• controls : Spécifie si les contrôles audio sont affichés. La valeur par défaut est true.
• autoplay : Spécifie si l’audio se lit automatiquement lors du chargement.
• loop : Spécifie si l’audio se lit en boucle.
• muted : Spécifie si l’audio est en sourdine.
• preload : Spécifie si l’audio est préchargé lors du chargement.

Exemple :

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto">
2
</audio>

Cet exemple contient un élément <audio>. L’URL du fichier audio est définie sur mp3.mp3, les contrôles sur true, la lecture automatique sur true, la boucle sur true, la sourdine sur true et le préchargement sur auto.

Effet :

Élément embed

L’élément embed est un élément introduit dans HTML 4.01. Il peut intégrer tout type de ressource, y compris vidéo, audio, images, Flash, etc. L’élément embed nécessite que le navigateur prenne en charge un plugin spécifique pour l’afficher.

Exemple :

1
<embed src="URL de la ressource" type="Type de ressource">

[!Résumé]

• HTML5 a introduit les éléments <video> et <audio> pour remplacer l’élément <embed>.
• L’élément embed peut intégrer tout type de ressource, tandis que les éléments <video> et <audio> ne peuvent intégrer que des ressources vidéo et audio.
• L’élément embed nécessite que le navigateur prenne en charge un plugin spécifique pour l’afficher, tandis que les éléments <video> et <audio> n’en ont pas besoin.
• L’élément <embed> peut toujours être utilisé, mais il n’est plus recommandé.

Élément object

L’élément object est un élément introduit dans HTML 4.01. Il peut intégrer tout type de ressource, y compris vidéo, audio, images, Flash, etc. L’élément object utilise des éléments <param> pour spécifier les propriétés de la ressource, telles que la largeur, la hauteur, la couleur d’arrière-plan, etc. de la ressource.

Exemple :

1
<object data="URL de la ressource" type="Type de ressource">
2
  <param name="Nom de l'attribut" value="Valeur de l'attribut">
3
  ...
4
</object>

Différences spécifiques entre les éléments object et embed :

[!Résumé]

• Si vous devez intégrer tout type de ressource et que le navigateur prend en charge un plugin spécifique, vous pouvez utiliser l’élément object.
• Si vous devez uniquement intégrer un type spécifique de ressource et que le navigateur n’a pas besoin de prendre en charge un plugin spécifique, vous pouvez utiliser l’élément embed.
• Si vous devez uniquement intégrer des ressources vidéo ou audio, il est recommandé d’utiliser les éléments <video> ou <audio>.
• Les éléments <video> et <audio> ne nécessitent pas que le navigateur prenne en charge des plugins spécifiques et offrent des fonctionnalités plus riches.

Cadres

L’élément <iframe> est une balise HTML utilisée pour intégrer un document dans un autre document. Il permet d’intégrer un document dans un autre document et d’afficher le contenu du document intégré en son sein. Cela est couramment utilisé pour intégrer d’autres pages web, des vidéos, des cartes, etc.

L’élément <iframe> possède les attributs suivants :

• L’attribut src définit l’URL de la page web ou du document à intégrer.
• L’attribut width définit la largeur de l’élément <iframe>.
• L’attribut height définit la hauteur de l’élément <iframe>.
• L’attribut frameborder définit si la bordure de l’élément <iframe> est visible.
• L’attribut border définit la largeur de la bordure de l’élément <iframe>.
• L’attribut framespacing définit l’espacement entre l’élément <iframe> et son contenu environnant.
• L’attribut marginwidth définit la marge gauche et droite de l’élément <iframe>.
• L’attribut marginheight définit la marge supérieure et inférieure de l’élément <iframe>.
• L’attribut scrolling définit si l’élément <iframe> permet le défilement.
• L’attribut name définit le nom de l’élément <iframe>.
• L’attribut id définit l’ID de l’élément <iframe>.
• L’attribut class définit la classe de l’élément <iframe>.

Exemple :

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <title>Élément iframe HTML</title>
5
</head>
6
<body>
7
  <iframe src="https://www.zhaojian.net">
8
    <p>Ceci est un iframe affichant le contenu du site web zhaojian.net.</p>
9
  </iframe>
10
</body>
11
</html>

Effet :