HTML 5: obsługa elementów AUDIO i VIDEO

Serwisów oferujących przeglądanie zasobów multimedialnych nie brakuje w sieci. Do niedawna jednak wszystkie oparte były o wykorzystanie możliwości znaczników object lub niepoprawnego embed. Problem w tym, że rozwiązania te opierały się o wtyczki firm trzecich, takie jak QuickTime, czy Flash. HTML 5 standaryzuje osadzanie plików muzycznych i filmów.

Kwestia dźwiękowa: element AUDIO

Jedna z najbardziej, od dawna oczekiwanych możliwości w HTML 5. Pozwala na natywne odtwarzanie utworów muzycznych w przeglądarce. Określana znacznikiem audio.

Wg. specyfikacji może przyjmować pięć atrybutów:

• autoplay – określa czy odtwarzać automatycznie dźwięk, gdy zostanie on załadowany,
• controls – określa czy wyświetlić odtwarzacz w standardowym układzie,
• loop – określa czy powtarzać odtwarzanie,
• preload – wyznacza, czy załadować zasobów w trakcie ładowania strony,
• src – adres URL do pierwotnego, ładowanego źródła.

Korzystając z powyższych informacji możemy otrzymać następujący przykład:

<!-- domyślny układ, startuje automatycznie, jedno źródło -->
<audio src="test.ogg" controls autoplay></audio>

W praktyce pojawi się jednak problem, związany z implementacją różnych wersji kodeków w przeglądarkach (np. Vorbis, Advanced Audio Coding, MPEG-1 Audio Layer 3). Z tego powodu, trzeba aktualnie definiować dodatkowe zasoby w tagu source. Obsługuje on atrybuty:

• media – zdefiniowanie typu zasobu. Domyślnie odpowiada wszystkim typom mediów,
• src – adres URL do pierwotnego, ładowanego źródła,
• type – definiuje typ zasobu, pozwalając na określenie przeglądarce, czy może odtworzyć go, bez konieczności pobierania. Musi być pod postacią prawidłowego typu MIME. Opcjonalnie, wewnątrz niego można zdefiniować parametr codecs, określający jak zakodowany jest zasób.

<!-- domyślny układ, startuje automatycznie, wiele źródeł -->
<audio controls autoplay>
	<!-- Firefox ge 3.5, Chrome ge 3 beta, Opera ge 10.5 -->
	<source src="test.ogg" type="audio/ogg; codecs=vorbis">
	<!-- Safari ge 4, Chrome ge 3 beta -->
	<source src="test.mp3">
	<!-- Opera ge 10.5, Firefox ge 3.5 -->
	<source src="test.wav">
</audio>

Na wypadek niekompatybilnej przeglądarki można wewnątrz elementu audio wstawić alternatywną wiadomość, bądź plik Flash z autorskim odtwarzaczem.

<!-- domyślny układ, startuje automatycznie, wiele źródeł -->
<audio controls autoplay>
	<!-- Firefox ge 3.5, Chrome ge 3 beta, Opera ge 10.5 -->
	<source src="test.ogg" type="audio/ogg; codecs=vorbis">
	<!-- Safari ge 4, Chrome ge 3 beta -->
	<source src="test.mp3">
	<!-- Opera ge 10.5, Firefox ge 3.5 -->
	<source src="test.wav">
	<!-- alternatywny wynik -->
	Twoja przeglądarka nie obsługuje HTML 5.
</audio>

W rozwiązaniu powyższego problemu pomóc może także użycie możliwości JavaScriptu i metod/atrybutów/zdarzeń dostępnych w API. Pozwalają one na manipulację na obsługiwanych plikach. Niestety skorzystanie z możliwości obiektu Audio nie będzie możliwe w jakiejkolwiek wersji IE.

• buffered – określa ilość oraz początkowy i końcowy czas zbuforowanego zasobu,
• canPlayType(typ_MIME) – zwraca informacje na temat tego, czy dany typ obsługiwany jest przez klienta. Możliwe wyniki to: no, maybe, probably,
• currentTime – pozwala na ustawienie lub pobranie aktualnego czasu odtwarzania,
• duration – wyświetla czas trwania utworu. W wypadku nie załadowania go, zwraca NaN (Not a Number),
• ended – zwraca prawdę, jeżeli zakończono odtwarzanie (w przód),
• loop – wartość logiczna, pozwalająca na zapętlanie dźwięku,
• muted – zwraca lub ustawia, czy kanały audio są wyciszone,
• pause() – pauzuje odtwarzanie,
• paused – przetrzymuje informacje o tym, czy element jest spauzowany,
• play() – wznawia odtwarzanie,
• played – przetrzymuje informacje o odtwarzanym elemencie,
• volume – zwraca lub ustawia głośność dźwięku w zakresie od 0.0…0.1.

Przykład:

<p>
	<button type="button" onclick="stop();">Stop</button>
	<button type="button" onclick="lour();">Wycisz</button>
</p>

<script type="text/javascript">
var element = document.getElementById("audio"); /* pobranie elementu */
function stop() { /* funkcja zatrzymująca */
	if ( !!(element.canPlayType) != false ) {
		element.currentTime = 0; /* ustawienie czasu na początek */
		element.pause(); /* pauza */
	}
}
function lour() { /* funkcja wyciszająca */
	if ( !!(element.canPlayType) != false ) {
		element.volume = 0; /* głośność na zero */
	}
}
</script>

Przykład z użyciem new Audio():

var obj = new Audio('');
alert(!!(obj.canPlayType));

Kwestia filmowa: element VIDEO

Drugi, ważny element HTML 5. Oparty o znacznik video. Przyjmuje te same atrybuty co audio, a ponadto:

• height – określa wysokość okna playera,
• poster – adres URL alternatywnej grafiki, wyświetlanej jeżeli domyślny zasób nie będzie dostępny,
• width – określa szerokość okna odtwarzacza.

Tak oto możemy stworzyć podstawowy przykład użycia:

<!-- buforowanie zasobu w trakcie ładowania strony, jeden plik -->
<video src="test.mp4" preload></video>

Ponownie, w praktyce, powinno się zdefiniować kilka, różnych źródeł plików, w celu obsługi odtwarzacza przez większą ilość przeglądarek.

<!-- domyślny układ, buforuje przy ładowaniu, wiele źródeł -->
<video controls preload>
	<!-- Firefox ge 3.5, Chrome ge 3 beta, Opera ge 10.5 -->
	<source src="test.ogv" type="audio/ogg; codecs='theora, vorbis'">
	<!-- Safari ge 4, Chrome ge 3 beta -->
	<source src="test.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
	<!-- mobilne -->
	<source src="video.3gp" type="video/3gpp; codecs='mp4v.20.8, samr'">
	<!-- alternatywny wynik -->
	Twoja przeglądarka nie obsługuje HTML 5.
</video>

W odtwarzaczu wyświetlane są dwa filmy (Elephants Dream, Big Buck Bunny) na licencji zezwalającej na rozprowadzanie kopii w trybie online.

Obróbka

Zarówno w przypadku jednego, jak i drugiego elementu możemy je stylować.

audio, video {
	width: 480px;
	height: 320px;
}

Kompatybilność