Przejdź do treści

Uniwersalny sposób odtwarzania plików <a "jpg, avi, wav, txt, doc, rtf, xls, pdf", object>

Jak wstawić odtwarzacz multimedialny (filmy, muzyka) na stronę WWW? Jak wstawić na stronę pliki do pobrania (dział download)?

Wstęp

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.

Odsyłacz do pliku <a "jpg, avi, wav, txt, doc, rtf, xls, pdf">

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, 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ć Adobe 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.

Przykład <a "jpg, avi, wav, txt, doc, rtf, xls, pdf">

Zagnieżdżanie plików multimedialnych <object>

W przypadku materiałów dźwiękowych (muzyka) i wideo (filmy) korzystniej jest użyć odpowiednio elementów: AUDIO, VIDEO.

Jeśli koniecznie zależy nam na tym, aby plik multimedialny był odtwarzany wprost na stronie, a jednocześnie chcemy mieć pewność, że będzie on dostępny we wszystkich przeglądarkach, możemy użyć zagnieżdżania plików multimedialnych:

<object data="ścieżka dostępu do pliku multimedialnego" width="szerokość" height="wysokość">
	<a href="ścieżka dostępu do pliku multimedialnego">Pobierz plik</a>
</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

Pomiędzy znacznikiem otwierającym <object...> a zamykającym </object> można umieścić dowolny kod, który wyświetli się tylko w sytuacji, jeśli przeglądarka nie obsługuje wyświetlania tego typu plików multimedialnych wprost na stronie. Najłatwiej podać po prostu odsyłacz do tego samego pliku. Wtedy użytkownicy niekompatybilnych przeglądarek będą mogli przynajmniej pobrać plik na swój dysk lokalny i potem ewentualnie odtworzyć go w osobnej aplikacji.

Przykład <object>

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

Pytania i odpowiedzi <a "exe", object>

Jak dodać plik HTML do strony?

Najłatwiejszym sposobem dodania dowolnego pliku do strony jest wstawienie odsyłacza do niego. Jeśli będzie to plik multimedialny albo dokument znanego typu, to po kliknięciu w taki link jego zawartość może zostać wyświetlona bezpośrednio w oknie przeglądarki. W przeciwnym razie zostanie uruchomione pobierane pliku na dysk lokalny użytkownika. Na przykład jeśli plik nazywa się "aplikacja.exe" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić odnośnik do niego, można się posłużyć następującym znacznikiem: <a href="aplikacja.exe">Pobierz plik</a>.

Do czego służy znacznik OBJECT?

Element OBJECT działa podobnie jak EMBED, ale w założeniu jest bardziej uniwersalny. Za jego pomocą tak samo można osadzać bezpośrednio w stronie różnorodne pliki multimedialne: dokumenty MS Word, arkusze kalkulacyjne Excel czy prezentacje PowerPoint itp. Ale oprócz tego jest przeznaczony do wstawiania interaktywnych aplikacji działających bezpośrednio wewnątrz strony - jak np. gry wideo. Ponadto, w odróżnieniu od elementu EMBED, wewnątrz znacznika OBJECT można umieścić treść, która się wyświetli w jego miejsce w przeglądarce, jeśli podany typ pliku nie będzie przez nią obsługiwany. Można tam wstawić np. bezpośredni odsyłacz do tego pliku, aby użytkownik mógł go pobrać na swój dysk lokalny i spróbował otworzyć w jakiejś zewnętrznej aplikacji.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
<object>1
2008-12-11
1
2004-11-09
12
2015-07-29
15
2013-07-02
3
2007-10-26
<object data>1
2008-12-11
1
2004-11-09
12
2015-07-29
15
2013-07-02
3
2007-10-26
<object height>1
2008-12-11
1
2004-11-09
12
2015-07-29
15
2013-07-02
3
2007-10-26
<object width>1
2008-12-11
1
2004-11-09
12
2015-07-29
15
2013-07-02
3
2007-10-26

Komentarze

Zobacz więcej komentarzy

Facebook