Multimedia





W tym rozdziale dowiesz się:

OBRAZEK

  1. Zwykły (domyślnie):
    <IMG SRC="ścieżka dostępu">

    gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek.

    UWAGA! Bardzo ważne: w nazwach plików lepiej nie używać:
    • wielkich liter
    • znaków specjalnych (np.: \ / : * ? " < > | )
    • spacji (jeśli musisz, w zamian używaj podkreślnika "_")
    • polskich liter

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




  2. O określonych rozmiarach:
    <IMG SRC="ścieżka dostępu" WIDTH="x" HEIGHT="y">
    lub
    <IMG SRC="ścieżka dostępu" 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" BORDER="x">

    gdzie jako "x" należy wpisać grubość obramowania (w pikselach).

    Atrybut BORDER jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

    Przykład:

    BORDER="30"



  4. O określonym ustawieniu względem tekstu:
    <IMG SRC="ścieżka dostępu" 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
    • lub "bottom" - tekst ustawiony na dole obrazka (domyślnie)

    Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.




  5. O określonej odległości od tekstu:
    <IMG SRC="ścieżka dostępu" 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"




  6. Z informacją alternatywną
    (która powinna pojawić się w przypadku, gdy obrazek nie zostanie wyświetlony, a także może zostać wyświetlona po wskazaniu obrazka myszką):
    <IMG SRC="ścieżka dostępu" ALT="Tu wpisz informację">

    Informacja alternatywna jest przydatna w przeglądarkach, które nie wyświetlają grafiki lub kiedy użytkownik wyłączył jej wyświetlanie.







Edytory 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 grafik).

Wszystkie obrazki powinny być zapisane w jednym z dwóch formatów:

Format BMP nie jest skompresowany, dlatego należy unikać jego stosowania! Nieodpowiedni dobór formatu graficznego może być przyczyną nawet kilkakrotnego zwiększenia rozmiaru pliku albo znacznego pogorszenia jakości obrazu. Dlatego jeśli nie wiesz który wybrać, przetestuj oba.

Jeżeli chcesz wstawić obrazek, który nie jest prostokątem, można w tym celu użyć formatu GIF. 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 lubprzeglądarkagrafik.



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 Internet Explorer, Opera 7.20 i Netscape 7!)

UWAGA!
Polecenie MARQUEE nie wchodzi w skład specyfikacji HTML 4.01 i jest wyłącznie rozszerzeniem przeglądarki Internet Explorer!


  1. Podstawowa (domyślnie):
    <MARQUEE>Tu wpisz tekst</MARQUEE>

    Przykład:

    Tekst animacji



    Wewnątrz znacznika <MARQUEE>...</MARQUEE> można umieścić nie tylko tekst, ale również inne elementy.

    To jest MARQUEE z obrazkiem... To jest MARQUEE z obrazkiem...



  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),
    • "alternate" - tekst przesuwa się od prawej do lewej, a następnie "odbija się" i powraca
    • lub "slide" - tekst przesunie się od prawej do lewej tylko raz, a póĽniej się zatrzyma i pozostanie nieruchomy.

    Przykład:

    BEHAVIOR="scroll" (domyślnie) BEHAVIOR="alternate" BEHAVIOR="slide". Ten tekst przesunie się tylko raz, a póĽniej się zatrzyma. Jeśli chcesz zobaczyć jego ruch, musisz odświeżyć ekran (opcja "Odśwież"). BEHAVIOR="slide".



  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 IE3.01 ani Netscape 7)
    • lub "down" - przesuwanie w dół (nie obsługuje IE3.01 ani Netscape 7)

    Przykład:

    DIRECTION="left" (domyślnie) DIRECTION="right"
    DIRECTION="up"
    DIRECTION="down"



  4. O określonym kolorze tła (nie obsługuje Netscape 7):
    <MARQUEE BGCOLOR="kolor">Tu wpisz tekst</MARQUEE>

    gdzie "kolor" oznacza definicję koloru .

    Przykład:

    BGCOLOR="aqua"



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

    Przykład:

    WIDTH="50%" HEIGHT="100"



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

    Przykład:

    HSPACE="50" HSPACE="50"

    VSPACE="50" VSPACE="50"



  7. O określonej ilości powtórzeń:
    <MARQUEE LOOP="k">Tu wpisz tekst</MARQUEE>

    gdzie "k" oznacza ilość powtórzeń.

    Przykład:

    LOOP="10"
    Ta animacja zostanie powtórzona tylko 10 razy, a póĽniej się zatrzyma. Jeśli chcesz zobaczyć jej ruch, musisz odświeżyć ekran (opcja "Odśwież"). LOOP="10"



  8. O określonej szybkości przesuwania się tekstu:
    <MARQUEE SCROLLAMOUNT="x">Tu wpisz tekst</MARQUEE>
    lub
    <MARQUEE SCROLLDELAY="ms">Tu wpisz tekst</MARQUEE>
    lub
    <MARQUEE TRUESPEEED SCROLLDELAY="ms">Tu wpisz tekst</MARQUEE>

    gdzie jako "x" należy podać szybkość przesuwania w pikselach.
    Natomiast jako "ms" należy podać szybkość przesuwania w milisekundach (1 milisekunda = 0.001 sekundy).

    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 (nie obsługuje IE3.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 jest zatem przydatny dla SCROLLDELAY < 60. Jeśli chcemy określić SCROLLDELAY > 59, podawanie parametru TRUESPEED nie ma sensu (chociaż oczywiście można to zrobić).

    Przykład:

    SCROLLAMOUNT="20"

    SCROLLDELAY="250" (czyli ćwierć sekundy)


    Można łączyć powyższe parametry:

    Ruch skokowy (SCROLLAMOUNT="100") z podaną szybkością (SCROLLDELAY="1000")

    Ruch płynny (SCROLLAMOUNT="1") z podaną szybkością (TRUESPEED SCROLLDELAY="30")




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 dysponuje przeglądarką, która tego nie obsługuje:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
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)
{
  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 Internet Explorer i Netscape)!


