Zamknij komunikat

Nowy Office 2013
Do góry Skomentuj

07. Filmy na stronie - tag VIDEO

07. Filmy na stronie - tag VIDEO

Autor: Adam Stępień Opublikowano: 2 sierpnia 2011 Odsłon: 17 371

Znacznik <video> jest jednym z dwóch najbardziej oczekiwanych funkcji HTML5, obok znacznika <audio>. W niniejszym artykule powiemy o zaletach jego używania do osadzania klipów wideo na stronie internetowej. Ponadto pokażemy, jak używać tagu <video> już dziś, dzieląc się z Wami niezbędnymi podstawami.
 
Obecność filmów i filmików wideo w Internecie jest czymś naturalnym, chyba głównie z racji popularnej witryny YouTube. Aby je odtworzyć w przeglądarce, z reguły wykorzystuje się Flash, ale nie wszystkim podoba się uzależnianie od konkretnej technologii. Przypomnijmy, że Adobe Flash to technologia o zamkniętym kodzie, prawa do niej ma firma Adobe i wszystko leży w jej rękach w kontekście decydowaniu o rozwoju, wsparciu i przyszłości produktu (lub jej braku). Dlatego postanowiono ustandaryzować sposób osadzania filmów wideo w Internecie i wprowadzono w HTML5 znacznik <video>. Próbkę jego możliwości przedstawia panorama wideo zaprezentowana poniżej.

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.

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:

Tag video w IE9


Firefox 5:

Tag video w Firefoksie 5


Chrome 12:

Tag video w Chrome 12


Opera 11.50:

Tag video w Operze 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>. 

Zobacz również

Komentarze

Nie napisano jeszcze ani jednego komentarza. Twój może być pierwszy.

Dodaj swój komentarz

Zasady publikacji komentarzyZasady publikacji komentarzy

Redakcja CentrumXP.pl nie odpowiada za treść komentarzy publikowanych na stronach Portalu
i zastrzega sobie prawo do usuwania wypowiedzi, które:

  • zawierają słowa wulgarne, obraźliwe, prowokujące i inne naruszające dobre obyczaje;
  • są jedynie próbami reklamowania stron internetowych (spamowanie poprzez umieszczanie linków);
  • przyczyniają się do złamania prawa bądź warunków licencyjnych oprogramowania (cracki, seriale, torrenty itp.);
  • zawierają dane osobowe, teleadresowe, adresy mailowe lub numery GG;
  • merytorycznie nie wnoszą nic do dyskusji lub nie mają związku z tematem komentowanego newsa, artykułu bądź pliku.