0Pricing
HTML Academy · Lekcja

Element source dla wielu formatów

Udostępnianie alternatywnych formatów za pomocą elementu source

Element source dla wielu formatów to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Dlaczego wiele formatów?

Różne przeglądarki obsługują różne kodeki audio i wideo:

  • WebM (VP9/VP8) — Chrome, Firefox, Edge (bez Safari)
  • MP4 (H.264) — wszystkie przeglądarki (uniwersalny)
  • OGG — Firefox, Chrome (bez Safari)
  • OPUS — Chrome, Firefox, Edge (bez Safari)

Element <source> pozwala udostępnić wiele formatów jako rozwiązania alternatywne.

Element source wewnątrz audio

Należy udostępnić wiele formatów audio:

<audio controls>
  <!-- Browser picks the first format it supports: -->
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
  <source src="podcast.mp3" type="audio/mpeg">
  <!-- Fallback text if none supported: -->
  <p>Download: <a href="podcast.mp3">podcast.mp3</a></p>
</audio>

Element source wewnątrz video

Należy udostępnić wiele formatów wideo:

<video controls width="1280" height="720" poster="thumbnail.jpg">
  <source src="tutorial.webm" type="video/webm">
  <source src="tutorial.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.
     <a href="tutorial.mp4">Download the video</a></p>
</video>

Atrybut type elementu source

Atrybut type informuje przeglądarkę o typie MIME i kodeku:

<!-- Full MIME type with codec parameter: -->
<source src="video.webm" type="video/webm; codecs=vp9,vorbis">
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">

<!-- Simplified (browser may need to probe): -->
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">

Jak działa wybór elementu source

Przeglądarka analizuje elementy source w kolejności:

  1. Odczytuje atrybut type pierwszego elementu source
  2. Jeśli może odtworzyć ten typ, pobiera go i używa
  3. Jeśli nie, przechodzi do następnego elementu source
  4. Jeśli żadne źródło nie działa, wyświetla treść zastępczą

Najpierw należy umieścić najbardziej preferowany format (np. WebM zapewniający lepszą wydajność w Chrome i Firefoxie).

Atrybut media elementu source

Atrybut media pozwala udostępniać różne formaty dla różnych obszarów wyświetlania:

<video controls>
  <!-- Mobile: smaller file -->
  <source
    src="video-480.mp4"
    type="video/mp4"
    media="(max-width: 768px)"
  >
  <!-- Desktop: full quality -->
  <source
    src="video-1080.mp4"
    type="video/mp4"
  >
</video>

Zalecana kolejność formatów

Optymalna kolejność źródeł zapewniająca maksymalną zgodność i wydajność:

<video controls>
  <!-- AV1 in WebM: best compression, modern browsers -->
  <source src="video.av1.mp4" type="video/mp4; codecs=av01">

  <!-- VP9 in WebM: Chrome/Firefox/Edge -->
  <source src="video.webm" type="video/webm">

  <!-- H.264 in MP4: universal fallback -->
  <source src="video.mp4" type="video/mp4">
</video>

Zalecenia dotyczące formatów audio

Zalecenia dotyczące kodeków audio:

  • OPUS w WebM — najlepszy stosunek jakości do rozmiaru; Chrome, Firefox, Edge
  • AAC w MP4 — uniwersalny; Safari, Chrome, Firefox, Edge
  • MP3 — najszersza zgodność; należy używać jako ostatniego rozwiązania awaryjnego

Responsywne wideo z użyciem srcset

W przypadku wideo należy używać atrybutu media elementu source do dostosowywania jakości do przepustowości:

<video controls poster="thumbnail.jpg">
  <source
    src="video-720.webm"
    type="video/webm"
    media="(min-width: 1024px)"
  >
  <source
    src="video-360.webm"
    type="video/webm"
  >
  <source src="video-720.mp4" type="video/mp4" media="(min-width: 1024px)">
  <source src="video-360.mp4" type="video/mp4">
</video>

Sprawdzanie canPlayType

Obsługę kodeków przez przeglądarkę można sprawdzić za pomocą JavaScriptu:

const video = document.createElement('video');

console.log(video.canPlayType('video/webm; codecs=vp9'));
// '' = no, 'maybe' = possibly, 'probably' = likely yes

console.log(video.canPlayType('video/mp4; codecs=avc1.42E01E'));
// 'probably' on most modern browsers

Treść zastępcza

Zawsze należy umieszczać treść zastępczą wewnątrz audio/video:

<video controls width="800" height="450">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">

  <!-- Fallback for browsers without video support: -->
  <p>
    Your browser does not support HTML5 video.
    <a href="demo.mp4">Download the video</a> instead.
  </p>
</video>

Szybki test

W jakiej kolejności należy umieszczać elementy source?

Podsumowanie: element source

Najważniejsze informacje o elemencie source:

  • <source src type> wewnątrz audio/video udostępnia alternatywne formaty
  • Przeglądarka wybiera pierwsze pasujące źródło
  • Najpierw należy umieścić najnowocześniejszy format, a MP4/AAC wykorzystać jako uniwersalne rozwiązanie awaryjne
  • Po wszystkich źródłach należy umieścić tekst lub odsyłacz zastępczy wewnątrz audio/video
  • Atrybutu media elementu source należy używać do wyboru wideo na podstawie obszaru wyświetlania

Często zadawane pytania

Czy lekcja „Element source dla wielu formatów” jest bezpłatna?

Tak — pełny tekst „Element source dla wielu formatów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Element source dla wielu formatów”?

Udostępnianie alternatywnych formatów za pomocą elementu source Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Element source dla wielu formatów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Element audio — src, controls, loop i autoplay
  2. Element video i współczynnik proporcji
  3. Element source dla wielu formatów
  4. Napisy za pomocą track i WebVTT
← Powrót do HTML Academy