Kurs HTML5. SPrawdzanie obsługi elementu video przez przeglądarki

W rozdziale:

Wideo

W specyfikacji języka HTML5 zdefiniowano nowy element o nazwie video służący do osadzania filmów na stronach internetowych. Wcześniej aby odtworzyć film opublikowany na stronie internetowej, trzeba było mieć zainstalowaną zewnętrzną wtyczkę, np. Apple QuickTime® albo Adobe Flash®.

Element video jest tak zaprojektowany, aby można było go używać bez żadnych skryptów wykrywających. Można określić kilka formatów plików wideo, a przeglądarki obsługujące element video HTML5 wybiorą odpowiedni dla siebie. (Zobacz „A gentle introduction to video encoding” part 1: container formats i part 2: lossy video codecs, aby dowiedzieć się więcej o formatach wideo.)

Przeglądarki nie obsługujące wideo HTML5 ignorują element video, ale można to obrócić na swoją korzyść nakazując im w takim przypadku odtworzenie filmu w zewnętrznej wtyczce. Kroc Camen opracował rozwiązanie o nazwie Video for Everybody!, które wykorzystuje wideo HTML5, jeśli jest to możliwe i przełącza się awaryjnie na QuickTime lub Flash w przypadku starszych przeglądarek. W rozwiązaniu tym nie jest używany język JavaScript, dzięki czemu działa ono w dosłownie każdej przeglądarce, wliczając aplikacje mobilne.

Jeśli jednak chcesz zrobić coś więcej z filmem niż tylko go umieścić na stronie i odtworzyć, musisz użyć JavaScriptu. Obsługę wideo sprawdza się przy użyciu techniki nr 2. Jeśli przeglądarka obsługuje wideo HTML5, to utworzony obiekt DOM reprezentujący element video ma metodę canPlayType(). Jeśli przeglądarka nie obsługuje wideo HTML5, to utworzony obiekt DOM dla elementu video ma tylko standardowe własności i nie ma żadnej z charakterystycznych tylko dla tego elementu. Obsługę wideo można sprawdzić za pomocą poniższej funkcji:

function supports_video() {
  return !!document.createElement('video').canPlayType;
}

Zamiast pisać tę funkcję własnoręcznie do sprawdzania obsługi wideo HTML5 można użyć biblioteki Modernizr.

Sprawdzanie obsługi wideo HTML5

if (Modernizr.video) {
  // włączmy jakiś film!
} else {
  // brak standardowej obsługi wideo :(
  // może warto sprawdzić czy dostępne s QuickTime albo Flash
}

W rozdziale na temat wideo w sieci opisane jest jeszcze inne rozwiązanie, dzięki któremu można wykorzystać opisane tutaj techniki wykrywania do konwersji elementów video na odtwarzacze Flash dla przeglądarek nie obsługujących wideo HTML5.

Do sprawdzania które formaty wideo obsługuje przeglądarka służy inny test, którego opis znajduje się poniżej.

Formaty wideo

Formaty wideo są jak naturalne języki. W polskiej gazecie mogą znajdować się te same informacje, co w gazecie hiszpańskiej, ale jeśli znasz tylko język polski to hiszpańska gazeta będzie dla ciebie bezużyteczna. Aby odtworzyć film, przeglądarka musi znać „język”, w którym film ten został napisany.

Język filmu wideo nazywa się kodekiem — jest to algorytm służący do kodowania filmu w postaci strumienia bitów. Na świecie używa się wielu różnych kodeków. Który w takim razie powinienem wybrać? W języku HTML5 występuje problem polegający na tym, że producenci przeglądarek nie mogą się zgodzić na jeden wspólny kodek. Wydaje się jednak, że w grze pozostały już tylko dwa. Jeden jest płatny (ze względu na patent), ale działa w przegldarce Safari i w iPhonie. (Działa też we Flashu, jeśli używasz rozwiązania typu Wideo dla każdego!) Drugi kodek jest darmowy i działa we wszystkich przeglądarkach o otwartym kodzie źródłowym, jak Chromium i Mozilla Firefox.

