Kurs XHTML. Formatujemy strony WWW

7.2. Multimedia: element „object”

Za pomocą elementu „object” (ang. obiekt) możesz wstawić na stronę WWW jakikolwiek rodzaj treści multimedialnej - od animacji Flash, poprzez filmy QuickTime, aż do apletów Javy. Ponieważ przeglądarka w większości wypadków nie potrafi sama wyświetlić tej treści, będzie ona prezentowana w oknie browsera, ale z użyciem zewnętrznych aplikacji, tak zwanych wtyczek do przeglądarki (ang. plug-in). Popularne wtyczki to Adobe Flash Player, Apple QuickTime player i Sun Java plug-in. Cześć z nich jest automatycznie dołączana do najnowszych wersji popularnych przeglądarek; inne muszą być pobierane i instalowane osobno.

Powinieneś również wiedzieć, że specyfikacja XHTML podaje, iż w przyszłości element „object” będzie służył także do zamieszczania zwykłych obrazów - zastąpi więc element „img”.

W przeciwieństwie do „img” element „object” nie jest pustym elementem - czyli składa się również ze znacznika zamykającego!

7.2.1. Wstawianie obiektów: podstawy

Spójrz więc, w jaki sposób wstawić do dokumentu XHTML animację Flash:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://fpdownload.macromedia.com/pub/shockwave/

cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400">

<param name="movie" value="przykladowa-animacja.swf" />

<param name="quality" value="high" />

<embed src="przykladowa-animacja.swf" quality="high"

width="550" height="400" type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

Na pierwszy rzut oka trochę to skomplikowane, ale zaraz wszystko zrozumiesz. Po pierwsze: atrybut „classid”. Wartość tego atrybutu zawiera identyfikator URI implementacji obiektu. Implementacja obiektu jest to kod komputerowy, który wyświetla ten obiekt. W wielu wypadkach jest to po prostu wtyczka będąca kontrolką (formantem) ActiveX.

Jeżeli URI implementacji jest URL-em prowadzącym do zasobu dostępnego w sieci Web, zaczyna się nazwą znanego Ci już protokołu: „http:”. Jeśli implementację stanowi aplet Java, wtedy URI rozpoczyna się od ciągu „java:”. Jeżeli natomiast implementacja to kontrolka ActiveX, prefiks ten wygląda następująco: „clsid:” (ang. class id, identyfikator klasy). W tym wypadku implementacją obiektu jest kontrolka ActiveX programu Adobe Flash Player.

Następny atrybut to „codebase” (ang. code base, baza kodu komputerowego). Jego wartość definiuje URI, pod którym znajdują się implementacje i dane obiektu. Mówiąc prościej: baza kodu to miejsce, skąd przeglądarka może pobrać dostępne implementacje oraz dane określonego obiektu. W praktyce atrybut ten określa URL do wersji instalacyjnej wtyczki, która znajduje się na serwerze jej producenta - tak aby w wypadku braku tego plug-ina w systemie użytkownika przeglądarka mogła automatycznie go zainstalować.

Rola dwóch następnych atrybutów jest oczywista: „width” definiuje szerokość, a „height” wysokość w pikselach.

Element „object” oprócz dotychczas wymienionych atrybutów ma jeszcze inne, o których (choć nie są tu zastosowane) powinieneś wiedzieć. Wartość atrybutu „codetype” określa typ mediów danej implementacji. Atrybut „data” to URI danych obiektu - dane te znajdują się w bazie kodu (atrybut „codebase”). Z kolei atrybut „type” określa typ mediów tych danych.

Spójrzmy na miejsce, gdzie znajdują się dwa puste elementy „param” (ang. parameter, parametr). Wartość „param", jak sama nazwa wskazuje, dostarcza implementacji dodatkowych parametrów, które mogą być przez nią wymagane. Robi to w postaci: nazwa parametru (atrybut „name”) i jego wartość (atrybut „value”). W naszym wypadku pierwszy parametr definiuje właściwy plik animacji Flash (ang. movie, film), a drugi - jego jakość (ang. quality), która tutaj jest ustawiona jako wysoka.

