Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Multimedia

Email Drukuj PDF

Tematy: Audio w HTML 5 | Wideo w HTML 5 | Kłopoty | Najprostsze rozwiązanie - odsyłacz | Starocie | Sztuczki - bye, bye embed | Macromedia Flash | Windows Media Video | Real Media


logo HTML 5O rozdziale (aktualizacja 14.01.2013): Pliki multimedialne niezmiennie od dawna przysparzają webmasterom wielu siwych włosów. W ciągu ostatnich 15 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.

Twórcy HTML 5 postanowili wreszcie zrobić porządek z mutimediami i uprościć ich wstawianie. Rozdział zaczniemy zatem od przedstawienia nowych technik HTML 5, ale w dalszej części pozostawimy częściowo zmieniony opis implementowania multimediów, który był stosowany za dominacji specyfikacji HTML 4 (kilka w miarę "pewnych" sposobów umieszczania multimediów, które nie są sprzeczne ze współczesnymi standardami). Nic przecież nie stoi na przeszkodzie, by z nich dalej korzystać, aczkolwiek z całą pewnością chętniej sięgniemy po nowe rozwiązania, jak tylko będą powszechnie akceptowane przez przeglądarki internetowe.

Audio w HTML 5

Audio jest umieszczane w HTML 5 za pomocą nowego znacznika <audio>. Przykładowy kod może mieć postać:

<audio src="/plik.mp3" controls></audio>

Obecnie akceptowane są formaty Ogg, MP3 i Wav (zobacz opis znacznika audio).

Dodatkowe atrybuty decydują o położeniu pliku (src), wyświetlaniu interfejsu (controls), powtarzaniu dźwięku (loop) czy automatycznym uruchamianiu po załadowaniu strony (autoplay). Jeśli chcemy zapewnić odtwarzanie pliku przez jak najwięcej przeglądarek, możemy umieścić na serwerze kilka różnych formatów i podać ich położenie za pomocą dodatkowego polecenia <source>.

<audio controls="controls">
<source src="/dzwiek.wav" type="audio/wav" />
<source src="/dzwiek.ogg" type="audio/ogg" />
<source src="/dzwiek.mp3" type="audio/mpeg" />
Twoja przeglądarka nie obsługuje znacznika audio.
</audio>

Przykład działania - plik Wav

<audio src="/swist.wav" controls></audio>


Informacje o AUDIO


Informacje o SOURCE


Wideo w HTML 5

Wideo jest umieszczane w HTML 5 za pomocą nowego znacznika <video>. Przykładowy kod może mieć postać:

<video src="/plik.ogg" controls width="360" height="200" controls></video>

Obecnie akceptowane są formaty MP4, Ogg, WebM (zobacz opis znacznika video).

Dodatkowe atrybuty decydują o położeniu pliku (src), wyświetlaniu interfejsu (controls), wielkości interfejsu (heigth i width), powtarzaniu dźwięku (loop), automatycznym uruchamianiu po załadowaniu strony (autoplay). Jeśli chcemy zapewnić odtwarzanie pliku przez jak najwięcej przeglądarek, możemy umieścić na serwerze kilka różnych formatów i podać ich położenie za pomocą dodatkowego polecenia <source>. Przykładowo:

<video controls width="360" height="200" >
<source src="/filmik.mp4" type="video/mp4">
<source src="/filmik.ogv" type="video/ogg">
<source src="/filmik.webm" type="video/webm">
Twoja przeglądarka nie obsługuje VIDEO.
</video>

 


Informacje o VIDEO


A teraz starsze informacje dotyczące HTML 4 i uzupełnienie informacji związanej z poleceniem embed.

Kłopoty

Przede wszystkim trzeba zauważyć, że najpopularniejsze ze stosowanych powszechnie poleceń zagnieżdżania plików multimedialnych, czyli embed, przed wprowadzeniem HTML 5 nie było nigdy elementem specyfikacji 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ń, przez co zrobiło się spore zamieszanie. Jednym słowem, do niedawna multimedia na stronach WWW były wprowadzane niejako na dziko.

Co więcej, tak się działo do niedawna, 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 istniało. 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.

Stosowanie embed wynikało przedtem 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 - choć spodziewano się, że polecenie embed bedzie ostatecznie wyrugowane z użycia, w HTML 5 zostało one jednak oficjalnie wprowadzone i precyzyjnie zdefiniowane. Polecamy tutaj przyjrzenie się opisowi znacznika <embed>, który służy teraz do osadzania rozmaitych elementów, przede wszystkim multimedialnych (np. Flash).

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 chcieliśmy zagnieździć plik multimedialny na stronie, a zarazem zrobić to zgodnie ze standardami sprzed HTML 5, czyli bez użycia embed, musieliśmy 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:

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:

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:

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:

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:

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:

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
 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15804614