Kurs HTML - HTML - Multimedia Strona 1
Multimedia
W tym rozdziale dowiesz siÄ™...
Jak wstawić obrazek (grafikę, zdjęcie) na stronę WWW?
W jaki sposób wstawić na stronę WWW przesuwający się tekst?
Jak osadzić na stronie WWW plik multimedialny: animację, film, muzykę (wav, mid, avi, ra, mp3, mpg,
mov, asf i inne)?
Jak mo\
na wstawić plik AVI (film, animacja) na stronę WWW?
Co zrobić, aby podczas oglądania strony grała muzyka?
Jak wstawić odtwarzacz multimedialny (filmy, muzyka) na stronę WWW? Jak wstawić na stronę pliki do
pobrania (dział download)?
Obrazek
1. Zwykły (domyślnie):

ście\
ka dostępu Tekst alternatywny
gdzie jako "ście\
ka dostępu" nale\
y podać lokalizację na dysku, gdzie znajduje się \
Ä…dany obrazek.
Natomiast w miejsce "Tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku,
kiedy obrazek nie zostanie wyświetlony (np. jeśli u\
ytkownik wyłączy wyświetlanie grafiki w swojej
przeglÄ…darce internetowej). Ponadto w MSIE mo\
e zostać wyświetlona po wskazaniu obrazka myszką.
Informacja alternatywna jest przydatna w przeglądarkach, które nie wyświetlają grafiki lub kiedy
u\
ytkownik wyłączył jej wyświetlanie albo dla osób niewidomych, które korzystają ze specjalnych
syntezatorów mowy.
UWAGA!
Bardzo wa\
ne: w nazwach plików lepiej nie u\
ywać:
wielkich liter
znaków, np.: \ / : * ? " < > |
_
spacji (jeśli musisz, w zamian u\
ywaj podkreślnika " ")
ą, ć, ę, ł, ń...
polskich liter ( itd.)
Jeśli nie zastosujesz się do tych zaleceń, mo\
e się okazać, \
e po wprowadzeniu strony do Internetu, pliki
takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!
Przykład:
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 2
2. O określonych rozmiarach:
ście\
ka dostępu Tekst alternatywny x
height=" " />
y
lub
ście\
ka dostępu Tekst alternatywny x%
height=" " />
y%
gdzie jako "x" oraz "y" nale\
y wpisać odpowiednio: długość i wysokość obrazka w pikselach.
Natomiast jako "x%" oraz "y%" nale\
y wpisać odpowiednio: długość i wysokość obrazka w procentach
ekranu.
Podawanie rozmiarów grafik mo\
e być przydatne przynajmniej z kilku powodów. Jeśli obrazek nie zostanie
wczytany, symbol który zajmie jego miejsce będzie miał inne wymiary i mo\
e tym samym popsuć uło\
enie
innych elementów strony. Poza tym jeśli nie wstawimy rozmiarów grafik na stronie, to podczas wczytywania
cała treść będzie się "rozje\
d\
ać". Je\
eli komuś to szczególnie przeszkadza, powinien zawsze określać te
atrybuty - to bardzo dobry nawyk. Oczywiście aby obraz nie był zniekształcony, nale\
y podać jego
prawdziwe rozmiary w pikselach a nie w procentach (mo\
na je sprawdzić w dowolnym programie
graficznym).
Przykład:
width=" " height=" "
300 150
3. Z obramowaniem:

ście\
ka dostępu Tekst alternatywny n
gdzie jako "n" nale\
y wpisać grubość obramowania (w pikselach).
Atrybut BORDER jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Przykład:
border=" "
10
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 3
4. O określonym ustawieniu względem tekstu:

ście\
ka dostępu Tekst alternatywny rodzaj
gdzie jako "rodzaj" nale\
y wpisać:
"left" - obrazek ustawiony po lewej stronie względem otaczającego go tekstu
"right" - obrazek po prawej stronie względem tekstu
"top" - tekst ustawiony na górze obrazka
"middle" - tekst ustawiony na średniej wysokości względem obrazka
"bottom" - tekst ustawiony na dole obrazka (domyślnie)
Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Przykład:
align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left"...
align="right", align="right", align="right", align="right", align="right", align="right",
align="right", align="right", align="right", align="right", align="right", align="right",
align="right", align="right", align="right", align="right", align="right", align="right",
align="right", align="right", align="right", align="right", align="right", align="right",
align="right", align="right", align="right", align="right", align="right", align="right", align="right",
align="right", align="right", align="right", align="right", align="right", align="right", align="right",
align="right", align="right", align="right", align="right", align="right", align="right", align="right",
align="right", align="right", align="right", align="right", align="right"...
align="top"
align="middle"
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 4
align="bottom"
5. O określonej odległości od tekstu:
ście\
ka dostępu Tekst alternatywny x
vspace=" " />
y
gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość (równie\
w pikselach).
Atrybuty HSPACE oraz VSPACE sÄ… zdeprecjonowane przez specyfikacjÄ™ HTML 4.01 - zaleca siÄ™
stosowanie stylów.
Przykład:
hspace="50"
vspace="50"
Edytory (X)HTML posiadają często specjalny generator, który wspomaga wstawianie multimediów na strony
WWW (nie tylko obrazków). Nale\
y jednak pamiętać, \
e multimedia bardzo wyraz
nie zwiększają objętość
strony, a co za tym idzie, wydłu\
ajÄ… czas wczytywania.
Większość bardziej zaawansowanych programów graficznych udostępnia funkcję kompresji obrazów, co pozwala
zmniejszyć ich objętość bez wyraz
nego spadku jakości. Czasami zysk z u\
ycia takiej kompresji jest dość znaczny,
dlatego warto się tym zainteresować.
Przed wstawieniem obrazka radzę zastanowić się, czy jest on absolutnie konieczny. Je\
eli chcesz umieścić na
swojej stronie grafikę o znacznych rozmiarach, zawsze staraj się wcześniej pokazać miniaturkę, aby u\
ytkownik
mógł ocenić, czy chce czekać na załadowanie pełnowymiarowego obrazu (mo\
na to zrobić np. za pomocą
galerii zdjęć).
Wszystkie obrazki najlepiej powinny być zapisane w jednym z trzech formatów:
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 5
GIF - dla rysunków składających się z mniej ni\
256 kolorów, np. przyciski menu i inne "ręcznie" rysowane
ozdobniki. Format ten obsługuje przezroczystość.
JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości.
PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje
kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość. Niestety zwłaszcza ta ostatnia
własność mo\
e nie być interpretowana przez starsze przeglądarki (np. MSIE 6.0).
Format BMP nie jest skompresowany, dlatego nale\
y unikać jego stosowania! Nieodpowiedni dobór formatu
graficznego mo\
e być przyczyną nawet kilkukrotnego zwiększenia rozmiaru pliku albo znacznego pogorszenia
jakości obrazu. Dlatego jeśli nie wiesz który wybrać, przetestuj wszystkie.
Je\
eli chcesz wstawić obrazek, który nie jest prostokątem, mo\
na w tym celu u\
yć formatu GIF (lub PNG).
Obszary, które mają być niewidoczne, nale\
y narysować innym kolorem, a następnie w programie graficznym
ustawić ten kolor jako przezroczysty (transparent). Uwaga: format JPG (oraz BMP) nie obsługuje
przezroczystości! Podobny efekt mo\
na co prawda uzyskać, rysując "niewidoczne" części kolorem tła strony
WWW. Jednak jeśli zmienimy kolor tła na stronie, będzie trzeba zmienić równie\
wszystkie takie obrazki.
Natomiast je\
eli ustalimy przezroczystość na obrazku, zawsze będzie ona niewidoczna.
Przy przeglądaniu większej ilości du\
ych obrazków, pomocne mogą okazać się galeria lub przeglądarka zdjęć.
Animowany banner
Animowany banner mo\
na stworzyć przy u\
yciu takich programów jak np. Animation Shop czy Ulead
GIFAnimator i inne. Jest to po prostu specjalny plik GIF, który wstawiamy na stronę, tak jak zwykły obrazek. Mo\
e
on mieć przykładowo rozmiary 400x50. Pamiętaj, \
e im więcej klatek animacji, tym większe rozmiary pliku i
dłu\
sze wczytywanie strony!
Animacja MARQUEE
(tylko Microsoft Internet Explorer, Opera 7.20 i Netscape 7/Mozilla/Firefox!)
UWAGA!
Polecenie MARQUEE nie wchodzi w skład specyfikacji HTML 4.01 i jest rozszerzeniem przeglądarki Internet
Explorer!
1. Podstawowa (domyślnie):

Tu wpisz tekst
WewnÄ…trz znacznika ...
mo\
na umieścić nie tylko tekst, ale równie\
inne
elementy (np.: grafikÄ™).
2. Określonego typu:

typ Tu wpisz tekst
gdzie jako "typ" nale\
y wpisać:
"scroll" - tekst przesuwa się od prawej do lewej (domyślnie)
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 6
"alternate" - tekst przesuwa się od prawej do lewej, a następnie "odbija się" i powraca
"slide" - tekst przesunie się od prawej do lewej tylko raz, a póz
niej siÄ™ zatrzyma i pozostanie
nieruchomy
3. O określonym kierunku przesuwania:

kierunek Tu wpisz tekst
gdzie jako "kierunek" nale\
y wpisać:
"left" - tekst będzie przesuwał się w lewo (domyślnie)
"right" - tekst będzie przesuwał się w prawo
"up" - przesuwanie w górę (nie obsługuje MSIE 3.01 ani Netscape 7)
"down" - przesuwanie w dół (nie obsługuje MSIE 3.01 ani Netscape 7)
4. O określonym kolorze tła (nie obsługuje Netscape 7):

kolor Tu wpisz tekst
gdzie "kolor" oznacza definicjÄ™ koloru [zobacz: Kolory].
5. O określonych rozmiarach na ekranie:

x y Tu wpisz tekst
lub

x% y% Tu wpisz tekst
gdzie "x" oznacza szerokość w pikselach, a "y" wysokość (równie\
w pikselach).
Natomiast "x%" oznacza szerokość w procentach ekranu, a "y" wysokość (równie\
w procentach).
6. O określonej odległości od tekstu (nie obsługuje Netscape 7):

x y Tu wpisz tekst
gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość (równie\
w pikselach).
7. O określonej ilości powtórzeń:

n Tu wpisz tekst
gdzie "n" oznacza ilość powtórzeń.
8. O określonej szybkości przesuwania się tekstu:

n Tu wpisz tekst
lub
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 7

ms Tu wpisz tekst
lub
ms Tu wpisz tekst
marquee>
gdzie jako "n" nale\
y podać szybkość przesuwania w pikselach.
Natomiast jako "ms" nale\
y podać szybkość przesuwania w milisekundach (1 milisekunda = 0.001 sekundy,
1000 milisekund = 1 sekunda).
Atrybut scrollamount="..."
określa, o ile pikseli ma "przeskoczyć" tekst podczas jednego kroku
animacji, natomiast scrolldelay="..."
pozwala ustalić odstęp czasu pomiędzy tymi skokami. A
Ä…czÄ…c
oba parametry, mamy mo\
liwość pełnej kontroli płynności ruchu (scrollamount) oraz jego szybkości
(scrolldelay). Mniejsze wartości scrollamount="..."
, to mniej szarpany ruch, natomiast ni\
sze
scrolldelay="..."
, to szybsza animacja.
W ostatnim przypadku podanie atrybutu logicznego truespeed="truespeed"
(nie obsługuje
MSIE 3.01) spowoduje, \
e wartość scrolldelay="..."
będzie ściśle określała prędkość przesuwania.
Bez tego atrybutu wszystkie wartości mniejsze lub równe 59 (milisekund), są automatycznie zaokrąglane w
5 30 60 jest
górę do 60 (czyli wpisanie: , czy da taki sam efekt). Atrybut truespeed="truespeed"
zatem przydatny dla SCROLLDELAY < 60. Jeśli chcemy określić SCROLLDELAY > 59, podawanie
atrybutu truespeed="truespeed"
nie ma sensu (chocia\
oczywiście mo\
na to zrobić).
Bezpieczna animacja MARQUEE
Jeśli przeglądarka nie obsługuje animacji MARQUEE, tekst który do niej wpiszemy, prawdopodobnie zostanie
normalnie wyświetlony na ekranie. Mo\
e to zburzyć całą estetykę strony. Mo\
na jednak sprawić, by treść
MARQUEE nie została w ogóle wyświetlona, je\
eli u\
ytkownik dysponujÄ™ innÄ… przeglÄ…darkÄ… ni\
Microsoft
Internet Explorer:

gdzie w miejsce wyró\
nionego tekstu wpisuje siÄ™ normalny znacznik ...
. Nale\
y
'
jednak pamiętać, aby nie u\
ywać w nim apostrofów ( ) ani nie przełamywać wiersza klawiszem Enter (wszystko
musi być napisane w jednej linijce - tak jak pokazano).
Osadzenie pliku
UWAGA!
Polecenie EMBED nie wchodzi w skład specyfikacji HTML 4.01 (jest obsługiwane przez Microsoft Internet
Explorera, Netscape/MozillÄ™/Firefoksa i OperÄ™)!

ście\
ka dostępu do pliku x y
gdzie jako "ście\
ka dostępu do pliku" nale\
y podać lokalizację na dysku, gdzie znajduje się \
Ä…dany plik
multimedialny.
Natomiast "x" oznacza szerokość w pikselach, a "y" wysokość wyświetlanego obrazu wtyczki (ang. plug-in), czyli
okna na stronie w którym odtwarzany będzie plik. Jeśli nie podamy rozmiarów obrazu wtyczki, mo\
e on przyjąć
wielkość, która nie pasuje do wymiarów pliku! Rozmiary zale\
ą równie\
od posiadanej przez u\
ytkownika wtyczki.
Polecenie
jest przydatne jeśli chcemy wstawić na stronę jeden z plików multimedialnych:
*.wav- plik dz
więkowy typu "wav"
*.mid- plik dz
więkowy typu "midi"
*.avi- plik typu "avi"
*.ra- plik Real Audio Player
*.mp3- plik dz
więkowy typu "mp3" (MPEG Layer-3)
*.mpeg- plik typu "mpeg"
*.mov- plik typu "mov"
*.asf- plik typu "asf"
i inne
Polecenie to współpracuje z ró\
nymi wtyczkami (atrybut pluginspage="..."
), dzięki którym teoretycznie
mo\
e odtwarzać nowe formaty plików multimedialnych. Wtyczka (czyli plug-in) to specjalny niewielki program,
który mo\
na doinstalować do przeglądarki, zwiększając jej mo\
liwości. Po wywołaniu polecenia, wprost na stronie
powinno zostać wyświetlone okno (o podanych rozmiarach), w którym będzie odtwarzany wskazany plik.
Nale\
y pamiętać, \
e pliki multimedialne majÄ… zwykle du\
e rozmiary, dlatego najlepiej na poczÄ…tku strony
umieścić tekst, a dopiero na końcu polecenie
. W takim przypadku w pierwszej kolejności wczyta
siÄ™ tekst.
W przypadku niektórych plików mo\
na dodatkowo u\
yć atrybutów:
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 9
1. Automatyczny start odtwarzania:

ście\
ka dostępu do pliku typ
gdzie jako "typ" nale\
y podać:
"true" - plik zostanie automatycznie odtworzony, zaraz po wczytaniu strony
"false" - plik nie zostanie odtworzony po wczytaniu (trzeba go uruchomić "ręcznie" - poprzez
wyświetlony panel kontrolny)
2. Ukrycie obrazu:

ście\
ka dostępu do pliku typ
gdzie jako "typ" nale\
y podać:
"true" - obraz zostanie ukryty
"false" - obraz będzie wyświetlony na ekranie.
3. Ukrycie panelu kontrolnego:

ście\
ka dostępu do pliku typ
gdzie jako "typ" nale\
y podać:
"0" - panel zostanie ukryty
"1" - panel będzie wyświetlony na ekranie
4. Ukrycie paska wyświetlania informacji:

ście\
ka dostępu do pliku typ
gdzie jako "typ" nale\
y podać:
"0" - pasek zostanie ukryty
"1" - pasek będzie wyświetlony na ekranie
5. Powtarzanie:

ście\
ka dostępu do pliku typ
gdzie jako "typ" nale\
y podać:
"true" - powtarzanie w nieskończoność
lub "false" - brak powtarzania
6. Poziom głośności (w przypadku plików dz
więkowych):

ście\
ka dostępu do pliku v
gdzie "v" oznacza poziom głośności (od "-10000" do "0").
7. Balans głośników (w przypadku stereofonicznego pliku dz
więkowego):
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 10

ście\
ka dostępu do pliku b
gdzie "b" oznacza balans między głośnikami (od "-10000" do "+10000").
8. Adres do pobrania wtyczki (ang. plug-in):

ście\
ka dostępu do pliku adres wtyczki
gdzie jako "adres wtyczki" nale\
y podać adres internetowy, gdzie znajduje się wtyczka, pozwalająca
odtworzyć wybrany rodzaj pliku, dzięki czemu u\
ytkownik będzie ją mógł zainstalować, np.:
"http://www.apple.com/quicktime/download/" - wtyczka*.mov(QuickTime)
"http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_
Version=ShockwaveFlash" - wtyczka*.swf(Macromedia Flash)
"http://www.microsoft.com/Windows/MediaPlayer/" - wtyczka Windows Media
Player Plug-In for Netscape - dla posiadaczy Netscape (*.wav,mid,mp3,asf,wma,wmv,aviitp.)
.
Polecenie
sprawia wiele kłopotów nawet w przeglądarkach, które je interpretują! Ponadto nale\
y
pamiętać, \
e pliki multimedialne majÄ… zwykle bardzo du\
e rozmiary, a więc wczytywanie takiej strony w
Internecie, mo\
e trwać potwornie długo!
Aby umo\
liwić dotarcie do plików multimedialnych w przeglądarkach, które nie obsługują polecenia >
, wskazane jest umieszczenie na stronie znaczników:

Treść alternatywna
Wewnątrz nich wpisuje się treść, która powinna pojawić się, jeśli polecenie EMBED nie mo\
e zostać
zinterpretowane. Mo\
na tam umieścić np. odsyłacz do pliku:
<br>Niestety Twoja przeglądarka nie odtwarza plików multimedialnych,<br>ale <a href=" ">tutaj</a><br>ście\
ka dostępu do pliku<br>mo\
esz zobaczyć ten plik!<br>
Mo\
liwe jest równie\
bezpośrednie osadzenie na stronie dokumentu PDF. Jest to format, który stał się
powszechnym standardem publikacji elektronicznych. Umo\
liwia m.in. ró\
norodne formatowanie tekstu,
wstawianie grafiki i inne. Dokumenty PDF mo\
na stworzyć np. przy u\
yciu programu wbudowanego w pakiet
biurowy WordPerfect Office 2000, natomiast aby przeglądać pliki PDF, trzeba dysponować darmowym programem
Acrobat Reader.
Aby mo\
na było osadzić na stronie WWW plik PDF, u\
ytkownik oglądający nasz serwis musi mieć
zainstalowany program Acrobat Reader.
Dodatkowo nale\
y pamiętać o podaniu rozmiarów obiektu EMBED (atrybuty width="..."
oraz
height="..."
), poniewa\
jeśli tego nie zrobimy, w MSIE otrzymamy zbyt małe okienko (uniemo\
liwiajÄ…ce
czytanie), natomiast w Netscape Navigatorze trzeba będzie kliknąć prawym przyciskiem myszki i wybrać polecenie
"Open".
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 11
Drugim sposobem umieszczenia na stronie pliku PDF jest u\
ycie po prostu odsyłacza do pliku w postaci:
...
dokument.pdf
W takim przypadku dokument zostanie wczytany bezpośrednio w oknie przeglądarki (MSIE 4, NC 4.5)
Plik AVI
(tylko Internet Explorer!)
UWAGA!
Polecenie IMG DYNSRC="..." nie wchodzi w skład specyfikacji HTML 4.01 i jest wyłącznie rozszerzeniem
przeglÄ…darki Internet Explorer!

ście\
ka dostępu do pliku *.avi Tekst alternatywny
Polecenie to odtwarza pliki typu *.avi
(animacja, film) wprost na stronie, bez wyświetlania panelu kontrolnego.
Mo\
liwe sÄ… przy tym dodatkowe atrybuty:
1. Ilość powtórzeń:
ście\
ka dostępu do pliku *.avi Tekst alternatywny
loop=" " />
n
gdzie "n" oznacza ilość powtórzeń (dlaloop="infinite"jest to nieskończoność).
2. Sposób rozpoczęcia odtwarzania:
ście\
ka dostępu do pliku *.avi Tekst alternatywny
start=" " />
sposób
gdzie jako "sposób" nale\
y wpisać:
"fileopen" - plik będzie odtwarzany po wczytaniu strony
"mouseover" - plik będzie odtwarzany po wskazaniu myszką
Polecenie IMG DYNSRC="..." sprawia kłopoty nawet w Microsoft Internet Explorerze! Ponadto nie jest
interpretowane przez inne przeglÄ…darki, dlatego zaleca siÄ™ raczej stosowanie .
TÅ‚o dz
więkowe
(tylko Internet Explorer i Opera 6!)
UWAGA!
Polecenie BGSOUND nie wchodzi w skład specyfikacji HTML 4.01 i jest wyłącznie rozszerzeniem
przeglÄ…darki Internet Explorer!
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 12

ście\
ka dostępu do pliku dz
więkowego
Polecenie to pozwala na odtwarzanie dz
więku w tle - jako podkład muzyczny. Nie jest przy tym wyświetlany \
aden
panel kontrolny.
Pamiętaj, \
e wiele osób korzysta z Internetu póz
nym wieczorem i w nocy. Włączenie głośnej muzyki bez ich zgody
mo\
e nie być mile widziane (szczególnie przez sąsiadów :-) Wielu internautów podczas surfowania słucha równie\

własnej muzyki - wtedy wystąpi raczej mało ciekawy efekt nakładania się dz
więków. W takim momencie
u\
ytkownicy często opuszczają stronę, poniewa\
w inny sposób nie potrafią wyłączyć odtwarzanej muzyki! Zatem
zanim umieścisz we własnym serwisie tło dz
więkowe, zastanów się dwa razy. Jeśli ju\
musisz to zrobić, daj
u\
ytkownikowi chocia\
mo\
liwość wyboru czy chce go słuchać, np. poprzez umieszczenie odsyłacza do strony z
muzykÄ… otwieranÄ… w nowym oknie.
Dla tego znacznika mo\
liwe sÄ… dodatkowe atrybuty:
1. Ilość powtórzeń:

ście\
ka dostępu do pliku dz
więkowego n
gdzie "n" oznacza ilość powtórzeń (dlaloop="infinite"" jest to nieskończoność).
2. Poziom głośności:

ście\
ka dostępu do pliku dz
więkowego v
gdzie "v" oznacza poziom głośności (od "-10000" do "0").
3. Balans głośników (w przypadku dz
więku stereofonicznego):

ście\
ka dostępu do pliku dz
więkowego b
gdzie "b" oznacza balans między głośnikami (od "-10000" do "+10000").
Analogiczny efekt mo\
na uzyskać stosując polecenie wraz z atrybutem hidden="true"
, które jest
interpretowane równie\
przez przeglÄ…darkÄ™ Netscape (dlatego zaleca siÄ™ raczej stosowanie EMBED).
Ponadto nale\
y pamiętać, \
e pliki dz
więkowe mają zwykle bardzo du\
e rozmiary (przeciętne MP3 to ok. 4 MB), a
więc wczytywanie takiej strony w Internecie, mo\
e trwać potwornie długo! Zamiast *.mp3
raczej lepiej jest
wykorzystać inny format muzyczny, np. *.mid
. I ostatnia rada: chocia\
sam Microsoft zaleca(Å‚) wstawianie

w nagłówku dokumentu, lepiej jest to zrobić na samym końcu strony. W takim przypadku
najpierw wczyta się właściwa treść, a dopiero potem muzyka. Podczas wczytywania dz
więku u\
ytkownik będzie
ju\
mógł czytać stronę, bez konieczności bezczynnego oczekiwania na doładowanie obszernego pliku muzycznego.
Dz
więk w tle ucichnie, je\
eli przejdziemy na inną stronę. Aby stworzyć prawdziwy podkład muzyczny, który jest
odgrywany przez cały czas, podczas przechodzenia pomiędzy stronami serwisu, powinniśmy umieścić tło
dz
więkowe na osobnej stronie, a następnie odwołać się do niej poprzez następujący odsyłacz:
Włącz podkład muzyczny
target="muzyka" ście\
ka do strony z muzykÄ…
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 13
Uniwersalny sposób odtwarzania plików
Polecenia multimedialne sprawiają wiele kłopotów. Na przykład: ma tą zaletę, \
e skojarzony z nim plik,
będzie odtwarzany bezpośrednio na stronie. Niestety jest to równie\
jego wadÄ…. Pliki multimedialne majÄ… zwykle
du\
e rozmiary, dlatego wczytywanie takiej strony mo\
e trwać potwornie długo. Poza tym polecenie
nie zawsze działa poprawnie, szczególnie jeśli chodzi o jego atrybuty dodatkowe. Ponadto niektóre formaty plików
przestały być odtwarzane w Internet Explorerze 5.5 i 6.0.
Jeszcze gorzej jest z pozostałymi dwoma poleceniami: i . Nie dość, \
e nie zawsze
działają poprawnie, to jeszcze mo\
na je wykorzystywać tylko w Microsoft Internet Explorerze. Jeśli ktoś posiada
inną przeglądarkę internetową, prawdopodobnie nie będzie mógł zobaczyć/usłyszeć efektów ich działania. Dlatego
nie sÄ… one zalecane.
Zagnie\
d\
anie plików multimedialnych
Jeśli koniecznie zale\
y nam na tym, aby plik multimedialny był odtwarzany wprost na stronie, a jednocześnie
chcemy, aby był on widoczny w ró\
nych przeglÄ…darkach, mo\
emy u\
yć zagnie\
d\
ania plików multimedialnych:

gdzie zmodyfikować nale\
y wyró\
nione linijki, a kolejne wpisy w nich oznaczajÄ…:
ście\
ka dostępu do pliku multimedialnego
lokalizacja na dysku, gdzie znajduje siÄ™ \
Ä…dany plik multimedialny
szerokość" i "wysokość
rozmiar wyświetlanego obrazu wtyczki (w pikselach), czyli okna na stronie w którym odtwarzany będzie plik
Zamiast:iautostart="false"mo\
na wpisać:
iautostart="true"co spowoduje automatyczne
odtworzenie pliku, zaraz po wczytaniu strony.
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 14
Jeśli posiadasz przeglądarkę Microsoft Internet Explorer pod Windows, powy\
sze polecenia spowodujÄ…
automatyczne otwarcie na stronie programu Windows Media Player (polecenie
).
Natomiast posiadacze przeglądarek Netscape/Mozilla/Firefox i Opera pod Windows będą mogli zobaczyć plik,
dzięki wpisanemu dodatkowo poleceniu ...
.
Aby Netscape i Opera mogły odtworzyć plik, musi być w nich zainstalowana wtyczka: Windows Media Player
Plug-In for Netscape (ok. 290 KB). W przeciwnym wypadku, na ekranie pojawi się odnośnik do miejsca, gdzie
mo\
na ją pobrać.
Wtyczka Windows Media Player Plug-In for Netscape obsługuje m.in. pliki formatu: WAV, MID, MP3, ASF,
WMA, WMV, AVI.
UWAGA!
Powy\
szy kod zwykle nie zadziała w oczekiwany sposób lub wcale nie zadziała w systemach operacyjnych
innych ni\
Windows! Jednak\
e i w tych systemach często istnieją wtyczki, pozwalające np. automatycznie
otworzyć plik multimedialny w domyślnym odtwarzaczu systemowym, z tym \
e mo\
e się to odbywać w osobnym
oknie aplikacji odtwarzacza, a nie wprost na stronie.
Odsyłacz do pliku
Najbardziej uniwersalną metodą odtwarzania plików multimedialnych, która działa w ka\
dej przeglÄ…darce
internetowej i z ka\
dym formatem plików, jest odsyłacz do pliku:

ście\
ka dostępu do pliku opis
Je\
eli rozdział o odsyłaczach masz ju\
za sobÄ…, to zapewne wiesz, \
e powy\
sze polecenie jest właśnie odsyłaczem -
odsyłaczem do pliku. Po uruchomieniu takiego odnośnika (np. w Microsoft Internet Explorerze), na ekranie mo\
e
się pojawić okno z zapytaniem: "Czy chcesz otworzyć ten plik, czy zapisać go na komputerze?" Jeśli wybierzesz
opcję Zapisz, będziesz mógł skopiować wskazany plik na swój dysk twardy. Natomiast je\
eli wybierzesz Otwórz,
uka\
e siÄ™ nowe okno, gdzie nale\
y wskazać program który będzie u\
yty do otwarcia pliku. Po uczynieniu tego i
kliknięciu "OK", nastąpi otwarcie wybranego programu i odtworzenie w nim pliku (oczywiście jeśli dany program
obsługuje taki typ plików). Je\
eli w Twoim systemie operacyjnym z wybranym typem pliku jest skojarzony jakiÅ›
program, zostanie on automatycznie otwarty, bez zapytania o jego nazwÄ™ (co znacznie przyspiesza procedurÄ™).
Poza tym istnieją pewne typy plików, które mogą zostać wyświetlone bezpośrednio w oknie przeglądarki, po
kliknięciu odnośnika. Jeśli u\
ytkownik będzie miał zainstalowany we własnym systemie operacyjnym odpowiedni
program, który potrafi otworzyć wybrany plik, zostanie on uruchomiony w tle (np. dla plików PDF nale\
y posiadać
Acrobat Reader; dla DOC, XLS - Microsoft Office). Niestety działanie mo\
e się ró\
nić w zale\
ności od
przeglÄ…darki.
Przedstawiony tutaj odsyłacz do pliku, nie posiada wad, związanych z innymi poleceniami multimedialnymi.
Poniewa\
plik nie jest umieszczony bezpośrednio na stronie, dlatego nie powoduje on opóz
nienia we wczytywaniu.
Ponadto działa z wszystkimi rodzajami plików. Dodatkowo u\
ytkownik mo\
e zapisać plik na dysku, a potem
odtwarzać go dowolną ilość razy, nie czekając ponownie na jego wczytanie z Internetu. Niestety sposób taki
posiada równie\
wady. Pierwsza jest taka, \
e plik nie będzie otwarty na stronie lecz w osobnym programie, co
mo\
e wydawać się mało "eleganckim" rozwiązaniem. Druga - to konieczność posiadania przez u\
ytkownika
odpowiedniego programu, który potrafi odtworzyć wybrany typ plików.
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18
Kurs HTML - HTML - Multimedia Strona 15
Przy okazji zwracam uwagÄ™, \
e przy odsyłaczach do plików mających większą objętość (np. większą ni\
100 KB)
, dobrze jest podać ich rozmiar. W ten sposób u\
ytkownik będzie mógł zdecydować, czy chce uruchomić taki
odnośnik.
Którego polecenia u\
ywać do odtwarzania plików multimedialnych? Na pewno w ka\
dym przypadku wskazane jest
sprawdzenie wyniku w ró\
nych przeglÄ…darkach (przynajmniej Microsoft Internet Explorer oraz Netscape, Mozilla
lub Firefox, a tak\
e Opera). Rozwa\
wszystkie "za" i "przeciw" - wybór nale\
y do Ciebie...
Quiz
Sprawdz
swojÄ… wiedzÄ™, nabytÄ… w tym rozdziale, rozwiÄ…zujÄ…c testowy QUIZ.
http://www.kurshtml.boo.pl/html/multimedia.print.html 2008-02-07 18:48:18