Internet Explorer 9 - Multimedia w HTML5

Autor: Marcin Borecki

Opublikowano: 2011-08-23

Wprowadzenie

Wiele serwisów udostępnia możliwość przeglądania materiałów audio oraz wideo. Niewielu jednak użytkowników przywiązuje wagę do tego, jak trudno dziś udostępnić materiały multimedialne dla szerokiego grona odbiorców, którzy dysponują różnego rodzaju sprzętem i oprogramowaniem. Standard HTML5 miał być odpowiedzą zarówno dla osób tworzących serwisy, jak i ich klientów, opisując jeden standard dla klientów audio oraz wideo. Rozwiązanie to miało uniezależnić nas od rozwiązań firm trzecich i gwarantować odbiór multimediów na każdym sprzęcie z oprogramowaniem wspierającym HTML5.

Video

W specyfikacji HTML5 pojawił się nowy znacznik do zastosowań wideo o nazwie <video>. HTML5 opisuje filmy jako materiały zakodowane w formacie H.264, który jest dzisiaj z powodzeniem używany w systemach multimedialnych, z popularnym YouTube na czele. Niektóre firmy korzystają jednak z innych kodeków.

Najprostsza forma użycia znacznika video wygląda następująco:

<video src=”wideo.mp4”></video>

lub

<video src=”wideo.mp4”>
Niestety Twoja przeglądarka nie obsługuje materiałów wideo serwowanych przez HTML5.
</video>

Znacznik pozwala na określenie wysokości i szerokości materiału poprzez ustawienie właściwości width i height.

Możemy określić plik graficzny, który zostanie pokazany przed odtworzeniem materiału wideo przy użyciu parametru poster:

<video src=”wideo.mp4” poster=”http://mojastrona.com/obrazek.jpg”></video>

Rys. 1. Kontrolka wideo z standardowymi przyciskami.

Audio

W specyfikacji HTML5 pojawił się też nowy znacznik do zastosowań audio o nazwie <audio>. Obecnie, w zależności od przeglądarki internetowej, dźwięk dla znacznika audio może być serwowany w formacie ACC, MP3 lub Ogg.

Najprostsza forma użycia znacznika audio wygląda następująco:

<audio src=”muzyka.mp3”></audio>

lub

<audio src=”muzyka.mp3”>
Niestety Twoja przeglądarka nie obsługuje materiałów wideo serwowanych przez HTML5.
</video>

Rys. 2. Kontrolka audio z standardowymi przyciskami.

Elementy wspólne

Znaczniki audio i video posiadają szereg parametrów wspólnych, których znaczenie wyjaśnię poniżej:

autoplay	Automatyczne uruchomienie materiału po załadowaniu.
controls	Dodanie domyślnych przycisków do kontroli materiału.
loop	Odtwarzanie materiału w pętli.
preload	Ładowanie materiału razem z ładowaniem strony.
src	Źródło (plik audio lub wideo).

Domyślnie odtwarzacz, który pojawi się w przeglądarce, nie udostępnia przycisków do kontrolowania materiału, w tym pauzy, i określenia głośności. Elementy te możemy określić sami lub dodać do znacznika właściwość controls, która doda przyciski domyślne.

<video src=”wideo.mp4” controls></video>
<audio src=”muzyka.mp3” controls></audio>

Ze względu na brak porozumienia firm tworzących przeglądarki internetowe materiały serwowane przy użyciu HTML5 należy zakodować w różnych formatach. Więcej informacji na ten temat podam w rozdziale o kompatybilności.

Istnieje możliwość wskazania znacznikowi <audio> i <video> więcej niż jednego pliku źródłowego, tak aby przeglądarka mogła wybrać ten format, który aktualnie wspiera.

Przykład dla audio:

<audio >
    <source src="plik.ogg" type="audio/ogg; codecs=vorbis">
    <source src="plik.mp3">
    <source src="plik.wav">
    Twoja przeglądarka nie obsługuje HTML 5.
</audio>

Przykład dla wideo:

<video>
    <source src="plik.ogv" type="audio/ogg; codecs='theora, vorbis'">
    <source src="plik.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
    <source src="plik.3gp" type="video/3gpp; codecs='mp4v.20.8, samr'">
    Twoja przeglądarka nie obsługuje HTML 5.
</video>

Kompatybilność

Specyfikacja HTML5 określa kodek H.264 do materiałów wideo. Warto wiedzieć, że firma Google promuje swój kodek VP8 w połączeniu z znacznikiem <video>, dlatego należy posiadać również ten kodek na komputerze, na którym będziemy przeglądać strony w HTML5, aby zachować maksymalną kompatybilność.

Co do specyfikacji audio, tutaj sytuacja jest dyskusyjna tak samo jak w przypadku wideo, i w zależności od przeglądarki możemy usłyszeć dźwięki w formacie Ogg, MP3 lub AAC.

Celowo nie umieszczam tabelki z kompatybilnością poszczególnych przeglądarek oraz urządzeń mobilnych z poszczególnymi kodekami audio i wideo, ponieważ sytuacja jest dynamiczna i tabelka szybko by się zdezaktualizowała.

Podsumowanie

Znaczniki do obsługi multimediów w HTML5 udostępniają szeroki wachlarz możliwości twórcom stron, a użytkowników miały uniezależnić od oprogramowania firm trzecich. Niestety, brak porozumienia producentów przeglądarek internetowych oraz ignorowanie specyfikacji HTML5 wciąż powodują problemy kompatybilności materiałów multimedialnych, a co za tym idzie – wciąż w przeglądarkach potrzebujemy wtyczek firm trzecich, aby być pewnym, że wszystkie materiały zostaną poprawnie odtworzone.

 

---