HTML5 - Odtwarzacz wideo na stronie

W obecnych czasach na stronach www coraz powszechniej umieszczane są filmy. Wcześniej częściej używany był flash, obecnie wykorzystywane są częściej inne pluginy umożliwiające wyświetlanie odtwarzacza na stronie. Niestety większość z dostępnych pluginów to płatne skrypty, inne natomiast są zbyt ciężkie do obsługi. Bardzo często na stronach można spotkać również odtwarzacz z serwisu Youtube. Twórcy specyfikacji HTML 5 dostrzegli lukę i dodali do standardu elementy umożliwiające wyświetlenie na stronie odtwarzacza wbudowanego w przeglądarkę. Rozwiązanie to pozwala na wyświetlenie filmu w jednym z obsługiwanych formatów, bez konieczności obciążania sprzętu zasobożernymi pluginami.

Zobacz:


Przykład osadzonego odtwarzacza

<video height="160" width="280" controls="controls">
   <source src="/klocki.mp4" type="video/mp4">
   <source src="/klocki.ogg" type="video/ogg">
   <source src="/klocki.webm" type="video/webm">
Twoja przeglądarka nie obsługuje wideo.
</video>

Osadzanie odtwarzacza w kodzie strony - video

Do osadzania wideo w kodzie strony służy element video. Pomiędzy znacznikami tego elementu umieszczane są elementy określające źródło (element source), plik tekstowy (element track) oraz tekst alternatywny, który wyświetli się w przypadku, gdy przeglądarka nie obsługuje wideo.

Znacznik początkowy elementu video może zawierać szereg atrybutów pozwalających na określenie zachowania i wyglądu odtwarzacza. Użyte w przykładzie atrybuty width oraz height pozwalają na określenie w pikselach odpowiednio szerokości i wysokości, dzięki czemu przeglądarka podczas ładowania strony od razu rezerwuje przestrzeń dla odtwarzacza. Atrybut controls dodaje w odtwarzaczu pasek sterowania pozwalający na zatrzymanie i wznowienie odtwarzania, regulację głośności oraz umożliwiający wyświetlenie filmu na całym ekranie.

Przykład:

<video height="160" width="280" controls="controls">
   <source src="/klocki.mp4" type="video/mp4">
   <source src="/klocki.ogg" type="video/ogg">
   <source src="/klocki.webm" type="video/webm">
Twoja przeglądarka nie obsługuje wideo.
</video>

Tekst umieszczony pomiędzy znacznikami elementu video wyświetli się zamiast odtwarzacza w przeglądarkach nie obsługujących wideo.


Atrybuty elementu video

Atrybuty elementu video pozwalają na precyzyjne określenie parametrów odtwarzacza i jego funkcjonalności.

Atrybuty elementu video:

Atrybut Opis
autoplay Automatycznie odtwarza wideo po załadowaniu.
Wartość: autoplay.
controls Wyświetla pasek sterowania odtwarzaczem.
Wartość: controls.
height Określa wysokość odtwarzacza.
Wartość: rozmiar w pikselach.
loop Odtwarza wideo w pętli.
Wartość: loop.
muted Wycisza początkowo audio.
Wartość: muted.
poster Wskazuje grafikę wyświetlaną zanim rozpocznie się odtwarzanie wideo.
Wartość: url.
preload Określa jak przeglądarka powinna ładować wideo.
Wartości: auto, metadata, none.
src Wskazuje adres URL pliku źródłowego.
Wartość: url.
width Określa szerokość odtwarzacza.
Wartość: rozmiar w pikselach.

Plik źródłowy - source

Element source wskazuje na plik wideo, który ma zostać wyświetlony w odtwarzaczu. Do określenia ścieżki dostępu do zasobu służy atrybut src tego elementu. Natomiast w atrybucie type elementu source określany jest identyfikator formatu wideo.

W elemencie video można umieścić więcej elementów source. Jeśli przeglądarka nie będzie w stanie rozpoznać i odtworzyć pierwszego wskazanego źródła, będzie sprawdzać kolejne, zakodowane w innych formatach.

<video height="160" width="280" controls="controls">
   <source src="/klocki.mp4" type="video/mp4">
   <source src="/klocki.ogg" type="video/ogg">
   <source src="/klocki.webm" type="video/webm">
Twoja przeglądarka nie obsługuje wideo.
</video>

Atrybut type elementu source

W atrybucie type elementu source, określa się identyfikator formatu wideo dla pliku wskazanego w atrybucie src tego elementu. Obecnie możliwe jest wyświetlenie w przeglądarce trzech formatów wideo: MP4, Ogg oraz WebM. Wartością atrybutu type jest jeden z typów MIME:

Wartości atrybutu type:

Wartość Opis
video/mp4 Format MP4 z kodekiem wideo H.264 i kodekiem audio AAC.
video/ogg Format Ogg z kodekiem wideo Theora i kodekiem audio Vorbis.
video/webm Format WebM z kodekiem wideo VP8 i kodekiem audio Vorbis.

Elementy wideo

Tag pocz. Tag końc. Opis
<video> </video> Umieszcza na stronie odtwarzacz wideo.
<source>  Określa zasób dla elementu multimedialnego.
<track>  Dołącza plik tekstowy dla elementów multimedialnych.