Media-gerelateerde tags

Dit artikel legt media-gerelateerde tags uit.

Legt uit hoe je in HTML afbeeldingen, video's, audio, enz. beschrijft, evenals inschuifbare elementen en inline frames.

YouTube Video

Media-gerelateerde tags

<img>-tag

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• De <img>-tag wordt gebruikt om afbeeldingen in te voegen. Het src-attribuut specificeert het afbeeldingspad en het alt-attribuut biedt een beschrijving wanneer de afbeelding niet kan worden weergegeven.

<figure>- en <figcaption>-tags

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• De <figure>-tag groepeert mediacontent zoals afbeeldingen of illustraties samen met een bijschrift, met behulp van de <figcaption>-tag.

<picture>-tag

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• De <picture>-tag wordt gebruikt om responsieve afbeeldingen te ondersteunen, waardoor de geschikte afbeelding kan worden gekozen op basis van verschillende weergaveomstandigheden.

• De media-attribuut specificeert voorwaarden in hetzelfde formaat als CSS-mediaselectors.

  • U kunt voorwaarden opgeven zoals de minimale breedte (min-width), maximale breedte (max-width) of schermoriëntatie (orientation).

• In dit voorbeeld worden de volgende afbeeldingen weergegeven, afhankelijk van de schermbreedte.

  • Als de schermbreedte 800px of meer is, wordt large.jpg weergegeven.
  • Als de schermbreedte 400px of meer maar minder dan 800px is, wordt medium.jpg weergegeven.
  • Als de schermbreedte minder dan 400px is, wordt small.jpg (de afbeelding in de <img>-tag) weergegeven.

<canvas>-tag

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• De <canvas>-tag biedt een gebied waar dynamische grafische elementen kunnen worden getekend met behulp van JavaScript.

<map>-tag

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• De <map>-tag wordt gebruikt om een afbeeldingskaart te definiëren. Klikbare gebieden binnen de kaart worden gedefinieerd met behulp van de <area>-tag. Hierdoor kunnen specifieke delen van een afbeelding klikbaar zijn, wat leidt naar een link.
• Specificeer de naam van het geassocieerde kaartelement (<map>-tag) in het usemap-attribuut van de <img>-tag, voorafgegaan door #.
• Door het alt-attribuut van de <area>-tag op een juiste manier te specificeren, kunt u de toegankelijkheid voor visueel gehandicapte gebruikers verbeteren.

<embed>-tag

1<embed src="movie.mp4" width="300" height="200">

• De <embed>-tag wordt gebruikt om externe content zoals pdf's, video's of audio in te voegen.

<video>-tag

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• De <video>-tag wordt gebruikt om videocontent in te voegen. Je kunt meerdere formaten specificeren met behulp van de <source>-tag.

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• Met het attribuut preload kunt u speciferen hoeveel van een video geladen moet worden door de browser voordat het afspelen begint.
  • auto instrueert de browser om de volledige media vooraf te laden. Dit kan de vertraging bij het starten van het afspelen verkorten, maar er kan data worden gedownload zelfs als de gebruiker de media niet afspeelt.
  • metadata laadt alleen de metadata van de media (bijv., duur, trackinformatie). De mediadata zelf wordt niet geladen totdat de gebruiker het afspelen start. Dit is geschikt wanneer u samenvattende informatie over de media nodig heeft.
  • none laadt de mediabestand niet vooraf. De media downloadt geen bronnen totdat het afspelen begint. Dit is geschikt als u het dataverbruik wilt minimaliseren.

<audio>-tag

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• De <audio>-tag wordt gebruikt om audiocontent in te voegen. De <source>-tag ondersteunt meerdere formaten.
• Net zoals bij de <video>-tag kan het preload-attribuut worden gebruikt om te specificeren hoeveel audio geladen moet worden voordat het afspelen begint.

<track>-tag

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• De <track>-tag wordt gebruikt om teksttracks zoals ondertitels en captions te specificeren. Het kan worden gebruikt binnen <audio>- of <video>-tags.
• Met het attribuut kind kunt u het doel van de track specificeren (bijv. ondertitels, captions, hoofdstukken, etc.). Je kunt de volgende waarden specificeren.
  • subtitles bieden ondertitels die de inhoud van video of audio vertalen of het makkelijker maken om te begrijpen voor kijkers. Het belangrijkste doel is de directe vertaling van audio.
  • captions bieden aanvullende informatie zoals muziek en geluidseffecten voor mensen die doof of slechthorend zijn, naast de audio.
  • descriptions zijn tracks die de visuele inhoud van een video beschrijven, zoals acties en landschappen, voor mensen met een visuele beperking.
  • chapters bieden hoofdstukmarkeringen (hoofdstuktitels) om specifieke punten binnen de video te markeren.
  • metadata biedt aanvullende informatie voor het verwerken of verwerken van de media, maar wordt niet weergegeven aan gebruikers.

<iframe>-tag

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• De <iframe>-tag wordt gebruikt om andere HTML-pagina's of externe inhoud (zoals websites, video's of documenten) in de huidige pagina in te sluiten. Het wordt vaak gebruikt om YouTube-video's op een pagina in te sluiten.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video