7.2.2. Ten parszywy „embed”

Lecz cóż to! Następnie w naszym przykładzie pojawia się dziwny, pusty element „embed”, który wiele z określonych dotychczas wartości po prostu bezczelnie dubluje w wartościach swoich atrybutów!

Sęk w tym, że dotychczas wyjaśnioną składnię z użyciem elementu „object”, pozwalającą wstawić na stronę animację Flash, obsługuje tylko jedna przeglądarka: Internet Explorer. Jedna to za mało, dlatego właśnie w obrębie elementu „object” znajduje się inny element, „embed”, który odpowiada za wyświetlenie animacji Flash we wszystkich pozostałych rodzajach browserów. W obrębie tego elementu atrybut „src” wskazuje na nazwę pliku animacji, „type” na jej internetowy typ mediów, a „pluginspage” definiuje stronę WWW danej wtyczki.

Ukazuje to unikatową cechę „object”: możliwość jego wielokrotnego zagnieżdżania. Ponieważ nie jest to element pusty, może zawierać w sobie inne elementy „object”, a także elementy prezentujące rodzaje treści, np. zwykłe obrazy lub nawet tekst. Całość może komponować się tak jak matrioszka - wielokrotnie zagnieżdżone w sobie elementy „object” i inne rodzaje elementów. Po co to wszystko?

Otóż gdy przeglądarka nie może z jakichś powodów wyświetlić najbardziej zewnętrznego obiektu, który zawiera najbogatszy wariant treści (np. film), próbuje z tym wewnętrznym. Najczęściej powodem niemożności wyświetlenia obiektu jest po prostu brak danej wtyczki w systemie użytkownika. Gdy i wewnętrzny obiekt okazuje się niemożliwy do prezentacji - browser wybiera następny, bardziej wewnętrzny i mniej bogaty wariant treści alternatywnej i tak dalej, aż natrafi na treść najuboższą, ale taką którą może wyświetlić - zazwyczaj jest to statyczny obraz lub po prostu tekst.

Kłopot z „embed” polega na tym, że elementu tego nie ma w specyfikacji XHTML - jest on więc niezgodny ze standardami. „Embed” to pozostałość po starych czasach sieci Web, która jest nadal stosowana, ponieważ jest rozpoznawana przez bardzo wiele rodzajów przeglądarek. Inną wadą przedstawionego sposobu wstawiania na stronę WWW animacji Flash jest jego redundancja - ta sama dyrektywa i jej parametry powtórzone są dwa razy. No i, last but not least, jest to po prostu metoda brzydka.

A zalety? Sposób ten jest bardzo szeroko obsługiwany przez przeglądarki internetowe. Jest to też oficjalna metoda wspierana przez środowisko projektowe programu Adobe Flash. Dlatego, chcąc nie chcąc, jest ona stosowana.

7.2.3. Kolejny problem: patenty

Jeśli przetestujesz nasz kod wstawiający na stronę WWW animację Flash, możesz spotkać się z osobliwym zachowaniem browsera. Wszystko zależy od tego, jakiej przeglądarki używasz: jeśli jest to Firefox, to wszystko jest w porządku. Ale już pod Internet Explorerem, gdy najedziesz wskaźnikiem myszy na obszar animacji, zostanie ona otoczona przez dziwną ramkę i ukaże się napis informujący, że musisz kliknąć, aby uaktywnić i używać danego formantu. Podobnie zachowuje się Opera. Nie trzeba dodawać, że coś takiego nie tylko zmniejsza atrakcyjność wizualną strony, ale także jej użyteczność.

Rysunek 15. Przykre skutki opatentowania w anglojęzycznej wersji Microsoft Internet Explorera 6.0.

O co chodzi? O patenty. Technologia wtyczek została opatentowana przez firmę o nazwie Eolas, która wygrała proces z Microsoftem, uzyskała odszkodowanie w wysokości 521 milionów dolarów i w 2006 roku zmusiła go do usunięcia z Internet Explorera możliwości bezpośredniego umieszczania kontrolek ActiveX w dokumencie XHTML. Na podobny krok zdecydowali się producenci przeglądarki Opera, a w przyszłości również i producenci innych browserów mogą podjąć podobne kroki.

