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