Kliknjimy
  Multimedia
 
Kurs języka HTML - poradnik webmastera: Multimedia

Multimedia

O rozdziale: Pliki multimedialne niezmiennie przysparzają webmasterom wielu siwych włosów. W ciągu ostatnich 10 lat mieliśmy nie tylko do czynienia ze zmieniającymi się formatami plików, ale i ewoluującymi ciągle przeglądarkami, które z dnia na dzień przestają nagle "rozumieć" pewne zasady umieszczania takich plików w Sieci. W rozdziale próbujemy podać kilka w miarę "pewnych" sposobów umieszczania multimediów, które nie są sprzeczne ze współczesnymi standardami. Nie ulega jednak wątpliwości, że mamy tu do czynienia ze sporą dozą tymczasowości.

Kłopoty

Przede wszystkim trzeba zauważyć, że najpopularniejsze ze stosowanych powszechnie poleceń zagnieżdżania plików multimedialnych, czyli embed, nie było nigdy elementem HTML, a jedynie rozszerzeniem firmy Netscape, wprowadzonym w Navigatorze, które zostało potem przyjęte przez konkurencyjne przeglądarki. Również niezgodne ze specyfikacją jest inne popularne polecenie, bgsound, które nigdy nie było częścią HTML, a jedynie nieoficjalnym rozszerzeniem Internet Explorera, zaakceptowanym także przez Operę. Na domiar złego niektóre przeglądarki zaczęły się częściowo wycofywać z obsługi tych poleceń i w tej chwili mamy do czynienia ze sporym zamieszaniem. Jednym słowem, multimedia na stronach WWW były wprowadzane niejako na dziko.

Co więcej, tak się dzieje do dzisiaj, bo na przykład najpopularniejszy obecnie format multimedialny, czyli Flash, jest wprowadzany w ogromnej większości przypadków za pomocą mieszanego polecenia object /embed, z których pierwsze jest zgodne z rozwijającym się standardem webmasterskim, a drugie w ogóle formalnie nie istnieje. Widać to zwłaszcza w popularnym i przywoływanym na wielu stronach serwisie wideo YouTube, w którym przy każdym klipie podawane jest takie właśnie mieszane polecenie dla webmasterów czy posiadaczy blogów, którzy chcieliby włączyć klipy wideo do swoich stron.

Przykład zagnieżdżenia wideo w formacie Flash z YouTube (musisz być połączony z Internetem).

Z kolei GoogleVideo jest wprowadzane wyłącznie za pomocą polecenia object i przechodzi przez walidację HTML 4.01 Strict, gdy YouTube już nie.

Przykład zagnieżdżenia wideo w formacie Flash z GoogleVideo (musisz być połączony z Internetem).

Stosowanie embed wynika z chęci uzyskania zgodności z przeglądarkami obsługujący mechanizm pluginów Netscape'a (Firefox, Opera) i pozbycia się różnych kłopotów z wyświetlaniem, ale nie ulega wątpliwości, że w dobie współczesnych standardów, gdy coraz głośniej się mówi o konieczności respektowania oficjalnych norm w tym zakresie, będzie ono rugowane ze stron. Tym bardziej, że osoby chcące zwalidować swoje strony w oficjalnym walidatorze World Wide Web Consortium mogą to zrobić jedynie wtedy, gdy zrezygnują z nieoficjalnych poleceń.

Najprostsze rozwiązanie - odsyłacz

Najprościej i najbezpieczniej jest podać zwykły odsyłacz (<a href="plik">muzyczka</a>) do pliku multimedialnego, np. pliku dźwiękowego MP3 czy filmowego. Zależnie od ustawień przeglądarki użytkownik otworzy od razu domyślny odtwarzacz multimedialny lub zostanie mu zaproponowane zapisanie pliku na dysku. Jest to o tyle dobre rozwiązanie, że czytelnik strony nie musi wczytywać takiego pliku, jeśli sobie tego nie życzy.

Problem w tym, że wiele osób chce za wszelką cenę urozmaicić swoje strony multimediami i robi to nierzadko kosztem poprawności konstrukcji strony, a także, co oczywiste, zmuszając swoich czytelników do wczytywania sążnistych plików. Dla nich podanie samego odsyłacza zdaje się być plamą na honorze webmastera.

Starocie

Dla porządku trzeba przypomnieć, jak tworzone były odwołania do plików multimedialnych w "starym" stylu - było to połączenie poleceń object i embed, które pozwalało wyświetlać obiekt multimedialny zarówno w Internet Explorerze, jak i w przeglądarkach zgodnych z technologią zagnieżdżania Netscape (czyli Netscape, Mozilla i Opera), na przykład:

<object ID="MediaPlayer1" width=280 height=45
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
standby="Loading MicrosoftŽ WindowsŽ Media Player components..."
type="application/x-oleobject">
<param name="filename" value="plik_multimedialny">
<param name="animationatstart" value="true">
<param name="transparentatstart" value="true">
<param name="autostart" value="true">
<param name="showcontrols" value="true">
<param name="volume" value="0">
<embed type="application/x-mplayer2"
pluginspage =" http://www.microsoft.com/Windows/MediaPlayer/"
src="plik_multimedialny" name="MediaPlayer1" width=xx height=yy AutoStart=true>
</embed>
</object>

Sztuczki - bye, bye embed

Jeśli jednak koniecznie chcemy zagnieździć plik multimedialny na stronie, a chcemy to zrobić zgodnie ze standardami, czyli bez użycia embed, musimy posłużyć się sztuczkami. Przytaczam tutaj rozwiązania zaprezentowane w serwisie A List Apart:

Dla plików Flash: Drew McLellan, Flash Satay: Embedding Flash While Supporting Standards.

Dla plików multimedialnych z wymuszeniem interfejsu Windows Media Playera: Elizabeth Castro, Bye Bye Embed (E. Castro jest jedną z najpopularniejszych na świecie autorek książek webmasterskich - kilka tłumaczeń jej tytułów ukazało się także w Polsce, w Wydawnictwie Helion).

Macromedia Flash

Powszechnie stosowany kod:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="400" height="300" id="movie" align="">
<param name="movie" value="movie.swf">
<embed src="movie.swf" quality="high" width="400" height="300" name="movie" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>

Rozwiązanie McLellana (Flash):

Kod źródłowy:

<object type="application/x-shockwave-flash" data="film.swf" width="200" height="150">
<param name="movie" value="film.swf">
</object>

Przykład w działaniu:

Windows Media

Rozwiązanie Elizabeth Castro (WMV):

Kod źródłowy:

<object type="video/x-ms-wmv" data="kot.wmv" width="320" height="260">
<param name="src" value="kot.wmv">
<param name="autostart" value="false">
<param name="controller" value="true">
</object>

Przykład w działaniu (online):

Spróbowaliśmy wykorzystać tę metodę w przypadku kilku innych formatów multimedialnych, z częściowym sukcesem.

Przez analogię, można też utworzyć odwołanie do pliku Windows Media Audio.

<object type="video-/x-ms-wmv" data="898.wma" width="200" height="60">
<param name="src" value="898.wma">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>

Przykład w działaniu (online):

Działa też analogiczne odwołanie do pliku Wav.

<object type="video-/x-ms-wmv" data="swist.wav" width="200" height="60">
<param name="src" value="swist.wav">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>

Przykład w działaniu (online):

Działa również odwołanie do pliku Midi.

<object type="video-/x-ms-wmv" data="jazzball.mid" width="200" height="60">
<param name="src" value="jazzball.mid">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>

Przykład w działaniu (online):

Działa odwołanie do pliku ASF (Advanced Streaming Format).

<object type="video-/x-ms-wmv" data="pliczek.asf" width="200" height="60">
<param name="src" value="pliczek.asf">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>

Przykład w działaniu (online):

Niestety, uniwersalność tej metody zawodzi w przypadku plików MP3 i AVI - działają w Internet Explorerze i Firefoksie, natomiast nie działają w Operze. Można więc zaproponować w tej sytuacji zamieszczenie dwojakiego odwołania: zagnieżdżenia podaną metodą, dla użytkowników IE i FF, oraz utworzenia zwykłego odsyłacza do pliku dla posiadaczy Opery.

Zwróćmy jeszcze uwagę na jeden problem. W podanych wyżej przykładach Opera odtwarza pliki multimedialne online, natomiast nie chce ich odtwarzać offline, z lokalnego dysku.

Real Media

Pliki RealMedia, np. z rozszerzeniem .ra (Real Audio), można wstawiać za pomocą kodu:

<object type="audio/x-pn-realaudio-plugin" data="318.ra" width="200" height="60">
<param name="src" value="318.ra">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>

Przykład w działaniu (online):

Sposób ten działa w Internet Explorerze i Firefoksie, natomiast nie w Operze - tu można wstawić dodatkowy odsyłacz z plikiem .ra.

gość specjalny Helion.pl
 
  Dzisiaj stronę odwiedziło już 139314 odwiedzającytutaj!  
 
=> Chcesz darmową stronę ? Kliknij tutaj! <=