7.2.4. Wstawianie animacji Flash

Czy niczego się nie da zrobić z tym okropnym patentem? Pewnie, że się da. Trik polega na tym, aby kontrolka ActiveX była osadzana w stronie WWW za pomocą skryptu JavaScript - takiego typu wstawiania zawartości aktywnej patent Eolas nie obejmuje. Stąd wystarczy pobrać odpowiedni skrypt i zamieścić go na stronie w obrębie elementu „head”:

<script src="AC_RunActiveContent.js"

language="JavaScript" type="text/javascript"></script>

Teraz, w miejscu, gdzie chcesz wyświetlić animację Flash, wstawiasz następujący kod:

<script type="text/javascript">

AC_FL_RunContent('codebase',

'http://fpdownload.macromedia.com/

pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',

'width','550','height','400','src','przykladowa-animacja',

'quality','high','pluginspage',

'http://www.macromedia.com/go/getflashplayer','movie',

'przykladowa-animacja' );</script>

Zauważ, że rozdzielone przecinkami parametry funkcji JavaScript AC_FL_RunContent to tak naprawdę pary: atrybut elementu „object” i jego wartość, nazwa elementu „param” i jego wartość lub atrybut elementu „embed” i jego wartość. Parametr „classid” nie jest konieczny, ponieważ jego wartość w wypadku wstawiania animacji Flash jest zawsze taka sama.

W spakowanym archiwum zawierającym plik AC_RunActiveContent.js znajduje się jeszcze jeden przydatny skrypt: AC_ActiveX.js. Umożliwia on umieszczanie na stronie WWW innych rodzajów zawartości aktywnej.

7.2.5. Wstawianie filmu QuickTime

Sposób wstawiania filmów QuickTime jest bardzo podobny do tego stosowanego w wypadku animacji Flash. W poniższym przykładzie wszystkie parametry powinny być dla Ciebie jasne. Jedynym wyjątkiem może być „autoplay”, który, jeśli jest ustawiony na „true”, powoduje automatyczne odtworzenie filmu; wartość przeciwna to „false”:

<object classid="clsid:02BF25D5-8C17-4B23-

-BC80-D3488ABDDC6B"

codebase="http://www.apple.com/qtactivex/qtplugin.cab

#version=6,0,2,0" width="320" height="256">

<param name="src" value="przykladowy-film.mov" />

<param name="autoplay" value="true" />

<embed src="przykladowy-film.mov" autoplay="true"

width="320" height="256"

pluginspage="http://www.apple.com/quicktime/download/" />

</object>

Niestety, i tutaj występuje problem z wyświetlaniem zawartości aktywnej. Na szczęście rozwiązanie jest bardzo podobne do stosowanego w wypadku wstawiania animacji Flash. Należy pobrać skrypt. W nagłówku strony umieszcza się następujący fragment kodu:

<script src="AC_QuickTime.js"

language="JavaScript" type="text/javascript"></script>

W pożądanym miejscu wstawienia filmu wstawiamy natomiast:

<script language="JavaScript" type="text/javascript">

QT_WriteOBJECT_XHTML('sample.mov', '320', '256',

'', 'autoplay', 'true')</script>

Jako że parametry „classid”, „codebase” i „pluginspage” mają zawsze standardowe nazwy, ich użycie w tym wypadku nie jest konieczne. Z kolei zastosowanie prefiksu „emb#” w nazwie parametru powoduje, że jest on dołączany tylko jako atrybut elementu „embed”, a nie jako element „param”.

Więcej o skryptowych metodach omijania patentu Eolas znajdziesz na stronach Adobe i Apple. Jeśli jednak i to rozwiązanie Ci nie odpowiada - choćby dlatego, że miesza logikę strony WWW z jej strukturą - wypróbuj rozwiązanie o nazwie UFO.

---