Multimedia, dźwięk i wideo

Multimedia, takie jak dźwięk i wideo, są często stosowane na stronach internetowych, aby uatrakcyjnić treści i wzbogacić doświadczenie użytkownika. Co więcej, multimedia są używane np. do rozbudowania schematów strukturalnych Schema.org, dzięki którym Google może wyświetlać dodatkowe rozszerzenia w wynikach wyszukiwania. HTML5 wprowadza tagi <audio> i <video>, które ułatwiają dodawanie plików dźwiękowych i wideo.

Dodawanie dźwięku

Tag <audio> służy do dodawania dźwięku na stronie. Atrybut src wskazuje ścieżkę do pliku dźwiękowego. Atrybut controls dodaje interfejs użytkownika do sterowania odtwarzaniem dźwięku, który zawiera podstawowe opcje takie jak odtwarzanie, pauza, regulacja głośności.

Przykład użycia tagu <audio>:

<audio src="plik_dzwiekowy.mp3" controls></audio>

Dodawanie wideo

Tag <video> pozwala na umieszczenie pliku wideo na stronie. Podobnie jak w tagu <audio>, atrybut src określa ścieżkę do pliku wideo, a controls dodaje interfejs użytkownika do sterowania odtwarzaniem wideo, który zawiera podstawowe opcje takie jak odtwarzanie, pauza, regulacja głośności.

Przykład użycia tagu <video>:

<video src="plik_wideo.mp4" controls></video>

Alternatywne formaty plików

Ze względu na różnice w obsłudze formatów plików przez przeglądarki, warto dodać alternatywne formaty dźwięku i wideo. Używając tagu <source>, można określić różne formaty plików jako alternatywne źródła. Przeglądarka wybierze pierwszy obsługiwany format z listy.

Przykład użycia alternatywnych formatów plików:

<!-- Dźwięk z alternatywnym formatem -->
<audio controls>
  <source src="plik_dzwiekowy.mp3" type="audio/mpeg">
  <source src="plik_dzwiekowy.ogg" type="audio/ogg">
  Niestety, twoja przeglądarka nie obsługuje elementu audio.
</audio>
<!-- Wideo z alternatywnym formatem -->
<video controls>
  <source src="plik_wideo.mp4" type="video/mp4">
  <source src="plik_wideo.webm" type="video/webm">
  Niestety, twoja przeglądarka nie obsługuje elementu wideo.
</video>

Powyższy kod HTML przedstawia odtwarzacze dźwięku i wideo z alternatywnymi formatami plików, które mogą wyświetlać komunikaty o braku obsługi elementów audio lub wideo, gdy przeglądarka użytkownika nie obsługuje tych elementów.

Warto zapamiętać

Dodawanie dźwięku i wideo do stron internetowych może znacznie zwiększyć atrakcyjność witryny oraz interaktywność. Dzięki tagom <audio> i <video> oraz ich atrybutom, twórcy stron mogą w prosty sposób wzbogacić zawartość multimedialną i zapewnić kompatybilność z różnymi przeglądarkami. Więcej na temat mulitmediów dowiesz się w dziale obsługa multimediów HTML.

Czy ten poradnik był pomocny?
Mateusz Turek
Mateusz Turek

Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand. Chcesz dowiedzieć się więcej o mnie? Zajrzyj na mateuszturek.pl

Artykuły: 190