Tag <video>

Odtwarzanie filmów w oknie przeglądarki zawsze wiązało się z potrzebą instalacji dodatkowej wtyczki, np. Flasha firmy Macromedia. Większość internautów ma zainstalowany ten dodatek w swoich przeglądarkach, jednak zawsze znajdzie się kilka osób, które nie mogą zobaczyć filmów na Twojej stronie.

Ponadto, filmy, które posiadasz na dysku, aby mogły zostać odtworzone przez Flasha, muszą zostać przekonwertowane na specjalny format FLV albo SWF (jeśli z filmem ma być serwowany również interfejs odtwarzania).

Chociaż Flash i FLV są rozwiązaniami szybkimi i wydajnymi, wymagania techniczne utrudniają ich wdrażanie początkującym webdeweloperom. Wideo w Sieci stało się na tyle popularne, że myślimy o nim jak o równouprawnionym wobec tekstu i zdjęć elemencie stron internetowych. Dlatego też w HTML5 znajduje się tag <video>, który w kwestii użyteczności jest filmowym odpowiednikiem graficznego tagu <img>.

Zanim wykorzystamy jednak ten tag, potrzebny nam jest plik filmu do odtworzenia. Na początku musimy wybrać format pliku. Tak samo, jak używane w Sieci formaty grafiki to JPG, GIF i PNG, tak obecnie najlepiej wspierane przez przeglądarki są trzy formaty wideo: Ogg Theora, H.264 i VP8.

Ogg Theora działa we wszystkich przeglądarkach z wyjątkiem Internet Explorera, w Safari należy natomiast zainstalować wtyczkę. H.264 działa w Internet Explorerze i Safari, z Chrome zostanie wycofany, a inne przeglądarki wymagają zainstalowania wtyczki.

Pozostaje VP8, który działa wszędzie z wyjątkiem Internet Explorera i Safari. Niestety, aby zadbać o odtwarzanie filmu we wszystkich przeglądarkach, obecnie trzeba skorzystać z przynajmniej dwóch formatów. Jeśli udostępnimy film w formacie VP8 albo Ogg Theora i H.264, wszyscy użytkownicy popularnych przeglądarek powinni móc go odtworzyć. W przyszłości zapewne wszystkie przeglądarki będą wspierać wszystkie wymienione formaty.

Z popularnych przeglądarek najlepszy zasięg wsparcia ma Chrome, który obsługuje wszystkie wymienione wyżej formaty. Dzisiaj jednak, uruchomimy testy w przeglądarce Maxthon, która jest mniej popularna, ale w teście html5test uzyskuje przewagę 6 punktów nad popularnym liderem.

Każdy, kto zajmował się kiedyś obróbką wideo i umieszczaniem go na własną rękę w Sieci, wie, że niezwykle ważna jest łatwość uzyskania filmu w odpowiednich formatach.

Aby umieścić wideo, zasymulujemy dwa typowe scenariusze z życia użytkownika komputera. Pierwszy polega na chęci wrzucenia do Internetu filmu z aparatu cyfrowego, a drugi na wrzuceniu filmu po obróbce w programie Windows Movie Maker.

Aparat cyfrowy Panasonic DMC LS-75 zapisuje filmy w formacie MOV. 11-sekundowy plik zajmuje 8 MB. Najlepszym programem do konwersji plików wideo jest Miro Video Converter.

Jest prosty w obsłudze i działa od razu po instalacji. Wystarczy przeciągnąć i upuścić plik wideo na okno programu i wybrać format docelowy. Konwersja do Ogg Theora trwała kilka sekund. Plik wynikowy o rozszerzeniu OGV zajmuje 991 KB.

Następnie otwieramy plik MOV w programie Windows Movie Maker, dodajemy dwie plansze przejściowe i zapisujemy do formatu WMV i konwertujemy programem Miro Video Converter znowu do Ogg Theora. Konwersja trwa trochę dłużej, a plik wynikowy ma 1,8 MB.

Skoro mamy już pliki, osadźmy je na stronę. Minimalistycznie z tagu <video> korzystamy niemal identycznie jak z <img>, przy czym oprócz źródła podanego w atrybucie src należy dodać też atrybut controls. Bez niego bowiem odtwarzacz będzie pozbawiony kontrolek odtwarzania, co sprawi, że będzie wyglądał jak zwykły statyczny plik graficzny.

<video src='film_z_kamery.ogv' controls></video>
 

Efekt:

Jak widać, poniżej filmu dodany został standardowy pasek kontrolek. Przycisk odtwarzania podczas odtwarzania zmienia się w przycisk pauzy. Klikając dowolne miejsce paska nawigacji, wędrujemy do wybranej klatki filmu. Po prawej znajduje się licznik czasu, który upłynął od rozpoczęcia filmu i ikona głośnika. Jej kliknięcie powoduje wyciszenie głosu, umieszczenie nad nią kursora myszy rozwija natomiast pionowy suwak regulacji głośności.