Muzyka i wideo w HTML – opis i wyjaśnienie

W HTML można dodawać zarówno muzykę, jak i wideo za pomocą dedykowanych tagów <audio> i <video>. Oto szczegóły i przykłady:

1. Dodawanie muzyki za pomocą <audio>

Tag <audio> służy do osadzania plików dźwiękowych.

Podstawowy przykład:

        <audio controls>
          <source src="muzyka.mp3" type="audio/mpeg">
          Twoja przeglądarka nie obsługuje elementu audio.
        </audio>
            

Opis:

• controls — dodaje elementy sterujące (play, pauza, suwak głośności).
• <source> — wskazuje źródło pliku audio i typ MIME.
• Jeśli przeglądarka nie obsługuje <audio>, wyświetlany jest tekst „Twoja przeglądarka nie obsługuje elementu audio.”

2. Dodawanie wideo za pomocą <video>

Tag <video> służy do osadzania plików wideo.

Podstawowy przykład:

        <video controls width="600" height="400">
          <source src="wideo.mp4" type="video/mp4">
          Twoja przeglądarka nie obsługuje elementu wideo.
        </video>
            

Opis:

• controls — dodaje elementy sterujące (play, pauza, przewijanie, pełny ekran).
• width i height — określają rozmiar odtwarzacza wideo.
• <source> — wskazuje źródło pliku wideo i typ MIME.

3. Rozszerzone funkcje

Dodatkowe atrybuty dla <audio> i <video>:

• autoplay — automatyczne odtwarzanie po załadowaniu strony.
• loop — odtwarzanie w pętli.
• muted — wyciszenie dźwięku na początku.
• preload — decyduje, jak dużo danych powinno być załadowanych przed odtworzeniem:
  • none — nie ładuje danych.
  • metadata — ładuje tylko metadane.
  • auto — ładuje cały plik (domyślnie).

Przykład z dodatkowymi atrybutami:

        <audio autoplay loop muted>
          <source src="muzyka.mp3" type="audio/mpeg">
          Twoja przeglądarka nie obsługuje elementu audio.
        </audio>
        
        <video autoplay loop muted>
          <source src="wideo.mp4" type="video/mp4">
          Twoja przeglądarka nie obsługuje elementu wideo.
        </video>
            

4. Obsługa wielu formatów

Nie wszystkie przeglądarki obsługują te same formaty audio i wideo. Aby zapewnić kompatybilność, można podać wiele <source> z różnymi formatami:

Przykład dla <audio>:

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

Przykład dla <video>:

        <video controls width="600" height="400">
          <source src="wideo.mp4" type="video/mp4">
          <source src="wideo.webm" type="video/webm">
          Twoja przeglądarka nie obsługuje elementu wideo.
        </video>
            

5. Osadzanie muzyki i wideo z internetu

Możesz także osadzić pliki z zewnętrznych źródeł:

Przykład zewnętrznego wideo (YouTube):

        <iframe width="560" height="315" src="https://www.youtube.com/embed/ID_FILMU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            

Przykład osadzenia muzyki ze Spotify:

        <iframe src="https://open.spotify.com/embed/track/ID_UTWORU" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>