Kurs HTML - Osadzanie multimediów w HTML

Autor: Kamil Pociask

Opublikowano: 2011-09-30

W dobie szybkiego Internetu, możemy napotkać na stronach coraz więcej materiałów multimedialnych, takich jak wideo, dźwięk czy Silverlight. Dzięki nim nasza strona może stać się bardziej atrakcyjna i zdobyć większą liczbę czytelników.

Artykuł ten jest częścią kursu Podstawy HTML.

Po zapoznaniu się z tym artykułem będziesz:

• potrafił wstawić materiał multimedialny (np. wideo, dźwięk) na swoją stronę,
• poznasz wady i zalety tych rozwiązań.

Silverlight

Umożliwia wyświetlanie multimedialnych treści, takich jak wideo, dźwięk czy pliki graficzne. Silverlight, podobnie jak Flash, może przechwytywać zdarzenia z klawiatury oraz myszki. Ponadto dzięki tej technologii można wyświetlać pliki wideo w wysokiej rozdzielczości, co jest bardzo pożądane przez Internautów. Aktualnie są one najczęściej stosowane w wypożyczalniach internetowych, gdzie przez określony czas można oglądać różnego rodzaju filmy, seriale czy słuchać muzyki.

Przykład implementacji aplikacji Silverlight w kodzie HTML:

<object id="SilverlightPlugin" width="szerokość" height="wysokość" data="data:application/x-silverlight-4," type="application/x-silverlight-4"  <param name="source" value="nazwaAplikacji.xap"/>
    <!— W przypadku braku potrzebnego plug-in’u zostanie wyświetlony obrazek z   linkiem do ściągnięcia -->
 <a href="https://go.microsoft.com/fwlink/?LinkID=124807" style="text-    decoration: none;">
    <img src="https://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft  Silverlight" style="border-style: none"/></a>
</object>

Informacja

Wybrane parametry, jakie może przyjmować znacznik <param>: onError– określa reakcję na wystąpienie błędu, background – ustawia domyślny kolor tła.

Istnieją również parametry inicjalizacyjne (InitParams), dzięki którym możemy wstawić dowolne parametry i wartości. Ich sposób zapisu w kodzie HTML przedstawia się następująco:

<param name="InitParams" value="pierwszyParametr=wartość,
    drugiParametr=wartość,  
    trzeciParametr=wartość,
    czwartyParametr=wartość" />

Wymogiem Silverlight’a jest instalacja plug-in’u, który pozwala na poprawne odtwarzanie zagnieżdżonych multimediów. Zaletą w tym wypadku jest odtwarzanie pliku bezpośrednio na stronie.

Podkład dźwiękowy

Na wielu stronach można spotkać również podkłady muzyczne. Ich implementacja na stronie jest bardzo prosta.

<bgsound src="ścieżka dostępu do pliku dźwiękowego" />

Informacja

Znacznik <bgsound> ma kilka atrybutów, które możemy dodać. Najważniejsze z nich to: loop="a" – gdzie a to liczba odtworzeń dźwięku, volume="b" – gdzie b przyjmuje wartość od -10000 do 0.

Nie jest ona jednak zalecana, ponieważ pliki dźwiękowe mają duże rozmiary i ich wczytywanie może być długotrwałe (rozwiązaniem mogą być pliki *.mid, które ważą zaledwie do kilkudziesięciu KB). Jeżeli jednak musimy zastosować podkład muzyczny, zalecane jest ustawienie znacznika na końcu kodu strony tak, aby najpierw wczytała się treść, a dopiero potem dźwięk.

HTML5

O wiele łatwiej umieszczać pliki audio i wideo w nowej implementacji HTML5. Umieszczanie multimediów na stronie jest aktualnie najbardziej dogodne. Odbywa się to w bardzo prosty sposób, co jest największą zaletą. Wadą może być jedynie przeglądarka, która nie obsługuje najnowszych technologii.

Plik video

<video src=”ścieżka pliku video”></video>

Informacja

Znacznik <video> ma własne atrybuty, które możemy dodać: audio="muted" – dźwięk zostaje wyciszony, autoplay="autoplay" – odtwarzanie pliku po załadowaniu strony, controls="controls"– pokazuje przyciski nawigacyjne, loop="loop" – po zakończeniu odtwarzania plik zostanie ponownie wczytany, poster="ścieżka do pliku graficznego" – pokazuje plakat filmu.

Zamiast src=”…” możemy również wstawić znacznik <source>. Daje on wtedy możliwość umieszczenia tego samego pliku w różnych kodekach. Dotyczy to głównie starszych przeglądarek. Przykład takiej implementacji:

<video controls=”controls”>
    <source src="video.wmv" type="video/x-ms-wmv" />
    <source src="video.ogv" type="video/ogg" />
    <source src="video.3gp" type="video/3gpp" />
    Tutaj możemy wpisać tekst, który wyświetli przeglądarka, gdy żaden plik nie zostanie wczytany, np. z powodu braku obsługi HTML5.
</video>

Rys. 1. Efekt działania powyższego kodu.

Plik audio

<audio src=”ścieżka pliku audio”></audio>

Informacja

Znacznik <audio> ma również własne atrybuty, które możemy dodać: autoplay="autoplay"– odtwarza plik po załadowaniu strony, controls="controls"– pokazuje przyciski nawigacyjne, loop="loop" – po zakończeniu odtwarzania plik zostanje ponownie wczytany.

Sam odtwarzacz mamy już zaimplementowany w przeglądarce, obsługującej specyfikację HTML5. Dzięki takiemu rozwiązaniu brak jest plug-in’u w przeglądarce po stronie klienta.

Tak samo, jak przy znaczniku <video>, tak i tutaj możemy użyć znacznika <source> zamiast src=”…”. Przykład takiej implementacji:

<audio controls=”controls”>
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.wav" type="audio/wav">
    Twoja przeglądarka nie obsługuje HTML5.
</audio>

Rys. 2. Efekt powyższego kodu z kontrolkami.

Takie rozwiązania dają nam prawie 100% szansę na uzyskanie oczekiwanych rezultatów.

Podsumowanie

W tym artykule zostały opisane metody implementacji plików multimedialnych na stronie oraz wady i zalety tych rozwiązań. Należy jednak pamiętać, że są to najbardziej popularne techniki wstawiania takich treści.

---