W rozdziale:

• Wprowadzenie
• Kontenery wideo
• Kodeki wideo
• Kodeki audio
• Obsługa kodeków
• Licencja kodeka H264
• Poradnik do programu Video Converter
• Poradnik do programu Firefogg
• Poradnik do programu ffmpeg2theora
• Poradnik do programu HandBrake
• Poradnik do programu ffmpeg
• Element HTML5 video
• Wideo w Internet Explorerze
• iPhone, iPad i Android
• Przykład

W końcu kod HTML

Wydaje mi się, że tematem tej książki jest język HTML. Gdzie w takim razie podziały się znaczniki?

W języku HTML5 filmy na stronach można umieszczać na dwa sposoby. W obu przypadkach używa się elementu <video>. Jeśli mamy tylko jeden plik wideo, to możemy po prostu wpisać ścieżkę do niego w atrybucie src. W taki sam sposób wstawia się na strony obrazy przy użyciu elementu <img src="...">.

Jeden plik wideo

<video src="pr6.webm"></video>

I to w sumie wszystko. Ale podobnie jak w przypadku elementu <img>, w elemencie <video> zawsze należy definiować atrybuty width i height. Jako wartość można wpisać maksymalną szerokość i wysokość filmu podaną podczas definiowania ustawień kodowania. Nie przejmuj się, jeśli jeden z wymiarów filmu będzie odrobinę mniejszy od drugiego. Przeglądarka ustawi film pośrodku pola tworzonego przez element <video>. Obraz filmu na pewno nie zostanie zniekształcony.

<video src="pr6.webm" width="320" height="240"></video>

Domyślnie element video nie wyświetla żadnych przycisków odtwarzacza. Można je utworzyć przy użyciu HTML, CSS i JavaScriptu. Element video ma metody play() i pause() oraz własność do odczytu i zapisu o nazwie currentTime. Ponadto udostępnia też własności do odczytu i zapisu volume i muted. Jak widać jest wszystko, czego potrzeba do zbudowania własnego interfejsu.

Jeśli nie chcesz się tym zajmować, możesz też wyświetlić standardowy zestaw kontrolek. W tym celu dodaj elementowi <video> atrybut controls.

<video src="pr6.webm" width="320" height="240" controls></video>

W tym miejscu warto poznać jeszcze dwa inne atrybuty tego elementu: preload i autoplay. Poniżej objaśniam, do czego może się ta wiedza przydać. Atrybut preload informuje przeglądarkę, że powinna rozpocząć pobieranie filmu od razu po wczytaniu strony. Ma to sens wtedy, gdy cała strona służy właśnie do obejrzenia tego filmu. Jeśli jednak wideo jest tylko materiałem uzupełniającym, który obejrzy zaledwie kilku użytkowników, to lepiej atrybut preload ustawić na none, aby zminimalizować niepotrzebne obciążenie łączy sieciowych.

Poniżej znajduje się przykład filmu, którego pobieranie (ale nie odtwarzanie) rozpocznie się od razu po wczytaniu strony:

<video src="pr6.webm" width="320" height="240" preload></video>

A poniżej znajduje się przykład filmu, którego pobieranie nie rozpocznie się od razu po wczytaniu strony:

<video src="pr6.webm" width="320" height="240" preload="none"></video>

Zastosowania atrybutu autoplay można domyślić się po jego nazwie: nakazuje przeglądarce rozpocząć pobieranie filmu od razu po wczytaniu strony i zacząć jego odtwarzanie najszybciej, jak to będzie możliwe. Niektórzy to uwielbiają, a inni tego nie cierpią. Wyjaśnię dlaczego istnienie takiego atrybutu w języku HTML5 jest ważne. Niektórzy będą włączać automatyczne odtwarzanie filmów nawet mimo tego, że denerwuje to część użytkowników. Gdyby w HTML5 nie było standardowego sposobu na automatyczne odtwarzanie filmów, ludzie i tak znaleźli by na to sposób używając JavaScriptu. (Wystarczyłoby np. wywołać metodę play() podczas zdarzenia load okna.) Wyłączenie tego przez użytkownika byłoby bardzo trudne. Z drugiej strony łatwo można dodać (albo napisać własne) rozszerzenie do przeglądarki ignorujące atrybut autoplay.