<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ść, a "y" wysokość wyświetlanego obrazu wtyczki (w pikselach), 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:

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:
  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
    • lub "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
    • lub "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
    • lub "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
    • lub "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):
    <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 wtyczki (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/index.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).


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 polecenia 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 IE otrzymamy zbyt małe okienko (uniemożliwiające czytanie), natomiast w Netscape Navigatorze trzeba będzie kliknąć prawym przyciskiem myszki i wybrać polecenie "Open".

Przykład:

Aby zobaczyć różne sposoby osadzania plików bezpośrednio na stronie, kliknij tutaj.



Drugim sposobem umieszczenia na stronie pliku PDF jest użycie odsyłacza do pliku w postaci:

<A HREF="plik.pdf">...</A>

W takim przypadku dokument zostanie wczytany bezpośrednio w oknie przeglądarki (IE4, NC4.5)

Przykład:

Odsyłacz do pliku *.pdf

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

Polecenie to odtwarza pliki typu *.avi (animacja) wprost na stronie, bez wyświetlania panelu kontrolnego. Możliwe są przy tym dodatkowe atrybuty:

  1. Wyświetlenie informacji alternatywnej:
    <IMG DYNSRC="ścieżka dostępu do pliku *.avi" ALT="Tu wpisz informację">

  2. Ilość powtórzeń:
    <IMG DYNSRC="ścieżka dostępu do pliku *.avi" LOOP="k">

    gdzie "k" oznacza ilość powtórzeń (dla k="infinite" jest to nieskończoność).

  3. Sposób rozpoczęcia odtwarzania:
    <IMG DYNSRC="ścieżka dostępu do pliku *.avi" START="sposób">

    gdzie jako "sposób" należy wpisać:
    • "fileopen" - plik będzie odtwarzany po wczytaniu strony
    • lub "mouseover" - plik będzie odtwarzany po wskazaniu myszką.


Polecenie IMG DYNSRC="..." sprawia kłopoty nawet w Internet Explorerze! Ponadto nie jest interpretowane przez inne przeglądarki, dlatego zaleca się raczej stosowanie EMBED.

Przykład:

Aby zobaczyć różne sposoby osadzania plików bezpośrednio na stronie, kliknijtutaj.

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!


<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="k">

    gdzie "k" oznacza ilość powtórzeń (dla k="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>



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

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"
  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">
</EMBED>
</OBJECT>

gdzie zmodyfikować należy wyróżnione linijki, a kolejne wpisy w nich oznaczają:

Jeśli posiadasz przeglądarkę Internet Explorer, powyższe polecenia spowodują automatyczne otwarcie na stronie programu Windows Media Player (polecenie OBJECT). Natomiast posiadacze przeglądarek Netscape i Opera będą mogli zobaczyć plik, dzięki wpisanemu dodatkowo poleceniu 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.

Przykład:

Aby zobaczyć różne sposoby osadzania plików bezpośrednio na stronie, kliknij

Jednak najbardziej uniwersalną metodą odtwarzania plików multimedialnych, która działa w każdej przeglądarce internetowej i z każdym formatem plików, jestodsyłacz do pliku:

<A HREF="ścieżka dostępu do pliku">opis</A>

Jeśli przeczytałeś już rozdział o odsyłaczach, to zapewne wiesz, że powyższe polecenie jest właśnie odsyłaczem - odsyłaczem do pliku. Po uruchomieniu takiego odnośnika (np. w 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.

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 Internet Explorer i Netscape, a najlepiej również Opera). Rozważ wszystkie "za" i "przeciw" - wybór należy do Ciebie...