Pliki wideo i audio w HTML

Wyobraź sobie, że budujesz wirtualne muzeum starożytnego Egiptu. Oprócz tekstów i obrazów, chcesz pokazać odwiedzającym film dokumentalny o piramidach w Gizie lub odtworzyć rekonstrukcję dawnej muzyki egipskiej. HTML daje Ci takie możliwości dzięki znacznikom <video> i <audio>. Tak jak starożytni Egipcjanie łączyli hieroglify z rysunkami na ścianach świątyń, tak Ty łączysz tekst, obrazy i multimedia na stronach internetowych.

Element video

Wideo można osadzić na stronie internetowej za pomocą znacznika <video>. Podstawowa struktura może wyglądać tak:

1<video controls width="500" height="300">
2  <source src="piramidy.mp4" type="video/mp4">
3  Twoja przeglądarka nie obsługuje elementu wideo.
4</video>

• Atrybut controls dodaje elementy sterujące, takie jak przyciski odtwarzania i zatrzymania.
• Atrybuty width i height pozwalają zdefiniować rozmiar wideo.
• Element <source> określa ścieżkę do pliku wideo i jego typ.

Obsługa różnych formatów

Różne przeglądarki mogą obsługiwać różne formaty plików audio i wideo. Możesz dodać wiele elementów <source> w różnych formatach, aby upewnić się, że przynajmniej jeden z nich zostanie obsłużony.

1<video controls>
2  <source src="piramidy.mp4" type="video/mp4">
3  <source src="piramidy.webm" type="video/webm">
4  Twoja przeglądarka nie obsługuje elementu wideo.
5</video>

Wbudowanie pliku audio

Podobnie jak w przypadku wideo, audio można osadzić na stronie internetowej za pomocą znacznika <audio>.

1<audio controls>
2  <source src="muzyka-egipska.mp3" type="audio/mpeg">
3  Twoja przeglądarka nie obsługuje elementu audio.
4</audio>

• Atrybut controls dodaje elementy sterujące, takie jak przyciski odtwarzania i zatrzymania.
• Element <source> określa ścieżkę do pliku dźwiękowego i jego typ.

Atrybuty dodatkowe

Istnieje wiele dodatkowych atrybutów, które można dodać do znaczników <audio> i <video>, takich jak autoplay, loop, muted i inne, które pozwalają na bardziej precyzyjną kontrolę nad odtwarzaniem.

1. autoplay:

Pozwala automatycznie rozpocząć odtwarzanie audio lub wideo, gdy strona jest wczytywana. Choć może to być przydatne w niektórych przypadkach, warto pamiętać, że wielu użytkowników może to postrzegać jako drażniące.

1<audio src="muzyka.mp3" autoplay></audio>
2<video src="film.mp4" autoplay></video>

2. loop:

Ten atrybut sprawia, że multimedia będą odtwarzane w kółko, od początku do końca, nieustannie.

1<audio src="muzyka.mp3" loop></audio>
2<video src="film.mp4" loop></video>

3. muted:

Atrybut ten wycisza dźwięk pliku audio lub wideo. Może być przydatny, gdy chcemy, aby wideo działało w tle strony, ale nie chcemy, aby zakłócało doświadczenie użytkownika.

1<video src="film.mp4" muted></video>

4. controls:

Dodanie tego atrybutu wyświetla standardowe elementy sterujące odtwarzaczem, takie jak przyciski play/pause, pasek postępu i głośność.

1<audio src="muzyka.mp3" controls></audio>

5. preload:

Atrybut ten pozwala przeglądarce na wczytanie pliku audio lub wideo przed kliknięciem play przez użytkownika. Można go ustawić na "none" (nie wczytuj), "metadata" (wczytaj tylko metadane) lub "auto" (wczytaj cały plik, jeśli to możliwe).

1<video src="film.mp4" preload="metadata"></video>

Osadzanie filmów z YouTube

W praktyce najczęściej osadzamy filmy z serwisów zewnętrznych, takich jak YouTube. Do tego używamy znacznika <iframe>:

1<iframe width="560" height="315"
2  src="https://www.youtube.com/embed/identyfikator_filmu"
3  title="Film o piramidach w Gizie"
4  frameborder="0"
5  allow="accelerometer; autoplay; clipboard-write; encrypted-media"
6  allowfullscreen>
7</iframe>

Element <iframe> pozwala na osadzenie innej strony wewnątrz Twojej strony. Jest to standardowy sposób osadzania filmów z YouTube, map z Google Maps i wielu innych usług zewnętrznych.

Podsumowanie

Multimedia to potężne narzędzie w rękach web developera. Pamiętaj o kilku zasadach:

• Zawsze dodawaj tekst zastępczy - przeglądarka wyświetli go, jeśli nie obsługuje elementu <video> lub <audio>
• Używaj atrybutu controls - daj użytkownikowi kontrolę nad odtwarzaniem
• Dodawaj wiele formatów - różne przeglądarki obsługują różne formaty
• Unikaj autoplay z dźwiękiem - to irytuje użytkowników i jest blokowane przez wiele przeglądarek

Tak jak w starożytnym Egipcie muzyka i opowieści towarzyszyły każdemu ważnemu wydarzeniu, tak multimedia wzbogacają Twoje strony internetowe o nowy wymiar doświadczeń!

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>Wideo w HTML</title>
6</head>
7<body>
8    <h1>Osadzanie wideo w HTML</h1>
9
10    <h2>Element &lt;video&gt;</h2>
11    <video width="400" height="300" controls>
12        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
13        Twoja przeglądarka nie obsługuje wideo.
14    </video>
15
16    <h2>Atrybuty elementu video</h2>
17    <ul>
18        <li><strong>controls</strong> - pokazuje przyciski sterowania</li>
19        <li><strong>autoplay</strong> - automatyczne odtwarzanie</li>
20        <li><strong>loop</strong> - zapętlenie wideo</li>
21        <li><strong>muted</strong> - wyciszenie dźwięku</li>
22        <li><strong>poster</strong> - obrazek przed odtworzeniem</li>
23    </ul>
24
25    <h2>Osadzanie przez iframe</h2>
26    <!-- Film z YouTube osadzisz tak samo: src="https://www.youtube.com/embed/identyfikator_filmu" -->
27    <iframe width="400" height="225"
28        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
29        title="Rozkwitający kwiat (film CC0)"
30        frameborder="0"
31        allowfullscreen>
32    </iframe>
33</body>
34</html>