HTML5 wprowadza nowe elementy umożliwiające osadzanie multimediów, takich jak wideo i audio, bez potrzeby korzystania z wtyczek zewnętrznych (np. Flash). Te nowe możliwości pozwalają na prostsze i bardziej efektywne zarządzanie multimediami na stronach internetowych.

1. Osadzanie wideo za pomocą <video>

Tag <video> pozwala na osadzanie filmów na stronie i umożliwia kontrolowanie ich odtwarzania bez konieczności korzystania z zewnętrznych narzędzi. Posiada kilka przydatnych atrybutów, które mogą być używane do personalizacji odtwarzacza.

Atrybuty <video>:

• controls – Wyświetla domyślny zestaw kontrolek (odtwarzanie, pauza, pasek postępu itp.).
• autoplay – Film zacznie się automatycznie odtwarzać po załadowaniu strony.
• loop – Film będzie odtwarzany w pętli.
• muted – Film zostanie automatycznie wyciszony.
• poster – Ustawia obrazek wyświetlany przed rozpoczęciem odtwarzania wideo.

Przykład osadzania wideo:

<video controls width="600" poster="poster.jpg">
  <source src="film.mp4" type="video/mp4">
  <source src="film.ogv" type="video/ogg">
  Twoja przeglądarka nie obsługuje tagu wideo.
</video>

W powyższym przykładzie:

• <source> umożliwia podanie różnych formatów wideo, dzięki czemu film może być odtwarzany na różnych przeglądarkach.
• poster wyświetla obrazek przed rozpoczęciem odtwarzania filmu.

Wskazówka: Nie wszystkie przeglądarki obsługują te same formaty wideo, dlatego warto dodać kilka formatów (mp4, webm, ogv), aby zapewnić kompatybilność.

2. Osadzanie dźwięku za pomocą <audio>

Tag <audio> działa podobnie do <video>, ale jest używany do odtwarzania plików dźwiękowych. Również ma kilka przydatnych atrybutów.

Atrybuty <audio>:

• controls – Wyświetla domyślny zestaw kontrolek do odtwarzania dźwięku.
• autoplay – Dźwięk zacznie się automatycznie odtwarzać po załadowaniu strony.
• loop – Dźwięk będzie odtwarzany w pętli.
• muted – Dźwięk będzie automatycznie wyciszony.

Przykład osadzania dźwięku:

<audio controls>
  <source src="muzyka.mp3" type="audio/mpeg">
  <source src="muzyka.ogg" type="audio/ogg">
  Twoja przeglądarka nie obsługuje tagu audio.
</audio>

Podobnie jak w przypadku wideo, warto dodać różne formaty dźwięku (mp3, ogg), aby zapewnić kompatybilność z różnymi przeglądarkami.

3. Atrybuty kontrolne dla multimediów

• controls: Wyświetla kontrolki multimediów (play, pause, głośność itp.).
• autoplay: Automatyczne odtwarzanie multimediów po załadowaniu strony.
• loop: Powtarzanie odtwarzania w nieskończoność.
• muted: Odtwarzanie multimediów w trybie wyciszenia.

Przykład łączenia wideo i audio:

Można również połączyć wideo i dźwięk w jednym pliku multimedialnym.

4. Dodawanie napisów za pomocą <track>

HTML5 umożliwia dodawanie napisów do filmów za pomocą tagu <track>. Napisy są przydatne dla osób niesłyszących lub oglądających wideo w różnych językach.

Przykład dodania napisów:

<video controls>
  <source src="film.mp4" type="video/mp4">
  <track kind="subtitles" src="napisy.vtt" srclang="pl" label="Polski">
  Twoja przeglądarka nie obsługuje tagu wideo.
</video>

• kind="subtitles" – Definiuje, że są to napisy (mogą być również inne wartości, np. captions dla transkrypcji).
• src="napisy.vtt" – Ścieżka do pliku z napisami w formacie VTT.
• srclang="pl" – Określa język napisów (tutaj: polski).
• label="Polski" – Nazwa etykiety wyświetlanej w menu wyboru napisów.

5. Integracja z JavaScript – zaawansowana kontrola multimediów

Za pomocą JavaScript możesz uzyskać bardziej zaawansowaną kontrolę nad wideo i audio. Możesz na przykład programowo wstrzymywać i wznawiać odtwarzanie, zmieniać głośność, czy ustawiać czas odtwarzania.

Przykład kontroli wideo za pomocą JavaScript:

<video id="myVideo" width="600" controls>
  <source src="film.mp4" type="video/mp4">
  Twoja przeglądarka nie obsługuje tagu wideo.
</video>

<button onclick="playVideo()">Odtwórz</button>
<button onclick="pauseVideo()">Pauza</button>

<script>
  var video = document.getElementById("myVideo");

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }
</script>

W tym przykładzie JavaScript kontroluje wideo – możesz odtwarzać i wstrzymywać film za pomocą przycisków.

Ćwiczenie: Tworzenie strony z multimediami

Stwórz stronę internetową, na której osadzisz wideo i audio z odpowiednimi kontrolkami. Dodaj również napisy do filmu, a także skorzystaj z atrybutów takich jak autoplay, loop, czy muted.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Strona z multimediami</title>
</head>
<body>

  <h1>Odtwarzacz wideo</h1>
  <video controls width="600" poster="poster.jpg">
    <source src="film.mp4" type="video/mp4">
    <source src="film.webm" type="video/webm">
    <track kind="subtitles" src="napisy.vtt" srclang="pl" label="Polski">
    Twoja przeglądarka nie obsługuje tagu wideo.
  </video>

  <h2>Odtwarzacz audio</h2>
  <audio controls>
    <source src="muzyka.mp3" type="audio/mpeg">
    <source src="muzyka.ogg" type="audio/ogg">
    Twoja przeglądarka nie obsługuje tagu audio.
  </audio>

</body>
</html>

Gratulacje! Ukończyłeś lekcję 8.
Przejdź teraz do lekcji 9 >> Flexbox – Elastyczny układ stron

Spis Treści - darmowy kurs HTML i CSS

Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS

Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)

Dodatki: 
- Spis tagów HTML
- Spis Właściwości CSS