Znaczniki multimedialne w HTML5
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
HTML5 Media: Teoria, Atrybuty i Zadanie
Zanim wprowadzono standard HTML5, odtwarzanie wideo czy audio wymagało wtyczek (np. Adobe Flash). Dziś przeglądarki obsługują multimedia natywnie.
Znacznik <video> i <audio>
Służą do osadzania plików bezpośrednio z serwera. Są to tzw. znaczniki blokowe, które wymagają zamknięcia. Wewnątrz nich umieszczamy znacznik <source>, który wskazuje ścieżkę do pliku.
Znacznik <iframe> (Mapy i YouTube)
Służy do wyświetlania zawartości innej strony wewnątrz Twojej witryny. Jest to standardowy sposób na osadzanie Map Google czy filmów z YouTube. Działa to na zasadzie „okna” na inną usługę.
Kod iFrame pobieramy zwykle próbując udostępnić fragment mapy np z google maps:
Właściwości i atrybuty mediów
Oto najważniejsze parametry, które pozwalają kontrolować zachowanie odtwarzaczy:
| Atrybut | Opis | Dotyczy |
src | Ścieżka do pliku (URL lub lokalna). | Wszystkie |
controls | Wyświetla pasek odtwarzania, głośność i pauzę. | <video>, <audio> |
autoplay | Film/dźwięk startuje od razu po załadowaniu (często wymaga muted). | <video>, <audio> |
loop | Zapętla odtwarzanie materiału. | <video>, <audio> |
muted | Wycisza dźwięk na starcie. | <video>, <audio> |
poster | Adres obrazka, który wyświetla się przed kliknięciem „Play”. | <video> |
width / height | Określa wymiary odtwarzacza w pikselach lub %. | <video>, <iframe> |
allowfullscreen | Pozwala na przejście w tryb pełnoekranowy. | <iframe> |
Przykład kodu dla wideo:
<video width=”640″ controls poster=”okladka.jpg”>
<source src=”film.mp4″ type=”video/mp4″>
Twoja przeglądarka nie obsługuje tego formatu.
</video>
Zadanie praktyczne: „Multimedialny Warsztat”
Cel: Uczeń potrafi pozyskać media, przygotować je do publikacji i osadzić na stronie za pomocą HTML.
Krok 1: Przygotowanie materiałów (Konwersja)
Znajdź na YouTube krótki film (np. darmowy stock wideo lub tutorial).
Skorzystaj z legalnego narzędzia online do konwersji (np. online-video-converter lub podobne), aby pobrać ten sam materiał w dwóch formatach:
Plik .mp4 (wideo)
Plik .mp3 (tylko ścieżka dźwiękowa)
Nazwij pliki krótko i bez spacji (np.
film.mp4,muzyka.mp3).- Umieść (podobnie jak z mapą Google) znacznik iframe z wybranym video z platformy YouTube lub Dailymotion) zobacz jakie parametry można zmienić we wklejonym kodzie.
Krok 2: Kodowanie strony
Utwórz plik index.html i zbuduj strukturę zawierającą:
Header: na całą szerokość strony w jednolitym kolorze z wyśrodkowanym napisem „Moje multimedia i mapy”
- Sekcję Audio: Odtwarzacz z Twoim plikiem MP3, który ma widoczne kontrolki.
Sekcję Wideo: Odtwarzacz z plikiem MP4 o szerokości 500px, który automatycznie zapętla materiał.
Sekcję Mapy: Wejdź na Google Maps, wybierz dowolne miejsce, kliknij „Udostępnij” -> „Osadź mapę” i skopiuj kod
<iframe>na swoją stronę.
Krok 3: dodatkowo
Dodaj do znacznika wideo atrybut muted oraz autoplay. Zaobserwuj, czy przeglądarka pozwoli na odtworzenie filmu z dźwiękiem bez ingerencji użytkownika (podpowiedź: większość nowoczesnych przeglądarek blokuje autoplay z dźwiękiem).
Przykład rozwiązania zadania:
