KWALIFIKACJA PGF7 - TEST WIEDZY NR 9

PYTANIE NR 28.
<video width="320" height="240" controls>
  <source src="film.mp4" type="video/mp4">
  <source src="film.ogg" type="video/ogg">
  Twoja przeglądarka nie obsługuje tagu video.
</video>
Który z poniższych opisów najlepiej pasuje do powyższego fragmentu kodu HTML?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Fragment wykorzystuje element video z atrybutem controls oraz dwa elementy source z różnymi typami plików. Oznacza to osadzenie materiału wideo na stronie i zapewnienie alternatywnych formatów dla kompatybilności. Tekst wewnątrz działa jako komunikat awaryjny.

Pełne wyjaśnienie:

Pokazany kod HTML służy do osadzenia wideo w treści strony internetowej. Kluczowym elementem jest znacznik video z atrybutami width i height (rozmiar odtwarzacza) oraz controls, który włącza standardowe przyciski odtwarzania w przeglądarce (play/pauza, pasek czasu, głośność).

Wewnątrz znajdują się dwa znaczniki source. Każdy wskazuje plik wideo (src) oraz jego typ MIME (type). Podanie kilku źródeł ma sens praktyczny: różne przeglądarki i środowiska mogą lepiej obsługiwać różne formaty, więc przeglądarka wybiera pierwsze obsługiwane źródło.

Tekst "Twoja przeglądarka nie obsługuje tagu video." jest tzw. fallbackiem – zostanie wyświetlony, gdy odtwarzanie wideo nie jest możliwe. To ważne z punktu widzenia dostępności i komunikacji z użytkownikiem.

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • Audio najczęściej osadza się znacznikiem audio; tutaj użyto video i podano formaty wideo.
  • Obraz standardowo wstawia się znacznikiem img; w kodzie nie ma atrybutu alt ani wskazania grafiki, tylko odtwarzacz.
  • Tekst nie wymaga odtwarzacza ani źródeł multimedialnych; tekst w środku jest jedynie komunikatem awaryjnym, a nie główną treścią.

W kontekście przekazu reklamowego taka konstrukcja pozwala umieścić np. krótki spot produktowy na landing page i zwiększyć atrakcyjność kreacji, przy jednoczesnym zadbaniu o kompatybilność przez alternatywne formaty.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Znacznik <video> służy do osadzania materiału wideo na stronie WWW. Przeglądarka wyświetla odtwarzacz, a atrybuty (np. controls) pozwalają włączyć sterowanie. Wewnątrz zwykle umieszcza się źródła wideo przez <source>.
Element <source> podaje konkretne źródło pliku (atrybut src) oraz jego typ (atrybut type). Możesz dodać kilka elementów <source>, a przeglądarka wybierze pierwsze źródło, które potrafi odtworzyć.
Różne przeglądarki i urządzenia mogą obsługiwać różne formaty/kodeki. Podanie kilku źródeł (np. MP4 i OGG) zwiększa szansę, że użytkownik zobaczy reklamę wideo bez problemów. To praktyka poprawiająca kompatybilność kampanii.
Atrybut controls włącza widoczny interfejs odtwarzacza w przeglądarce (np. start/pauza, pasek postępu, głośność). Bez niego wideo może odtwarzać się tylko poprzez skrypty lub inne mechanizmy, co w praktyce utrudnia obsługę.
Tekst umieszczony wewnątrz <video> może zostać pokazany, gdy przeglądarka nie obsługuje wideo lub nie może go odtworzyć. To tzw. fallback. W reklamie warto użyć krótkiego komunikatu, by użytkownik wiedział, czemu nie widzi materiału.
Wideo osadza się zwykle przez <video>, a audio przez <audio>. W praktyce podpowiedzią są też typy źródeł (np. video/mp4 dla wideo). Jeśli widzisz element <video> i typy wideo, to nie jest osadzanie audio.
Tak, <video> jest często używany na landing page do prezentacji produktu lub usług. Trzeba jednak zadbać o rozmiar pliku, kompatybilność formatów oraz sensowne sterowanie (np. controls). W reklamie liczy się też szybkie ładowanie i czytelny przekaz.
Typowe błędy to: mylenie <video> z <audio>, brak rozpoznania roli <source>, ignorowanie atrybutu controls oraz uznawanie tekstu fallback za "osadzony tekst". Na egzaminie czytaj nazwę elementu i typ MIME.
Warto wtedy, gdy chcesz zwiększyć zgodność reklamy wideo z różnymi przeglądarkami i urządzeniami. Dodajesz kilka źródeł tego samego filmu w różnych formatach, a przeglądarka automatycznie wybierze obsługiwany wariant. To ogranicza ryzyko "czarnego okna" zamiast wideo.
Opanuj podstawowe elementy: <video>, <audio>, <source> oraz najczęstsze atrybuty (np. controls). Ćwicz rozpoznawanie kodu "na oko" i rozumiej, po co są różne formaty. Pomaga też uruchomienie prostych przykładów w przeglądarce.
info

Około 81% zdających odpowiada poprawnie na to pytanie. średnio łatwe

W praktyce zawodowej kluczowe jest to, że fragment wykorzystuje element video z atrybutem controls oraz dwa elementy source z różnymi typami plików.

Źródła:

  • MDN Web Docs: "&lt;video&gt;: The Video Embed element" (dokumentacja), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video - accessed 2026-02-18
  • MDN Web Docs: "&lt;source&gt;: The Media or Image Resource element" (dokumentacja), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source - accessed 2026-02-18
  • WHATWG HTML Living Standard: "The video element" (sekcja specyfikacji), https://html.spec.whatwg.org/multipage/media.html#the-video-element - accessed 2026-02-18

Materiały:

  • Dokumentacja MDN Web Docs: element HTML &lt;video&gt; i &lt;source&gt;
  • Specyfikacja HTML Living Standard (WHATWG): sekcja dotycząca elementu video
  • Ćwiczenia praktyczne: stworzenie prostej strony z wideo i dwoma źródłami oraz test w różnych przeglądarkach

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego