Tagi związane z multimediami

Ten artykuł wyjaśnia tagi związane z multimediami.

Wyjaśnia, jak opisywać obrazy, filmy, dźwięki itp. w HTML, a także elementy zwijane i ramki osadzone.

YouTube Video

Tagi związane z multimediami

Tag <img>

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

• Tag <img> służy do osadzania obrazów. Atrybut src określa ścieżkę do obrazu, a atrybut alt dostarcza opis, gdy obraz nie może zostać wyświetlony.

Tagi <figure> i <figcaption>

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

• Tag <figure> grupuje treści multimedialne, takie jak obrazy czy ilustracje, razem z podpisem przy użyciu tagu <figcaption>.

Tag <picture>

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>

• Tag <picture> jest używany do obsługi responsywnych obrazów, pozwalając na wybór odpowiedniego obrazu w zależności od różnych warunków wyświetlania.

• Atrybut media określa warunki w tym samym formacie, co zapytania medialne CSS.

  • Można określić warunki, takie jak minimalna szerokość (min-width), maksymalna szerokość (max-width) lub orientacja ekranu (orientation).

• W tym przykładzie następujące obrazy są wyświetlane w zależności od szerokości ekranu.

  • Jeśli szerokość ekranu wynosi 800px lub więcej, wyświetlany jest large.jpg.
  • Jeśli szerokość ekranu wynosi 400px lub więcej, ale mniej niż 800px, wyświetlany jest medium.jpg.
  • Jeśli szerokość ekranu jest mniejsza niż 400px, wyświetlany jest small.jpg (obraz w tagu <img>).

Tag <canvas>

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>

• Tag <canvas> udostępnia obszar, w którym można rysować dynamiczną grafikę za pomocą JavaScript.

Tag <map>

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>

• Tag <map> jest używany do definiowania mapy obrazów. Klikalne obszary na mapie są definiowane za pomocą tagu <area>. Pozwala to na uczynienie określonych części obrazu klikalnymi, prowadzącymi do odnośnika.
• Określ nazwę powiązanego elementu mapy (znacznik <map>) w atrybucie usemap znacznika <img>, poprzedzoną #.
• Odpowiednie określenie atrybutu alt w znaczniku <area> może poprawić dostępność dla osób niedowidzących.

Tag <embed>

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

• Tag <embed> jest używany do osadzania zewnętrznych treści, takich jak pliki PDF, filmy lub audio.

Tag <video>

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>

• Tag <video> służy do osadzania treści wideo. Możesz określić wiele formatów za pomocą tagu <source>.

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>

• Atrybut preload pozwala określić, jaka część wideo powinna zostać załadowana przez przeglądarkę przed rozpoczęciem odtwarzania.
  • auto instruuje przeglądarkę, aby wczytała całe multimedia. Może to zmniejszyć opóźnienie na początku odtwarzania, ale dane mogą zostać pobrane, nawet jeśli użytkownik nie odtworzy multimediów.
  • metadata ładuje jedynie metadane multimediów (np. długość, informacje o ścieżkach). Same dane multimedialne nie są ładowane, dopóki użytkownik nie rozpocznie odtwarzania. Jest to odpowiednie, gdy potrzebujesz skróconych informacji o mediach.
  • none nie wczytuje wstępnie pliku multimedialnego. Media nie pobierają zasobów, dopóki nie rozpocznie się odtwarzanie. Jest to odpowiednie, gdy chcesz zminimalizować zużycie danych.

Tag <audio>

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>

• Tag <audio> służy do osadzania treści audio. Tag <source> obsługuje wiele formatów.
• Podobnie jak znacznik <video>, atrybut preload może być używany do określenia, jaka część audio powinna zostać załadowana przed rozpoczęciem odtwarzania.

Znacznik <track>

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>

• Znacznik <track> jest używany do określania ścieżek tekstowych, takich jak napisy i podpisy. Może być używany wewnątrz znaczników <audio> lub <video>.
• Atrybut kind pozwala określić przeznaczenie ścieżki (np. napisy, podpisy, rozdziały, itd.). Możesz określić następujące wartości.
  • subtitles dostarczają napisy, które tłumaczą treść wideo lub audio, lub ułatwiają ich zrozumienie widzom. Ich głównym celem jest bezpośrednie tłumaczenie dźwięku.
  • captions dostarczają dodatkowe informacje, takie jak muzyka i efekty dźwiękowe, dla osób niesłyszących lub niedosłyszących, oprócz samego dźwięku.
  • descriptions to ścieżki, które opisują wizualną zawartość wideo, takie jak akcje i scenerie, dla osób niewidomych lub słabowidzących.
  • chapters dostarczają znaczniki rozdziałów (tytuły rozdziałów) wskazujące konkretne punkty w wideo.
  • metadata dostarcza dodatkowe informacje do parsowania lub przetwarzania mediów, ale nie są one widoczne dla użytkowników.

Tag <iframe>

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