0Pricing
HTML Academy · Lekcja

Element video i współczynnik proporcji

Osadzanie wideo z zachowaniem prawidłowych proporcji

Element video i współczynnik proporcji to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 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.

Element video

Element <video> osadza wideo natywnie:

<video controls width="800" height="450" src="tutorial.mp4">
  Your browser does not support video.
</video>

Najważniejsze atrybuty

Najważniejsze atrybuty wideo:

<video
  src="demo.mp4"
  controls           <!-- show player UI -->
  width="1280"       <!-- intrinsic width -->
  height="720"       <!-- intrinsic height -->
  poster="preview.jpg" <!-- thumbnail before play -->
  preload="metadata"   <!-- preload only metadata -->
>
  Your browser does not support video.
</video>

Atrybut poster

Atrybut poster ustawia miniaturę wyświetlaną przed rozpoczęciem odtwarzania wideo:

<video controls poster="/thumbnails/episode-42.jpg" width="800" height="450">
  <source src="episode-42.mp4" type="video/mp4">
</video>
<!-- Without poster: browser shows a black frame
     or the first frame of the video (browser-dependent) -->

Szerokość i wysokość dla zachowania proporcji

Zawsze należy określać szerokość i wysokość, aby zapobiec przesuwaniu układu:

<video controls width="1280" height="720" src="video.mp4"></video>
<!-- Browser reserves correct space before video loads -->
<!-- Prevents CLS (Cumulative Layout Shift) -->
<!-- Make responsive with CSS:
  video { width: 100%; height: auto; }
-->

Responsywne wideo w CSS

Responsywność wideo można zapewnić za pomocą CSS:

video {
  width: 100%;
  height: auto;
  max-width: 1280px;
  display: block;
  margin: 0 auto;
}

/* Aspect ratio box: */
.video-wrapper {
  position: relative;
  padding-top: 56.25%;  /* 16:9 aspect ratio: 9/16 = 0.5625 */
}
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

Właściwość CSS aspect-ratio

Nowoczesne podejście z użyciem CSS aspect-ratio:

video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Other common ratios: */
/* 4:3 → aspect-ratio: 4 / 3 */
/* 21:9 → aspect-ratio: 21 / 9 */
/* 1:1 → aspect-ratio: 1 */

Sterowanie odtwarzaniem wideo za pomocą JS

Sterowanie wideo za pomocą JavaScriptu:

const video = document.getElementById('my-video');

video.play();
video.pause();
video.currentTime = 60;  // jump to 1 minute
video.playbackRate = 1.5;  // 1.5x speed
video.volume = 0.7;
video.muted = true;
video.requestFullscreen();

console.log(video.duration);    // total length
console.log(video.paused);      // is it paused?

Zdarzenia wideo

Nasłuchiwanie zdarzeń wideo:

video.addEventListener('play', () => updatePlayButton());
video.addEventListener('pause', () => updatePlayButton());
video.addEventListener('ended', () => showNextVideo());
video.addEventListener('timeupdate', () => updateProgressBar());
video.addEventListener('loadedmetadata', () => {
  console.log('Duration:', video.duration);
  console.log('Dimensions:', video.videoWidth, 'x', video.videoHeight);
});

API pełnego ekranu

Programowe włączanie i wyłączanie trybu pełnoekranowego:

const btn = document.getElementById('fullscreen-btn');
const video = document.getElementById('player');

btn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    video.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

document.addEventListener('fullscreenchange', () => {
  btn.textContent = document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen';
});

Zasady automatycznego odtwarzania wideo

Zasady automatycznego odtwarzania wideo w przeglądarkach:

  • Wyciszone wideo → może być odtwarzane automatycznie we wszystkich nowoczesnych przeglądarkach
  • Niewyciszone wideo → jest blokowane, chyba że użytkownik wszedł w interakcję ze stroną
  • Google's Media Engagement Index → częstym użytkownikom może być dozwolone automatyczne odtwarzanie
  • Zawsze należy udostępnić przycisk odtwarzania jako rozwiązanie awaryjne

Dostępność wideo

Wymagania dotyczące dostępności wideo:

  • Należy zapewnić napisy do wszystkich dialogów i ważnych dźwięków
  • Należy zapewnić transkrypcję dla osób niesłyszących i niedosłyszących
  • Należy zapewnić audiodeskrypcję dla osób niewidomych (opisującą informacje przekazywane wyłącznie wizualnie)
  • Należy zadbać o działanie sterowania za pomocą klawiatury (natywne elementy sterujące już to zapewniają)

Szybki test

Jaki atrybut wideo wyświetla statyczny obraz przed rozpoczęciem odtwarzania wideo?

Podsumowanie: element video

Najważniejsze informacje o elemencie wideo:

  • controls — wyświetla interfejs odtwarzacza
  • width i height — zapobiegają przesuwaniu układu
  • poster — miniatura wyświetlana przed rozpoczęciem odtwarzania
  • preload="metadata" — dobre ustawienie domyślne pod względem wydajności
  • Responsywność: width: 100%; height: auto; lub aspect-ratio: 16/9
  • Wyciszone wideo może być odtwarzane automatycznie, a niewyciszone — w większości przeglądarek nie

Często zadawane pytania

Czy lekcja „Element video i współczynnik proporcji” jest bezpłatna?

Tak — pełny tekst „Element video i współczynnik proporcji” 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 video i współczynnik proporcji”?

Osadzanie wideo z zachowaniem prawidłowych proporcji Ć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 2 z 4.

Ile czasu zajmuje lekcja „Element video i współczynnik proporcji”?

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