Obsługę formatów wideo sprawdza się przy użyciu techniki nr 3. Jeśli przeglądarka obsługuje wideo HTML5, to utworzony obiekt DOM reprezentujący element video ma metodę canPlayType(). Wykorzystując tę metodę można się dowiedzieć, czy przeglądarka obsługuje wybrany format wideo.

Poniższa funkcja sprawdza obsługę opatentowanego formatu obsługiwanego w komputerach Mac i iPhone’ach.

function supports_h264_baseline_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

Funkcja rozpoczyna działanie od sprawdzenia obsługi wideo HTML5 przy użyciu funkcji supports_video(), która została przedstawiona w poprzedniej części rozdziału. Jeśli przeglądarka nie obsługuje wideo HTML5, to z pewnością nie obsługuje też żadnych formatów wideo!

  if (!supports_video()) { return false; }

Następnie funkcja tworzy atrapę elementu video (nie dołącza go do strony, dzięki czemu nie jest on widoczny) i wywołuje metodę canPlayType(). Mamy pewność, że metoda ta jest dostępna, ponieważ sprawdziła to funkcja supports_video().

  var v = document.createElement("video");

Format wideo to w istocie kombinacja kilku składników. Posługując się ściśle techniczną terminologią można powiedzieć, że sprawdzamy czy przeglądarka potrafi odtwarzać wideo w formacie H.264 Baseline i audio AAC LC w kontenerze MPEG-4. (Pojęcia te są dokładnie objaśnione w rozdziale o wideo. Może też Cię zaciekawić artykuł A gentle introduction to video encoding — Bezbolesne wprowadzenie do kodowania wideo.)

  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

Funkcja canPlayType() nie zwraca wartości true ani false. Biorąc pod uwagę fakt, że formaty wideo są bardzo skomplikowane, funkcja ta zwraca jeden z poniższych łańcuchów:

"probably" — jeśli jest duże prawdopodobieństwo, że przeglądarka potrafi odtworzyć filmy w danym formacie
"maybe" — jeśli przeglądarce „się wydaje”, że uda się jej odtworzyć film w danym formacie
"" (pusty łańcuch) — jeśli jest pewne, że przeglądarka nie obsługuje danego formatu

Poniższa funkcja sprawdza obsługę otwartego formatu wideo obsługiwanego przez Firefoksa i inne otwarte przeglądarki. Proces sprawdzania jest prawie taki sam, jak poprzednio. Jedyna różnica dotyczy łańcucha przekazywanego do funkcji canPlayType(). Posługując się ściśle techniczną terminologią pytamy przeglądarkę czy potrafi odtwarzać wideo w formacie Theora i audio Vorbis w kontenerze Ogg.

function supports_ogg_theora_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}

Powstał też nowy otwarty kodek wideo WebM (nie obciążony żadnymi patentami), który będzie obsługiwany przez przyszłe wersje wszystkich najważniejszych przeglądarek, wliczając Chrome, Firefoksa i Operę. Obsługę formatu WebM można sprawdzić w taki sam sposób, jak poprzednich.

function supports_webm_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}

Zamiast pisać tę funkcję własnoręcznie do sprawdzania obsługi różnych formatów wideo HTML5 można użyć biblioteki Modernizr ( 1.5 lub nowszej).

Sprawdzanie obsługi formatów wideo HTML5

if (Modernizr.video) {
  // włczmy jakiś film! ale jakiego rodzaju?
  if (Modernizr.video.webm) {
    // spróbujmy WebM
  } else if (Modernizr.video.ogg) {
    // spróbujmy Ogg Theora + Vorbis w kontenerze Ogg
  } else if (Modernizr.video.h264){
    // spróbujmy H.264 + AAC w kontenerze MP4
  }
}