Kontrolki multimedialne w HTML5

Tak jak obiecałem w ostatnim poście, dziś kolejna odsłona zapisków z moich przygotowań do egzaminu 70-480. W dzisiejszym wpisie przedstawię kontrolki multimedialne w HTML5 - <video> oraz <audio>. Opisany zostanie sposób osadzania tych elementów w dokumencie HTML, tak by każda z popularnych obecnie przeglądarek poradziła sobie z ich odtworzeniem. Omówiona tez zostanie możliwość konfiguracji odtwarzania za pomocą dostępnych atrybutów tych znaczników.

A więc…. zaczynamy!

Osadzanie filmów w dokumencie HTML5

Zanim wprowadzono HTML5, osadzanie filmów na stronie www, odbywało się zwykle za pomocą znacznika <object> i zewnętrznych wtyczek takich jak Flash Player. Niosło to ze sobą problemy ze zgodnością stron ze standardami w3c, a także wymagało posiadania przez odbiorcę odpowiedniej wtyczki (najczęściej Flash Player lub Silverlight).

Język HTML5 wprowadza natywną obsługę odtwarzania wideo. Najprostszy przykład kody, służącego do osadzenia pliku wideo na stronie poniżej:

<video src="filmik.mp4" controls autoplay  height="300" width="400">
</video>

Możliwe jest również, podanie więcej niż jednego źródła pliku - robi się to w następujący sposób:

<video autoplay controls>
   <source src="filmik.mp4" type="video/mp4">
   <source src="filmik.webm" type="video/webm">
</video>

Jest to o tyle istotne, że oczywiście nie ma jednego standardowego formatu wyświetlania wideo na stronach www. Na szczęście nie jest tak źle - większość popularnych przeglądarek internetowych zapewnia obsługę jednego z dwóch formatów filmów: MP4/H.264 działa w Safari i Internet Explorer oraz WebM obsługiwany przez Firefox, Chrome i Operę.

Mając więc, tak jak w ostatnim przykładzie, zadeklarowane dwa źródła plików, przeglądarka przejrzy je i wybierze ten, który potrafi wyświetlić.

Atrybuty elementów video oraz source

Element <video> posiada szereg atrybutów służących do sterowania odpowiednim osadzeniem pliku wideo. Poniżej opis najważniejszych z nich:

src - służy do definiowania adresu URL filmu
autoplay - informuje przeglądarkę, że film ma zostać uruchomiony automatycznie
controls - powoduje wyświetlanie standardowych kontrolek sterowania filmem
muted - ustawia początkową wartość głośności na wyciszony
loop - informuje, że film ma zostać wyświetlony wiele razy w pętli
poster - umożliwia zdefiniowania obrazka, który zostanie wyświetlony zanim film zostanie uruchomiony
width - definiuje szerokość okna wyświetlania filmu
height - definiuje wysokość okna wyświetlania filmu
preload - definiuje czy film lub pewne elementy mają zostać załadowane wcześniej

Tak jak pokazywałem wcześniej, w przypadku osadzania filmy z więcej niż jednym źródłem, wykorzystuje się znacznik <source>. Oto jego atrybuty:

src - definiuje adres URL filmu
type - rodzaj wideo - np. ‘video/mp4’ lub ‘video/webm’; tutaj można podać też kodek - przykład: ‘video/webm; codec=”vp8”’
media - informuje, jaki jest oczekiwany rodzaj urządzenia na którym ma być wyświetlany film

Tutaj mała uwaga - jak widać, atrybut ‘src’ dostępny jest zarówno dla znacznika <video> jak i dla <source>. Należy pamiętać, żę jeśli zapomnimy usunąć atrybut ‘src’ ze znacznika <video>, wówczas to ta wartość jest najbardziej znacząca i przeglądarka pominie wartości podane w znacznikach <source>.

Co jeśli przeglądarka nie obsługuje HTML5?

Kolejna sprawa - obsługa użytkowników, którzy nie posiadają przeglądarki obsługującej HTML5. Z myślą o nich można zrobić dwie rzeczy: wewnątrz znacznika <video> można umieścić znacznik <a> z linkiem umożliwiającym pobranie filmu na własny komputer. Można także dodać znacznik <object> osadzając film po staremu, wykorzystując Flash Player. Przykład poniżej:

<video autoplay controls>
   <source src="filmik.mp4" type="video/mp4">
   <source src="filmik.webm" type="video/webm">
   <object type="application/x-shockwave-flash"
      data="player.swf?videoUrl=filmik.mp4&autoPlay=true">
      <param name="movie" value="player.swf?videoUrl=filmik.mp4&autoPlay=true">
   </object>
   <a href="filmik.mp4">Download the video</a>
</video>

Jeśli chodzi o osadzanie filmów na stronach www, istnieje także możliwość dołączenia pliku tekstowego z napisami (za pomocą znacznika <track>) w formacie WebVTT. Jednak z tego co wiem, to obsługa tego formatu przez przeglądarki jest na razie słaba. Jeśli ktoś byłby zainteresowany tym tematem to odsyłam do specyfikacji.

Osadzanie plików audio w dokumencie HTML5

Tutaj spawa jest analogiczna do osadzania plików wideo - dla plików dźwiękowych przeznaczony jest znacznik <audio>, na przykład tak:

<audio src="muzyczka.mp3" controls autoplay></audio>

Jest też oczywiście możliwość podania większej liczby źródeł, również analogicznie do znacznika <video>:

<audio autoplay controls>
   <source src="muzyczka.ogg" type="audio/ogg">
   <source src="muzyczka.mp3" type="audio/mp3">
</audio>

To, że różne przeglądarki obsługują różne formaty muzyczne jest oczywiste… Na szczęście aby obsłużyć większość z nich, wystarczy podać źródła do plików w formacie Ogg Vorbis oraz MP3.

Atrybuty elementu audio

Kolejna rzecz to atrybuty znacznika <audio> - tutaj też mamy do czynienia z analogią, poniżej ich lista:

src
autoplay
controls
muted
loop
preload

Jak widać, mamy tutaj te same atrybuty co w przypadku znacznika <video> (co oczywiste, brakuje ‘width’ oraz ‘height’ - nie ma czego wyświetlać). Myślę, że atrybutów znacznika <source> nie trzeba już wyjaśniać, ponieważ są dokładnie takie same (i działają dokładnie tak samo).

Zapewne domyślacie się, że w przypadku znacznika <audio>, można dodać też link do źródła pliku muzycznego oraz dodatkowo dodać możliwość odtworzenia pliku za pomocą zewnętrznej wtyczki? Tak! Macie rację! I do tego robi się to dokładnie tak samo!! ;)