Multimedia

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:

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)

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.

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

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

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

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

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

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:

Zaznacz kod

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

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 po prostu odsyłacza do pliku w postaci:

Zaznacz kod

<a href="dokument.pdf">...</a>

W takim przypadku dokument zostanie wczytany bezpośrednio w oknie przeglądarki (MSIE 4, NC 4.5)

Przykład:

Odsyłacz do pliku *.pdf

Plik AV:

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:

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

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

Animacja MARQUEE::

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!

Podstawowa (domyślnie):

<marquee>Tu wpisz tekst</marquee>

Przykład:

Przykład

Wewnątrz znacznika <marquee>...</marquee> można umieścić nie tylko tekst, ale również inne elementy (np.: grafikę).

Przykład

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

"slide" - tekst przesunie się od prawej do lewej tylko raz, a później się zatrzyma i pozostanie nieruchomy

Przykład:

Przykład

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)

Przykład:

Przykład

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

Przykład:

Przykład

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:

Przykład

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:

Przykład

O określonej ilości powtórzeń:

<marquee loop="n">Tu wpisz tekst</marquee>

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

Przykład:

Przykład

O określonej szybkości przesuwania się tekstu:

<marquee scrollamount="n">Tu wpisz tekst</marquee>

lub

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

Przykład:

Przykład

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:

Zaznacz kod

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

{

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

---