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="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ścieżka dostępu" alt=" Tekst alternatywny" width=" x"

height=" y" />

lub

<img src="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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

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):

<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

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óź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

Kurs HTML - HTML - Multimedia

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

Kurs HTML - HTML - Multimedia

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="https://zanotowane.pl/14/6372/ ś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

Kurs HTML - HTML - Multimedia

Strona 9

1. Automatyczny start odtwarzania:

<embed src="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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

Kurs HTML - HTML - Multimedia

Strona 10

<embed src="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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

Kurs HTML - HTML - Multimedia

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="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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

Kurs HTML - HTML - Multimedia

Strona 12

<bgsound src="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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="https://zanotowane.pl/14/6372/ ś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

Kurs HTML - HTML - Multimedia

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="https://zanotowane.pl/14/6372/..." />. 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="https://zanotowane.pl/14/6372/ ś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

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 <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

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

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