Poniżej znajduje się przykład filmu, którego pobieranie i odtwarzanie rozpocznie się najszybciej jak to możliwe po wczytaniu strony:

<video src="pr6.webm" width="320" height="240" autoplay></video>

A tu przedstawiam skrypt Greasemonkey, który można zainstalować w Firefoksie, aby wyłączyć automatyczne odtwarzanie filmów w HTML5. Wykorzystuje on atrybut DOM autoplay zdefiniowany w HTML5, który jest w JavaScript odpowiednikiem atrybutu autoplay w kodzie HTML. [disable_video_autoplay.user.js]

// ==UserScript==
// @name           Disable video autoplay
// @namespace      http://diveintomark.org/projects/greasemonkey/
// @description    Wyłącza automatyczne odtwarzanie filmów w elementach HTML5 video
// @include        *
// ==/UserScript==
var arVideos = document.getElementsByTagName('video');
for (var i = arVideos.length - 1; i >= 0; i--) {
    var elmVideo = arVideos[i];
    elmVideo.autoplay = false;
}

Chwileczkę… Jeśli czytasz ten rozdział od początku i robiłeś wszystko po kolei, to masz nie jeden plik wideo tylko trzy. Jeden z nich to film .ogv utworzony przy użyciu narzędzia Firefogg lub ffmpeg2theora. Drugi to plik .mp4 utworzony przy użyciu programu HandBrake. A trzeci jest plikiem .mp4 utworzonym przy użyciu narzędzia ffmpeg. W języku HTML5 można połączyć wszystkie te filmy z jednym elementem: służy do tego element <source>. Każdy element <video> może zawierać dowolną liczbę elementów <source>. Przeglądarka przejrzy tę listę źródeł i wybierze pierwsze, które potrafi odtworzyć.

Nasuwa się kolejne pytanie: skąd przeglądarka wie, który film będzie w stanie odtworzyć? W najgorszym przypadku wczyta każdy z nich i spróbuje je odtworzyć po kolei. Ale to byłoby wielkim marnotrawstwem transferu. Dużo zyskasz, jeśli z góry dostarczysz przeglądarce odpowiednich informacji. Służy do tego atrybut type elementu <source>.

Oto cały potrzebny nam kod źródłowy:

Trzy pliki wideo

<video width="320" height="240" controls>
  <source src="pr6.mp4"  type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis">
  <source src="pr6.ogv"  type="video/ogg; codecs=theora,vorbis">
</video>

Przeanalizujemy to. Element <video> zawiera informację o szerokości i wysokości filmu, ale nie podaje ścieżki do pliku. W elemencie <video> znajdują się trzy elementy <source>. Każdy z nich <source> zawiera ścieżkę do jednego pliku wideo (w atrybucie src) oraz informacje na temat jego formatu umieszczone w atrybucie type.

Atrybut type wydaje się skomplikowany i rzeczywiście jest skomplikowany. Zawiera kombinację trzech rodzajów informacji: format kontenera, kodek wideo oraz kodek audio. Zaczniemy od końca. Dla pliku .ogv formatem kontenera jest Ogg, który oznaczony został jako video/ogg. (Jest to tzw. typ MIME plików wideo Ogg.) Kodek wideo to Theora, a kodek audio to Vorbis. Niby nic trudnego, tylko składnia atrybutu jest jakaś taka dziwna. „Jako że wartość musi zawierać cudzysłów, całość trzeba umieścić w innym rodzaju cudzysłowu.”

  <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis">

Z WebM jest bardzo podobnie, tylko w parametrze codecs trzeba wpisać inny typ MIME (video/webm zamiast video/ogg) i podać inny typ kodeka wideo (vp8 zamiast theora).

  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis">

Parametry wideo H.264 są jeszcze bardziej skomplikowane. Pamiętasz, że kodeki wideo H.264 i audio AAC mają różne profile? Nasz film zakodowaliśmy przy użyciu profilu podstawowego H.264 i niskiego AAC, a potem zapakowaliśmy go w kontener MPEG-4. Wszystkie te informacje muszą zostać podane w atrybucie type.

  <source src="pr6.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">

Wypisywanie tych wszystkich informacji jest warte zachodu, bo przeglądarka najpierw sprawdza atrybut type, aby dowiedzieć się czy potrafi odtworzyć określony plik. Jeżeli odkryje, że nie może odtworzyć określonego pliku, to go nie pobierze. Nie ściągnie nawet kawałeczka. Zaoszczędzisz na transferze, a użytkownicy szybciej obejrzą film, po który przyszli na twoją stronę.

Jeśli swoje filmy zakodujesz stosując się do wskazówek zamieszczonych w tym rozdziale, to możesz po prostu skopiować wartości atrybutu type z tego przykładu. W przeciwnym razie musisz samodzielnie znaleźć parametry type dla swoich filmów.

Ciemna strona typów MIME

Z publikowaniem filmów wiąże się tak wiele komplikacji, że aż boję się podnosić kolejną kwestię. Ale to jest ważne, ponieważ źle skonfigurowany serwer może doprowadzić cię do szewskiej pasji, gdy będziesz próbował dociec dlaczego na twoim komputerze filmy się odtwarzają, a pobierane z serwera nie chcą grać. Jeśli natrafisz na tego rodzaju trudności, to źródłem twoich problemów prawdopodobnie są typy MIME.

O typach MIME pisałem w rozdziale o historii języka HTML, ale pewnie tylko pobieżnie to przeczytałeś i nie starałeś się wszystkiego dokładnie zapamiętać. Dlatego powtarzam najważniejszą informację wielkimi literami:

Jaki typ MIME jest odpowiedni? Już go widziałeś. Wchodzi w skład wartości atrybutu type elementu <source>. Jednak właściwe ustawienie w atrybucie type w kodzie HTML to za mało. Dodatkowo trzeba się upewnić, że serwer dodaje odpowiedni typ MIME w nagłówku HTTP Content-Type.

Jeśli używasz serwera Apache albo jakiegoś pochodnego, to możesz w ogólnym pliku httpd.conf albo w pliku .htaccess znajdującym się w folderze z filmami użyć dyrektywy AddType. (Jeżeli używasz innego serwera, poszukaj w dokumentacji informacji jak ustawić nagłówek HTTP Content-Type dla wybranych typów plików.)

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Pierwszy z powyższych wierszy kodu dotyczy plików wideo w kontenerze Ogg. Drugi dotyczy plików wideo w kontenerze MPEG-4. Trzeci dotyczy WebM. Ustawiamy raz i zapominamy. Jeśli tego nie zrobisz, twoje filmy w niektórych przeglądarkach nie będą dały się odtworzyć, nawet mimo ustawienia typu MIME w atrybucie type w elemencie HTML.

Więcej informacji o konfigurowaniu serwera znajdziesz w doskonałym artykule w Mozilla Developer Center: Configuring servers for Ogg media. (Porady w nim zawarte odnoszą się też do MP4 i WebM.)

• Wprowadzenie
• Kontenery wideo
• Kodeki wideo
• Kodeki audio
• Obsługa kodeków
• Licencja kodeka H264
• Poradnik do programu Video Converter
• Poradnik do programu Firefogg
• Poradnik do programu ffmpeg2theora
• Poradnik do programu HandBrake
• Poradnik do programu ffmpeg
• Element HTML5 video
• Wideo w Internet Explorerze
• iPhone, iPad i Android
• Przykład