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.posterwyś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.captionsdla 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
Jeśli chciałbyś być poinformowany o następnych kursach to zapisz się do naszego newslettera: