Wstęp

Przed pojawieniem się języka HTML5, istniały już różne sposoby osadzania treści multimedialnych audio/wideo na stronach internetowych:

• Osadzenie pliku
• Uniwersalny sposób odtwarzania plików

Niestety miały one spore wady:

• Większość z nich nie została wcześniej oficjalnie ustandaryzowana, dlatego były interpretowane odmienne lub w ogóle nieobsługiwane w niektórych przeglądarkach.
• Nie istniało standardowe API, dzięki któremu można by w prosty sposób wstawić na stronie odtwarzacz z własną skórką, realizować dynamiczne listy odtwarzania itp.
• Wymagały do działania zainstalowanych wtyczek (np. Adobe Flash Player), przez co czasem nadmiernie obciążały procesor, a przy tym nie były w ogóle obsługiwane przez wiele urządzeń mobilnych (smartfony, tablety). Dodatkowo wymagały od webmastera znajomości środowiska Adobe Flash (i zakup komercyjnej licencji) albo konieczności korzystania jedynie z ogólnodostępnych odtwarzaczy Flash, bez możliwości dopasowania ich do własnych potrzeb.
• Często działały tylko w systemie operacyjnym Microsoft Windows, uniemożliwiając obejrzenie filmów czy posłuchania muzyki użytkownikom Maców i Linuksa.
• Zdarzały się poważne trudności z ustawieniem warstw (otwierane menu, okna dialogowe) ponad oknem wyświetlanym przez wtyczkę. Często okno odtwarzania wtyczki po prostu zawsze przebijało przez taką warstwę.
• Brakowało możliwości zmiany wyglądu przy pomocy CSS.
• Nie było możliwe dołączenie do filmów własnych napisów.

Nic dziwnego, że w HTML5 postanowiono zmienić tę sytuację. Najpierw zdecydowano się wprowadzić do specyfikacji element EMBED, który do tej pory i tak był powszechnie używany, choć oficjalnie nie istniał. Nadal jednak nie zaleca się jego stosowania do materiałów audio/wideo:

• Wymaga zainstalowanej na komputerze wtyczki. Nie każda przeglądarka obsługuje wszystkie rodzaje wtyczek. Nie każda wtyczka jest dostępna dla wszystkich rodzajów systemów operacyjnych. Nie każdy użytkownik wie, jak samodzielnie zainstalować wtyczkę.
• Webmaster nadal nie dostaje standardowego API, dzięki któremu mógłby dynamicznie manipulować odtwarzanym materiałem multimedialnym.
• Element EMBED nie posiada znacznika zamykającego, a element NOEMBED nadal nie został wprowadzony do specyfikacji. Zatem nie można zastosować żadnej automatycznej alternatywy, jeżeli przeglądarka użytkownika nie obsługuje żądanej wtyczki.
• Tylko podstawowe atrybuty znacznika EMBED zostały opisane w specyfikacji. Pozostałe zależą od możliwości użytej wtyczki.
• Element ten nie jest w żaden sposób zoptymalizowany do odtwarzania filmów ani muzyki.

Filmy i dźwięk <video, audio, source>

Aby pozbyć się wszystkich wymienionych powyżej wad, HTML5 wprowadza zupełnie nowe elementy, przeznaczone specjalnie do obsługi odtwarzaczy audio/wideo.

(interpretuje: Internet Explorer 9, Firefox, Opera, Chrome)

1. Podstawowy odtwarzacz wideo (niezalecane!):

   <video src="lokalizacja pliku">Treść alternatywna</video>

2. Podstawowy odtwarzacz audio (niezalecane!):

   <audio src="lokalizacja pliku">Treść alternatywna</audio>

3. Odtwarzacz wielu formatów wideo:

   <video>
   	<source src="lokalizacja pliku w formacie 1" type='format 1'>
   	<source src="lokalizacja pliku w formacie 2" type='format 2'>
   	(...)
   	Treść alternatywna
   </video>

4. Odtwarzacz wielu formatów audio:

   <audio>
   	<source src="lokalizacja pliku w formacie 1" type='format 1'>
   	<source src="lokalizacja pliku w formacie 2" type='format 2'>
   	(...)
   	Treść alternatywna
   </audio>

Różnica pomiędzy odtwarzaczem wideo a audio jest tylko taka, że ten drugi nie udostępnia okna do wyświetlania obrazu. W odtwarzaczu wideo swobodnie można odgrywać również samą muzykę. Może to być przydatne np. aby wraz z dźwiękiem wyświetlić dodatkowe napisy zsynchronizowane z dźwiękiem albo statyczny obraz. Natomiast ładując film do odtwarzacza audio, możemy pominąć zapisaną w nim ścieżkę wideo - kiedy interesuje nas tylko ścieżka dźwiękowa. Jednak gdy to tylko możliwe, należy unikać tego sposobu, ponieważ mimo iż użytkownik nie widzi obrazu wideo, to jest on nadal zapisany w pliku i transmitowany przez sieć.

Pliki multimedialne często są pokaźnych rozmiarów. Przeglądarka zwykle nie potrafi odtworzyć wszystkich możliwych formatów filmów i muzyki. Dlatego właśnie mocno zalecane jest, aby korzystać tylko z dwóch ostatnich sposobów osadzania plików wideo/audio, nawet jeżeli posiadamy materiał tylko w jednym formacie. Podając typ (format) pliku w kodzie strony, przeglądarka nie będzie musiała pobierać plików, aby sprawdzić, czy potrafi je odtworzyć. Jest to szczególnie ważne na stronach, które zawierając wiele osadzonych odtwarzaczy.

Przykład <video, audio, source>

Zobacz przykład: VIDEO, AUDIO

Atrybuty odtwarzacza

autoplay

Atrybut logiczny (podawany bez wartości), który wywołuje automatyczne rozpoczęcie odtwarzania. Używaj go z rozsądkiem. Nie ma nic gorszego niż samodzielnie włączająca się o północy muzyka na stronie i grająca na cały regulator 😉

controls

Atrybut logiczny, który powoduje wyświetlenie domyślnych kontrolek, służących od odtwarzania materiału. Najczęściej zawierają one przycisk "odtwarzaj", "zatrzymaj", "wycisz", suwak postępu odtwarzania i głośności.

Standardowe kontrolki odtwarzania zwykle wyglądają nieco inaczej w każdej przeglądarce. Jednak użytkownik jest przyzwyczajony do ich wyglądu właśnie ze swojej przeglądarki, więc nie powinno to dla niego stanowić problemu, a raczej ułatwienie. Jeżeli jednak nie możemy się z tym pogodzić, HTML5 daje możliwość stworzenia swoich własnych kontrolek odtwarzania. Służy do tego API JavaScript, a więc bez choćby podstawowych umiejętności programistycznych raczej się przy tym nie obejdzie.

Przykład <video controls, audio controls>

Zobacz przykład: własne kontrolki odtwarzania

loop

Atrybut logiczny, który włącza tryb odtwarzania w kółko.

muted

Atrybut logiczny, który całkowicie wycisza dźwięk w odtwarzaczu.

poster

W przypadku odtwarzacza VIDEO możliwe jest ustawienie statycznego obrazka, który wyświetli się w oknie odtwarzania, zanim użytkownik włączy w nim odgrywanie właściwego filmu. Można w ten sposób umieścić np. pierwszą znaczącą klatkę z filmu. Jako wartość tego atrybutu należy podać lokalizację pliku graficznego.

preload

Określa, które części pliku multimedialnego powinny zostać pobrane przez przeglądarkę, nawet jeśli użytkownik nigdy nie włączy odtwarzania:

none

Żadna część pliku nie zostanie załadowana, zanim nie rozpocznie się jego odtwarzanie. Opcja przydatna, jeżeli odtwarzacz jest na stronie elementem pobocznym i użytkownik może nigdy go nie użyć albo ewentualnie kiedy zależy nam na zminimalizowaniu transferu.

metadata

Pobiera tylko tzw. metadane zapisane w pliku (wymiary, lista ścieżek, czas trwania itp.) oraz możliwe, że kilka pierwszych klatek filmu.

auto

Przeglądarka może dowolnie pobierać plik - w szczególności załadować go w całości do pamięci, nawet jeśli nigdy nie zostanie odtworzony.

width, height

Zanim plik wideo albo jego metadane zostaną załadowane, przeglądarka nie zna właściwych wymiarów filmu. Dlatego najpierw może przyjąć jakieś standardowe rozmiary, by potem zmienić je na właściwe. Może to wywołać efekt "skakania" elementów strony. Dlatego zawsze powinno się od razu określać, jaką szerokość (width="...") i wysokość (height="...") ma film, który będzie załadowany do odtwarzacza VIDEO.

Formaty audio/wideo

Wprowadzając w HTML5 nowe znaczniki AUDIO i VIDEO początkowo starano się również rozwiązać problemy z różnorodnością formatów plików muzycznych i filmowych. W samej wielości formatów nie byłoby nic złego, gdyby wszystkie przeglądarki potrafiły je obsłużyć. Niestety tak nie jest. Do tego dochodzą kwestie związane z patentami i licencjonowaniem.

W praktyce aby mieć pewność, że muzyka bądź film zostaną poprawnie wyświetlone w większości popularnych przeglądarek i systemów operacyjnych, konieczne jest konwertowanie plików jednocześnie do wszystkich z niżej wymienionych formatów. Poszczególne skonwertowane pliki w różnych formatach należy wymieć za pomocą kolejnych znaczników SOURCE.

Przykład <video, audio, source type>

Typowa kombinacja formatów plików wideo:

<video>
	<source src="plik.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
	<source src="plik.ogv" type='video/ogg; codecs="theora, vorbis"'>
	Pobierz plik w formacie: <a href="plik.mp4">MP4</a>, <a href="plik.ogv">OGV</a>
</video>

Typowa kombinacja formatów plików audio:

<audio>
	<source src="plik.mp3" type='audio/mpeg'>
	<source src="plik.ogg" type='audio/ogg'>
	Pobierz plik w formacie: <a href="plik.mp3">MP3</a>, <a href="plik.ogg">OGG</a>
</audio>

MP3/MP4

Znane od dawna, komercyjne formaty audio (MP3) i wideo (MP4). Objęte płatnymi licencjami. Na ich upowszechnieniu zależy zwłaszcza posiadaczom patentów do nich - Microsoft i Apple.

Z uwagi na możliwe błędy w mobilnej wersji przeglądarki Safari, format MP4 - jeśli jest dostępny - powinien znajdować się na początku listy znacznika VIDEO. Inaczej odtworzenie wideo może być niemożliwe.

OGG/OGV

Konsorcjum W3C najpierw próbowało forsować jeden uniwersalny i darmowy format - OGG (audio) i OGV (wideo). Nie spodobało się to jednak twórcom komercyjnego formatu MP3/MP4. Poza tym argumentowano, że otwarty format OGG/OGV choć udostępniany za darmo, może w sposób niezamierzony korzystać z jakichś patentów, co przyniosłoby problemy w przyszłości, gdyby się nagle okazało, że jednak trzeba za jego użytkowanie płacić.

Kodeki

Plik audio/wideo można w uproszczeniu traktować jak archiwa ZIP lub RAR. Zawierają one w sobie spakowane wiele zwykłych plików. Sposób wykonywania kompresji w formacie ZIP różni się od RAR, ale nie wpływa na typ plików, które są spakowane w archiwum. Jedno archiwum może zawierać np. obrazy w formacie GIF, JPG lub PNG, a także muzykę MP3, WMA itp.

Każdy plik muzyczny musi zawierać tzw. ścieżkę dźwiękową. Pliki filmowe zawierają natomiast ścieżkę wideo oraz zwykle również ścieżkę dźwiękową. Ścieżki te są jakby odpowiednikiem plików spakowanych w archiwum ZIP lub RAR. Istnieją różne sposoby zapisu dźwięku i obrazu w plikach audio/wideo. Różnią się stopniem kompresji (wielkością wynikowego pliku), jakością, obciążeniem procesora przy odtwarzaniu itp. Za konwersję ścieżki audio/wideo do określonego formatu odpowiadają kodeki.

Podając typ (format) pliku audio/wideo, powinniśmy określić również kodeki, przy użyciu których przeglądarka może odtworzyć wybrany materiał. Dzięki temu w przypadku nieposiadania odpowiedniego kodeku, nie będzie konieczne pobieranie pliku, którego i tak nie da się odtworzyć.

Kodeki MP4

H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>

MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>

MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container

<source src="video.3gp" type='video/3gpp; codecs="mp4v.20.8, samr"'>

Kodeki OGG/OGV

Vorbis audio alone in Ogg container

<source src="audio.ogg" type='audio/ogg; codecs=vorbis'>

Speex audio alone in Ogg container

<source src="audio.spx" type='audio/ogg; codecs=speex'>

FLAC audio alone in Ogg container

<source src="audio.oga" type='audio/ogg; codecs=flac'>

Dirac video and Vorbis audio in Ogg container

<source src="video.ogv" type='video/ogg; codecs="dirac, vorbis"'>

Theora video and Vorbis audio in Ogg container

<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>

Theora video and Speex audio in Ogg container

<source src="video.ogv" type='video/ogg; codecs="theora, speex"'>