Zgodnie z przyświecającą ideą wolności, duchem niezależności, specyfikacja nie określa, w jakim formacie należy dostarczyć film. Z jednej strony uwalniamy się od Flasha, którego wtyczka potrafi powodować zawieszanie się przeglądarki, jest głównym celem ataków, a z drugiej - powstaje zamieszanie wokół tego, jak zakodować film, aby każdy był w stanie go obejrzeć.. Niestety producenci przeglądarek nie doszli do konsensusu i każdy zaimplementował tag <video> po swojemu, tzn. zapewniając obsługę wybranych formatów wideo. Na szczęście to nie stanowi większej przeszkody i w dalszej części artykułu pokażemy, jak ten problem obejść. Tymczasem zacznijmy od podstaw.
Pojedynczy plik wideo wstawiamy na stronę analogicznie jak obrazek. Składnia jest podobna do znacznika img: podajemy źródło src, wymiary width i height.
<!DOCTYPE HTML>
<html>
<head>
<title>Znacznik video HTML5</title>
</head>
<body>
<video src="film.mp4" width="400" height="300">
Twoja przeglądarka nie obsługuje znacznika <video> technologii HTML5.
</video>
</body>
</html>
Jeżeli przeglądarka Internauty obsługuje HTML5 i znacznik <video>, to zostanie przygotowany obszar o wymiarach 400 na 300 piksli. Wymiary wysokości i szerokości elementu powinny pokrywać się z rozdzielczością filmu. Podanie wartości height i width mniejszych niż wysokość i szerokość klatki filmu spowoduje dopasowanie filmu do wskazanych wymiarów. @STRONA@
Warto rozważyć dodatkowe atrybuty znacznika <video>, które mogą być wykorzystywane w znaczniku <audio> HTML5, a są bardzo przydatne.
<video src="film.mp4" width="400" height="300" controls preload autoplay poster="obrazek.jpg">
Atrybut controls powoduje wyświetlenie podstawowego zestawu kontrolek do sterowania filmem: przycisk odtwarzania, suwak przewijania, głośność i kontrolka czasowa. Poniżej prezentujemy, jak będzie wyglądał odtwarzacz filmów HTML5 w popularnych przeglądarkach internetowych.
Internet Explorer 9:
Firefox 5:
Chrome 12:
Opera 11.50:
Atrybut autoplay sprawi, że film zostanie od razu uruchomiony bez oczekiwania na kliknięcie przycisku odtwarzania przez użytkownika. Warto jednak pamiętać, że często twórcy stron nadużywają automatycznego uruchamiania czegokolwiek. Klienci bronią się, posiłkując dodatkami, które pozwalają deaktywować takie zachowanie. Oczywiście jest już dostępny dodatek, który wyłącza autoplay w HTML5. Uzytkownicy Firefoksa mogą skorzystać ze skryptu Greasemonkey.
Atrybut preload odpowiada za buforowanie filmu. Podanie tego atrybutu domyślnie skutkuje jak najszybszym pobieraniem w tle filmu tuż po załadowaniu treści strony. Jest to przydatne, gdy chcemy, aby docelowo każdy oglądnął dołączony klip. Ale co wtedy, gdy chcemy umieścić klip wideo i zmniejszyć obciążenie ruchu sieciowego, buforując plik tylko wtedy, gdy użytkownik jest zainteresowany obejrzeniem filmu? Wówczas powinniśmy dostosować buforowanie "na żądanie", czyli wyłączyć buforowanie: preload="none". Film będzie pobierany z serwera na komputer kliencki tylko wtedy, gdy odwiedzając kliknie przycisk odtwarzania filmu.
<video src="film.mp4" width="400" height="300" preload="none">
Ostatnim atrybutem, który warto używać przy odtwarzaniu filmów w HTML5, jest poster. Jego wartość wskazuje plik graficzny, który będzie wyświetlany, gdy plik wideo nie jest osiągalny (dane nie są dostępne).
Odtwarzanie "w kółko" pliku można zrealizować, dodając atrybut loop.
W kolejnym artykule omówimy zawirowania wokół wyboru formatu zapisu filmu i jego kodowania. Ponadto przedstawimy rozwiązanie osadzania klipów wideo, zabezpieczając się przed sytuacją, gdzie użytkownicy starszych przeglądarek nie są w stanie otrzymać dostarczanych treści multimedialnych, serwowanych w znaczniku <video>.
341f31d.png)