Polub bloga na fejsie!

Kontrolki multimedialne w HTML5

0

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:

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

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:

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:

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

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!! 😉

Kontrolki multimedialne w HTML5 – podsumowanie

Kontrolki multimedialne w HTML5 znacznie upraszczają sprawę osadzania plików audio i wideo na stronach www. Uniezależnia też nas oraz użytkowników od posiadania zewnętrznych wtyczek. Jak zostanie opisane w następnym poście, upraszcza także programowanie sterowania odtwarzaniem ich za pomocą języków skryptowych. To tyle na dziś, zapraszam wkrótce na kolejny wpis z cyklu przygotowującego do egzaminu MCSD: 70-480!

REACT, REDUX, REACT-ROUTER - KURSY ON-LINE

Chcesz od podstaw poznać tajniki React, Redux oraz react-router? Zapraszam do moich szkoleń on-line:

Przejdź do szkoleń

Uwaga! Obecnie trwa przedsprzedaż kursów - premiera 1 sierpnia 2017!

Google Analytics Alternative