Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA AUD5 - TEST WIEDZY NR 3



PYTANIE NR 18.
Rozważ następujący fragment kodu HTML5 używany do osadzania pliku wideo:
<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  Twoja przeglądarka nie obsługuje elementu video.

</video>

Jakie jest główne zastosowanie tagu <source> w tym kodzie?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Element <source> wewnątrz <video> służy do podania plików wideo jako źródeł odtwarzania (np. w różnych formatach). Przeglądarka wybiera pierwszy obsługiwany wariant na podstawie src oraz type. Rozmiar i kontrolki wynikają z atrybutów <video>, a komunikat to tekst zapasowy.

Pełne wyjaśnienie:

W osadzaniu wideo w HTML5 kluczową rolę pełni element <video>, a elementy <source> umieszczone w jego wnętrzu dostarczają przeglądarce konkretnych plików multimedialnych, z których ma skorzystać.

Odpowiedź "Określa alternatywne źródła dla wideo." jest poprawna, ponieważ:

  • każdy <source> wskazuje plik przez atrybut src (np. movie.mp4, movie.ogg),
  • atrybut type informuje o typie MIME (np. video/mp4), co ułatwia wybór obsługiwanego formatu,
  • przeglądarka może wybrać pierwszy format, który potrafi odtworzyć, co zwiększa kompatybilność między różnymi środowiskami.

Dlaczego pozostałe odpowiedzi są niepoprawne:

  • "Kontroluje odtwarzanie wideo." – sterowanie (np. przyciski play/pause) wynika z atrybutu controls w <video> oraz z zachowania przeglądarki/JS, a nie z <source>. <source> dostarcza dane (adres pliku), nie interfejs sterowania.
  • "Określa rozmiar wideo." – rozmiar obszaru wideo ustawiają atrybuty width i height w <video> (lub CSS). Element <source> nie definiuje wymiarów.
  • "Wyświetla komunikat o błędzie." – tekst "Twoja przeglądarka nie obsługuje elementu video." to treść zapasowa umieszczona pomiędzy znacznikami <video>…</video>. Pojawia się, gdy przeglądarka nie obsługuje <video> lub nie może odtworzyć żadnego ze źródeł; nie jest funkcją <source> jako takiego.

W praktyce (np. przy publikacji showreela lub materiału promocyjnego) dodanie kilku <source> pozwala przygotować różne pliki wideo i zwiększyć szansę, że użytkownik odtworzy film bez instalowania dodatkowych wtyczek.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest element <source> w HTML5?
Element <source> służy do wskazania źródła (pliku) dla mediów lub obrazów, najczęściej wewnątrz <video>, <audio> albo <picture>. Podaje się w nim m.in. adres pliku w src oraz typ w type.
Jak działa kilka znaczników <source> w <video>?
Gdy w <video> umieścisz kilka <source>, przeglądarka próbuje wybrać pierwsze źródło, które potrafi odtworzyć. Dzięki temu możesz przygotować różne formaty (np. MP4, OGG, WebM) i zwiększyć kompatybilność odtwarzania.
Dlaczego w <source> podaje się atrybut type?
Atrybut type (np. video/mp4) informuje przeglądarkę o rodzaju danych. Ułatwia to szybkie podjęcie decyzji, czy dany format jest obsługiwany, bez pobierania całego pliku. To praktyczne w projektach multimedialnych pod kątem wydajności i zgodności.
Co oznacza tekst "Twoja przeglądarka nie obsługuje elementu video"?
To tzw. treść zapasowa (fallback) wewnątrz <video>...</video>. Wyświetla się, gdy przeglądarka nie obsługuje elementu wideo lub nie może odtworzyć żadnego z dostępnych źródeł. Nie jest to funkcja elementu <source>.
Jakie są najczęstsze błędy przy użyciu <source> w wideo?
Częste błędy to: brak poprawnego src, zły type (niewłaściwy MIME), podanie plików w formatach nieobsługiwanych w danym środowisku lub pomijanie treści zapasowej. Warto też sprawdzić ścieżki do plików i działanie na różnych przeglądarkach.
Czy <source> ustawia rozmiar lub kontrolki odtwarzania?
Nie. Rozmiar ustawia się w <video> (np. atrybutami width/height lub CSS), a kontrolki zapewnia atrybut controls albo własne sterowanie w JavaScript. <source> wskazuje jedynie, skąd pobrać dane wideo.
Kiedy warto dodać więcej niż jeden format wideo w <source>?
Warto wtedy, gdy film ma działać w możliwie wielu przeglądarkach i na różnych urządzeniach. Różne silniki mogą preferować lub obsługiwać inne formaty. Kilka źródeł w <source> to prosta metoda zwiększenia kompatybilności bez dodatkowych skryptów.
Jak poprawnie zapisać osadzanie wideo w HTML5 do portfolio?
Najczęściej używa się <video controls> oraz kilku <source> z atrybutami src i type, a na końcu dodaje się treść zapasową. Dla portfolio ważne jest też zoptymalizowanie pliku (rozmiar, bitrate) i poprawne ścieżki do zasobów.
Jak sprawdzić, czy przeglądarka obsługuje dany format wideo?
Możesz testować praktycznie (uruchamiając stronę w różnych przeglądarkach) lub użyć metod w JavaScript (np. sprawdzanie możliwości elementu wideo). W HTML samo dodanie kilku <source> zwykle wystarcza, bo przeglądarka wybierze obsługiwany wariant.
Jak przygotować się do pytań o HTML5 w egzaminie multimedialnym?
Skup się na roli podstawowych elementów: <video>, <audio>, <source>, atrybutach (np. controls, src, type) oraz na zasadzie fallback. Ćwicz czytanie krótkich fragmentów kodu i przypisywanie funkcji elementom.
info

Statystycznie 59% uczniów zna prawidłową odpowiedź. średnie

Według specjalistów z branży: "Element &lt;source&gt; wewnątrz &lt;video&gt; służy do podania plików wideo jako źródeł odtwarzania (np. w różnych formatach)."

Źródła:

  • MDN Web Docs: "&lt;source&gt;: The Media or Image Source element" https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source - accessed 2026-03-02
  • MDN Web Docs: "&lt;video&gt;: The Video Embed element" https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video - accessed 2026-03-02
  • WHATWG HTML Living Standard: "The source element" https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element - accessed 2026-03-02

Materiały:

  • Dokumentacja MDN: element &lt;video&gt; oraz &lt;source&gt;
  • Specyfikacja WHATWG HTML dotycząca osadzania mediów
  • Ćwiczenia praktyczne: osadzenie wideo MP4/WebM/OGG na stronie i test w różnych przeglądarkach
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego