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):
<img src=" ścieŜka dostępu" alt=" 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:
<img src=" ścieŜka dostępu" alt=" Tekst alternatywny" width=" x"
height=" y" />
lub
<img src=" ścieŜka dostępu" alt=" Tekst alternatywny" width=" 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=" 300" height=" 150"
3. Z obramowaniem:
<img src=" ścieŜka dostępu" alt=" Tekst alternatywny" border=" 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:
<img src=" ścieŜka dostępu" alt=" Tekst alternatywny" align=" 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:
<img src=" ścieŜka dostępu" alt=" Tekst alternatywny" hspace=" 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 wyraź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 wyraź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
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):
<marquee> Tu wpisz tekst</marquee>
Wewnątrz znacznika <marquee>...</marquee> moŜna umieścić nie tylko tekst, ale równieŜ inne elementy (np.: grafikę).
2. Określonego typu:
<marquee behavior=" typ"> Tu wpisz tekst</marquee> 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
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óźniej się zatrzyma i pozostanie nieruchomy
3. O określonym kierunku przesuwania:
<marquee direction=" kierunek"> Tu wpisz tekst</marquee> 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):
<marquee bgcolor=" kolor"> Tu wpisz tekst</marquee> gdzie " kolor" oznacza definicję koloru [zobacz: Kolory].
5. O określonych rozmiarach na ekranie:
<marquee width=" x" height=" y"> Tu wpisz tekst</marquee> lub
<marquee width=" x%" height=" y%"> Tu wpisz tekst</marquee> 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):
<marquee hspace=" x" vspace=" y"> Tu wpisz tekst</marquee> 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ń:
<marquee loop=" n"> Tu wpisz tekst</marquee> gdzie " n" oznacza ilość powtórzeń.
8. O określonej szybkości przesuwania się tekstu:
<marquee scrollamount=" n"> Tu wpisz tekst</marquee> lub
http://www.kurshtml.boo.pl/html/multimedia.print.html
2008-02-07 18:48:18
Strona 7
<marquee scrolldelay=" ms"> Tu wpisz tekst</marquee> lub
<marquee truespeeed="truespeeed" scrolldelay=" 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. Łą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 górę do 60 (czyli wpisanie: 5, 30 czy 60 da taki sam efekt). Atrybut truespeed="truespeed" jest 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:
<script type="text/javascript">
// <![CDATA[
var przegladarka = navigator.userAgent;
var ie = (przegladarka.indexOf("MSIE") != -1 && przegladarka.indexOf(") ") == -1 ? true : false); var mozilla = (przegladarka.indexOf("Gecko") != -1 && przegladarka.indexOf("Netscape") == -1 ? true : false);
var netscape_ver = 0;
if (przegladarka.indexOf("Netscape") != -1)
{
netscape_ver = parseInt(przegladarka.substring(przegladarka.indexOf("Netscape")+8)); if (isNaN(netscape_ver)) netscape_ver = parseInt(przegladarka.substring(przegladarka.indexOf ("Netscape")+9));
}
var opera_ver = 0;
if (przegladarka.indexOf("Opera") != -1)
{
opera_ver = parseFloat(przegladarka.substring(przegladarka.indexOf("Opera")+5));
if (isNaN(opera_ver)) opera_ver = parseFloat(przegladarka.substring(przegladarka.indexOf
("Opera")+6));
}
if (ie || mozilla || netscape_ver >= 7 || opera_ver >= 7.2)
http://www.kurshtml.boo.pl/html/multimedia.print.html
2008-02-07 18:48:18
Strona 8
{
document.write('<marquee> To jest animacja MARQUEE, która będzie widoczna tylko w
przeglądarkach: Internet Explorer, Netscape 7+, Opera 7.2+ i Mozilla... <'+'/marquee>');
}
// ]]>
</script>
gdzie w miejsce wyróŜnionego tekstu wpisuje się normalny znacznik <marquee>...</marquee>. 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ę)!
<embed src=" ścieŜka dostępu do pliku" width=" x" height=" 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 <embed /> jest przydatne jeśli chcemy wstawić na stronę jeden z plików multimedialnych:
*.wav - plik dźwiękowy typu "wav"
*.mid - plik dźwiękowy typu "midi"
*.avi - plik typu "avi"
*.ra - plik Real Audio Player
*.mp3 - plik dź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 <embed />. 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
Strona 9
1. Automatyczny start odtwarzania:
<embed src=" ścieŜka dostępu do pliku" autostart=" 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:
<embed src=" ścieŜka dostępu do pliku" hidden=" typ" /> gdzie jako " typ" naleŜy podać:
"true" - obraz zostanie ukryty
"false" - obraz będzie wyświetlony na ekranie.
3. Ukrycie panelu kontrolnego:
<embed SRC=" ścieŜka dostępu do pliku" showcontrols=" 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:
<embed src=" ścieŜka dostępu do pliku" showdisplay=" typ" /> gdzie jako " typ" naleŜy podać:
"0" - pasek zostanie ukryty
"1" - pasek będzie wyświetlony na ekranie
5. Powtarzanie:
<embed src=" ścieŜka dostępu do pliku" loop=" 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 dźwiękowych):
<embed src=" ścieŜka dostępu do pliku" volume=" v" /> gdzie " v" oznacza poziom głośności (od "-10000" do "0").
7. Balans głośników (w przypadku stereofonicznego pliku dźwiękowego):
http://www.kurshtml.boo.pl/html/multimedia.print.html
2008-02-07 18:48:18
Strona 10
<embed src=" ścieŜka dostępu do pliku" balance=" b" /> gdzie " b" oznacza balans między głośnikami (od "-10000" do "+10000").
8. Adres do pobrania wtyczki (ang. plug-in):
<embed src=" ścieŜka dostępu do pliku" pluginspage=" 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, avi itp.)
.
Polecenie <embed /> 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 <embed /
>, wskazane jest umieszczenie na stronie znaczników:
<noembed> Treść alternatywna</noembed>
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:
<noembed>
Niestety Twoja przeglądarka nie odtwarza plików multimedialnych,
ale <a href=" ścieŜka dostępu do pliku">tutaj</a>
moŜesz zobaczyć ten plik!
</noembed>
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
Strona 11
Drugim sposobem umieszczenia na stronie pliku PDF jest uŜycie po prostu odsyłacza do pliku w postaci:
<a href=" dokument.pdf">...</a>
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!
<img dynsrc=" ścieŜka dostępu do pliku *.avi" alt=" 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ń:
<img dynsrc=" ścieŜka dostępu do pliku *.avi" alt=" Tekst alternatywny"
loop=" n" />
gdzie " n" oznacza ilość powtórzeń (dla loop="infinite" jest to nieskończoność).
2. Sposób rozpoczęcia odtwarzania:
<img dynsrc=" ścieŜka dostępu do pliku *.avi" alt=" 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 <embed />.
Tło dź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
Strona 12
<bgsound src=" ścieŜka dostępu do pliku dźwiękowego" />
Polecenie to pozwala na odtwarzanie dź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óź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ę dź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 dź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ń:
<bgsound src=" ścieŜka dostępu do pliku dźwiękowego" loop=" n" /> gdzie " n" oznacza ilość powtórzeń (dla loop="infinite"" jest to nieskończoność).
2. Poziom głośności:
<bgsound src=" ścieŜka dostępu do pliku dźwiękowego" volume=" v" /> gdzie " v" oznacza poziom głośności (od "-10000" do "0").
3. Balans głośników (w przypadku dźwięku stereofonicznego):
<bgsound src=" ścieŜka dostępu do pliku dźwiękowego" balance=" b" /> gdzie " b" oznacza balans między głośnikami (od "-10000" do "+10000").
Analogiczny efekt moŜna uzyskać stosując polecenie <embed /> 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 dź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
<bgsound /> 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 dźwięku uŜytkownik będzie juŜ mógł czytać stronę, bez konieczności bezczynnego oczekiwania na doładowanie obszernego pliku muzycznego.
Dź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 dźwiękowe na osobnej stronie, a następnie odwołać się do niej poprzez następujący odsyłacz:
<a target="muzyka" href=" ścieŜka do strony z muzyką">Włącz podkład muzyczny</a> http://www.kurshtml.boo.pl/html/multimedia.print.html
2008-02-07 18:48:18
Strona 13
Uniwersalny sposób odtwarzania plików
Polecenia multimedialne sprawiają wiele kłopotów. Na przykład: <embed /> 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 <embed /> 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: <bgsound /> i <img dynsrc="..." />. 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:
<object id="MediaPlayer1"
width=" szerokość" height=" wysokość"
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=" ścieŜka dostępu do pliku multimedialnego" />
<param name="animationatStart" value="true" />
<param name="transparentatStart" value="true" />
<param name="autoStart" value="false" />
<param name="showControls" value="true" />
<param name="Volume" value="0" />
<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
src=" ścieŜka dostępu do pliku multimedialnego"
name="MediaPlayer1"
width=" szerokość" height=" wysokość"
autostart="false">
<a href=" ścieŜka dostępu do pliku multimedialnego"> Otwórz plik</a>
</embed>
</object>
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: <param name="autoStart" value="false" /> i autostart="false" moŜna wpisać:
<param name="autoStart" value="true" /> i autostart="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
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 <object>...</object>).
Natomiast posiadacze przeglądarek Netscape/Mozilla/Firefox i Opera pod Windows będą mogli zobaczyć plik, dzięki wpisanemu dodatkowo poleceniu <embed>...</embed>.
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:
<a href=" ścieŜka dostępu do pliku"> opis</a> 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óź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
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
Sprawdź 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