Znacznik video: controls i kolejność źródeł w source
Znacznik audio: to samo, bez obrazu
Tekst zastępczy dla przeglądarek, które nie znają tych znaczników
Ćwiczenie: nowa podstrona z filmem lub nagraniem
Rozgrzewka · 3 minuty
Trzy pytania z dodatkowych elementów
Czym różni się div od span?
Po co znacznik iframe ma atrybut title?
Co się stanie, gdy w details zabraknie summary?
Wideo · znacznik video
Znacznik video
Film na stronie wstawiacie znacznikiem video, tak jak obraz znacznikiem img. Bez atrybutu controls film jest na stronie, ale użytkownik nie ma czym go obsłużyć: nie zatrzyma, nie przewinie, nie zmieni głośności.
Cały ten pasek dodaje sama przeglądarka. Wy piszecie tylko jedno słowo: controls.
Ciekawostka z Wikipedii: znacznik video zaproponowała firma Opera Software w lutym 2007 roku. Twórcy przeglądarek szybko wpadli w spór o format: żaden kodek nie pasował wszystkim naraz, dlatego strony do dziś podają wideo w kilku formatach jednocześnie.
MDN: „<video> HTML video embed element” („the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback”) · developer.mozilla.org/docs/Web/HTML/Reference/Elements/video · ciekawostka: en.wikipedia.org/wiki/HTML5_video
Wideo · znacznik source
Kilka źródeł: przeglądarka wybiera sama
Nie każda przeglądarka odtwarza każdy format filmu. Dlatego zamiast jednego adresu w video, wstawiacie kilka znaczników source: przeglądarka sprawdza je po kolei i odtwarza pierwszy format, który rozpoznaje.
Atrybut type mówi przeglądarce, jaki to format, zanim jeszcze zacznie ściągać plik. Bez adresu w samym video: <video controls><source src="video.mp4" type="video/mp4"><source src="film.ogg" type="video/ogg"></video>.
MDN: „the browser will go through the <source> elements and play the first one that it has the codec to support” · developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio
Wideo · atrybuty odtwarzacza
Pięć atrybutów, które warto znać
controls, autoplay, loop, muted piszecie bez wartości: samo słowo włącza. poster to wyjątek, bo dostaje adres obrazka: poster="miniatura.jpg".
MDN: „<video> HTML video embed element” (controls, autoplay, loop, muted, poster) · developer.mozilla.org/docs/Web/HTML/Reference/Elements/video
Audio · znacznik audio
Znacznik audio: to samo, bez obrazu
Nagranie dźwiękowe wstawiacie znacznikiem audio. Działa jak video: te same controls, autoplay, loop, muted, ten sam łańcuch source.
audio nie ma width, height ani poster: nie ma obrazu, więc nie ma czego nimi ustawiać.
Odtwarzacz pokazuje tylko pasek: play/pauza, czas, głośność.
MDN: „<audio> HTML embed audio element” · „The <audio> element doesn't support the width/height attributes… It also doesn't support the poster attribute” (Learn: HTML video and audio) · developer.mozilla.org/docs/Web/HTML/Reference/Elements/audio
Wideo i audio · tekst zastępczy
Tekst między znacznikami: dla starych przeglądarek
Cokolwiek wpiszecie między <video> a </video> (albo między audio), przeglądarka, która zna te znaczniki, po prostu pomija. Pokaże to tylko przeglądarka, która ich nie rozumie: to Wasza siatka bezpieczeństwa.
<videocontrols><sourcesrc="video.mp4"type="video/mp4">Twoja przeglądarka nie obsługuje wideo.<a href="video.mp4">Pobierz film</a>.</video>
Dobry tekst zastępczy zawiera zwykle łącze do samego pliku, żeby ktoś mógł go chociaż pobrać.
MDN: „this will be displayed if the browser accessing the page doesn't support the <video> element” (fallback content) · developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio
Audio i wideo · egzamin
Tak pytają na egzaminie
1.<video controls><source src="video1.mp4" type="video/mp4"><source src="video1.ogg" type="video/ogg">Komunikat dotyczący video</video> Zastosowana w dokumencie HTML definicja multimediów sprawi, że na stronie
zostaną wyświetlone obok siebie dwa filmy z plików: video1.mp4 oraz video1.ogg.
pod wyświetlanym filmem zostanie wyświetlony napis „Komunikat dotyczący video”.
wyświetlony film zostanie automatycznie uruchomiony zaraz po załadowaniu strony internetowej.
zostanie wyświetlony film z pliku video1.mp4 lub w przypadku nierozpoznania formatu MPEG-4 – video1.ogg.
2. W języku HTML atrybutem znacznika video, który włącza tryb odtwarzania w kółko, jest
Nowy plik pages/media.html (skopiuj head z innej podstrony).
Dopisz łącze „Multimedia” w menu na wszystkich swoich stronach.
Wrzuć krótki własny plik video.mp4 albo recording.mp3 do folderu media, potem <video controls> albo <audio controls> z source src="../media/video.mp4".
Między znacznikami: tekst zastępczy, jedno zdanie i łącze do pobrania tego pliku.
Zapisz, F5, sprawdź pasek z przyciskami.
Ma się pojawić: odtwarzacz z przyciskami, gra po kliknięciu play. Ctrl+U: w kodzie jest source i tekst zastępczy, którego nie widać na stronie.
Plik do ćwiczenia: dowolne krótkie własne nagranie w folderze media
Pytania kontrolne
Trzy pytania na koniec
Po co niemal zawsze dopisujecie atrybut controls?
Co zrobi przeglądarka, gdy żadnego z Waszych source nie rozpozna?
Jakich trzech atrybutów nie ma audio, choć ma je video?
To ostatnia lekcja o HTML: wyglądem strony zajmuje się kurs CSS.
Z realnych wdrożeń
A jak to wygląda w produkcji?
Na lekcji
W produkcji
Status
Kilka formatów w source
Format MP4 (kodek H.264) rozpoznaje ok. 97% przeglądarek na świecie, więc wiele stron wstawia tylko jeden source.
upraszczane
Własny plik na serwerze
Duże serwisy trzymają wideo na osobnych serwerach przeznaczonych do tego celu (np. YouTube, Vimeo) zamiast we własnym htdocs: mniej transferu, gotowy odtwarzacz.
zastępowane
Wbudowany pasek controls
Firmy dorabiają własny wygląd paska przez JavaScript (np. biblioteka Video.js), żeby wyglądał tak samo w każdej przeglądarce.
nadbudowane
Atrybut autoplay
Przeglądarki (np. Chrome) uruchamiają autoplay z dźwiękiem tylko po wcześniejszym kliknięciu na stronie; bez dźwięku (muted) puszczają zawsze.
ograniczone przez przeglądarkę
caniuse.com/mpeg4 (obsługa MPEG-4/H.264) · developer.chrome.com/blog/autoplay („Muted autoplay is always allowed”)