HTML5 przyniesie zasadniczą zmianę w obsłudze multimediów. Obsługa dźwięku i video będzie uproszczona. Czy to naprawdę koniec Flasha?
Trzy najważniejsze z punktu widzenia multimediów elementy nowego standardu HTML5 to object, wideo i audio. Object, znany od lat, może zostać wyparty przez nowość, jaką są elementy audio i wideo.
Znajdujący się również w obecnie wykorzystywanych standardach element object służy do powiązania z dokumentem zewnętrznego zasobu. Może on być traktowany zarówno jako obraz, jak i zasób obsługiwany przez plugin (np. Flash, Java, ActiveX).
W HTML-u 5, tak jak w przypadku innych elementów, usunięto własności odpowiedzialne za wygląd – align, border, hspace oraz vspace. Dodano natomiast atrybut form, który definiuje jeden lub więcej formularzy, do których należy element object. Object może służyć również do wysyłania formularzy, nie tylko jako ich element.
Czego nie może object?
Największą wadą elementu object jest uzależnienie możliwości uruchomienia zasobu od dostępności wtyczki tworzonej przez firmy niezależne od twórców przeglądarki. Od dawna znane są problemy z Flashem, Javą czy {link_wew 6593}Silverlightem{/link_wew} pod Linuksem i Mac OS X. Na tych platformach wtyczki nie działają tak samo dobrze jak pod Windowsem. Samo zainstalowanie wtyczki może stanowić problem dla części osób, więc nie należy zakładać, że każdy będzie miał dostęp do zewnętrznej treści.
Od czasu kiedy popularność zyskały smartfony z przeglądarkami działającymi prawie jak te przeznaczone na komputery, dostęp do Flasha i innych wtyczek staje się coraz mniejszy. Wynika to z kilku faktów, m.in. zróżnicowanych systemów czy zbyt małej mocy obliczeniowej jaką dysponują urządzenia mobilne, aby odtwarzanie Flasha było płynne.
Aby zapewnić treść zastępczą, między tagi zamykające i otwierające obiekt wstawia się alternatywny kod. Warto zauważyć, że może się tam znaleźć zarówno obiekt innego typu (np. jeśli internauta nie ma wtyczki Silverlighta, uruchomi się aplet Javy) jak i zwykły tekst. Standard pozwala na wielokrotne zagnieżdżenie kolejnych obiektów wewnątrz kolejnych. Plik obrazek.gif zostanie wstawiony tylko jeśli aplet Javy nie będzie mógł być uruchomiony.
Między tagami otwierającymi i zamykającymi element object może znaleźć się jeszcze element param odpowiedzialny za kontrolę nad rodzicem typu object (w przypadku zagnieżdżenia – najbliższym).
Audio i wideo – pokazowe elementy HTML-a 5
HTML5 ma wyeliminować problem z uzależnieniem od producentów wtyczek. Wprowadza w tym celu elementy audio i wideo, które są używane do odtwarzania odpowiednio dźwięku i filmów.
Wideo posiada następujące atrybuty:
- autoplay – jeśli obecny, film zacznie się odtwarzać automatycznie
- controls – jeśli obecny, widoczne będą kontrolki
- loop – jeśli obecny, odtwarzanie zacznie się ponownie po zakończeniu
- preload – jeśli obecny, film będzie ładowany w czasie ładowania strony
- src – URL filmu
- poster – URL obrazu wyświetlanego jeśli film jest niedostępny
- height – wysokość odtwarzacza
- width – szerokość odtwarzacza
Element wideo wyglądałby więc tak jak w kodzie poniżej. Jeśli przeglądarka go nie obsługuje, zostanie wstawiona animacja we Flashu. Jeśli HTML5 jest obsługiwany, to wnętrze między {html}{/html} zostanie zignorowane.
Należy zauważyć, że atrybut preload zostanie zignorowany, gdyż ustawiono również autoplay, więc materiał musi zacząć się wczytywać. Atrybuty nie muszą przyjmować żadnej wartości, gdyż są typu boolean. Ich obecność oznacza prawdę, a nieobecność – fałsz.
Co ze starszymi przeglądarkami?
Podobnie jak z elementem object: możemy wstawić dodatkową treść między tagi otwierające i zamykające. Można to wykorzystać do zachowania kompatybilności wstecznej z przeglądarkami nieobsługującymi tego tagu, ale wyposażonymi w odpowiednią wtyczkę.
Oddzielamy media
W HTML-u 5 obraz i dźwięk, jako niezależne kanały, zostały oddzielone. Podobnie jak w przypadku wideo, również materiały dźwiękowe posiadają atrybuty src, preload, autoplay, loop i controls. Brakuje width, height oraz poster – dźwięk nie ma zdefiniowanej szerokości i wysokości ani grafiki wyświetlanej przed załadowaniem. Wygląd odtwarzacza może się różnić w zależności od przeglądarki. Nie musi nawet być widoczny. Aby wstawić na stronę dźwięk wystarczy więc następujący kod:
Przeglądarka wstawi w odpowiednim miejscu grafikę z kontrolkami, zacznie wczytywać plik, ale z jego uruchomieniem poczeka na akcję użytkownika. Należy przy tym zastanowić się, czy użycie atrybutu preload jest niezbędne, gdyż przy dostępie do sieci z limitem danych (np. z urządzeń mobilnych), plik zacznie się pobierać bez wiedzy odwiedzającego.
Za pomocą tego elementu możemy umieścić na stronie tło dźwiękowe. Pominięcie atrybutu „controls” spowoduje, że muzyki nie będzie można wyciszyć, przewijać ani kontrolować za pomocą domyślnego odtwarzacza. Należy więc spodziewać się, że nie zostanie to dobrze przyjęte przez użytkowników strony. Jeśli jednak mamy istotny powód do wzbogacenia strony o tło dźwiękowe, wystarczy do tego prosty kod:
W tym przypadku nie pojawią się kontrolki (brak atrybutu controls), więc element audio można umieścić w dowolnym miejscu strony. Zwykle im dalej, tym lepiej – jego ładowanie nie zatrzyma wczytywania dalszej części strony.
Co nowego z obrazkami?
Nie możemy zapominać o elemencie img służącym do wstawiania obrazków. Oprócz wstawiania statycznych bitmap czy plików w standardzie JPG możemy za jego pomocą osadzić dokumenty PDF, pliki XML z obrazem opisanym za pomocą SVG. Specyfikacja podkreśla, że wstawione w ten sposób grafiki powinny być fragmentem treści, a nie elementami ozdobnymi.
W standardzie HTML5 W3C odżegnuje się od atrybutów align, border, hspace i vspace, ale zaleca twórcom przeglądarek ich wspieranie ze względu na wsteczną kompatybilność.
Element img musi mieć ustawioną wartość atrybutu alt (tekst alternatywny), ale dopuszczalny jest w tym miejscu ciąg pusty. Może to nastąpić, jeśli element jest wykorzystywany w innym celu niż wyświetlanie grafiki (np. zliczanie odwiedzin). W takim przypadku wysokość i szerokość grafiki powinny wynosić zero.
Interfejsy – mała rewolucja?
Oddzielenie elementów audio i wideo przy jednoczesnym zachowaniu podobnej składni jak object może wydawać się zbędnym komplikowaniem standardu. Pozwala to jednak na logiczne rozróżnienie tych dwóch mediów przez przeglądarkę i lepszą kontrolę nad wyglądem strony (np. przy wstawianiu elementów zastępczych).
Kolejna nowość, być może najważniejsza w kwestiach związanych z multimediami, to wprowadzenie jednolitych interfejsów pozwalających na dostęp i sterowanie dźwiękiem i obrazem. Służą one zarówno do pobierania informacji o stanie (aktualna klatka, poziom głośności, czy medium jest odtwarzane, czy plik się załadował itp.) jak i manipulowanie odtwarzaniem.
Za pomocą ustalonych metod będziemy mogli uruchomić odtwarzacz, skoczyć do odpowiedniej klatki czy zmienić odtwarzany plik. Do oprogramowania odtwarzacza nie będzie wymagana żadna zewnętrzna wtyczka. Będzie można nim sterować przez JavaScript lub inny język korzystający z DOM. Wykorzystanie tych możliwości zależy w dużej mierze od chęci programistów.
Czy wideo pokona Flasha?
Wprowadzenie interfejsów wyeliminuje więc konieczność instalowania wtyczek (o ile są dostępne dla danego urządzenia). Z drugiej strony Flash czy Silverlight nie powinny odejść w zapomnienie. Cały czas są przecież zastosowania, w których stworzenie aplikacji we Flashu jest prostsze i tańsze niż zrobienie tego samego w HTML-u wspartym JavaScriptem (gry, rozbudowane aplikacje). Tylko czy zwykłemu użytkownikowi będzie potrzebny Flash, jeśli może oglądać YouTube przez element wideo, a animowane, flashowe menu odchodzą w zapomnienie?
