PricingLoginStart free
HTML Academy · Oppitunti

video-elementti ja kuvasuhde

Upota video ja säilytä oikea kuvasuhde

Oppitunti 2/413 vaihetta

video-elementti ja kuvasuhde on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

videoelementti

<video>-elementti upottaa videon suoraan sivulle:

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

Tärkeät attribuutit

Videon tärkeät attribuutit:

<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>

poster-attribuutti

poster-attribuutti määrittää pikkukuvan, joka näytetään ennen videon toistamista:

<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) -->

Leveys ja korkeus kuvasuhteen säilyttämiseksi

Määritelkää leveys ja korkeus aina asettelun siirtymisen estämiseksi:

<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; }
-->

Responsiivinen video CSS:llä

Tehkää videosta responsiivinen CSS:n avulla:

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%;
}

CSS:n aspect-ratio-ominaisuus

Moderni lähestymistapa CSS:n aspect-ratio-ominaisuuden avulla:

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 */

Videon toiston hallinta JS:llä

JavaScriptin videonhallinta:

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?

Videotapahtumat

Kuunnelkaa videotapahtumia:

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);
});

Koko näytön API

Siirtykää koko näytön tilaan ja poistukaa siitä ohjelmallisesti:

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';
});

Videon automaattisen toiston käytäntö

Selainten videon automaattisen toiston säännöt:

  • Mykistetty video → voi käynnistyä automaattisesti kaikissa moderneissa selaimissa
  • Äänellinen video → estetään, ellei käyttäjä ole käyttänyt sivua
  • Googlen Media Engagement Index → usein vieraileville käyttäjille automaattinen toisto saatetaan sallia
  • Tarjotkaa aina toistopainike varavaihtoehdoksi

Videon saavutettavuus

Videon saavutettavuusvaatimukset:

  • Tarjotkaa tekstitykset kaikelle puheelle ja tärkeille äänille
  • Tarjotkaa kuuroille ja huonokuuloisille käyttäjille tekstiversio
  • Tarjotkaa sokeille käyttäjille äänikuvaukset (kuvatkaa vain visuaalisesti välittyvät tiedot)
  • Varmistakaa näppäimistöohjainten toimivuus (selaimen omat ohjaimet toimivat)

Pikatesti

Mikä videoattribuutti näyttää staattisen kuvan ennen videon toistamista?

Vastaa interaktiivisessa oppitunnissa

Kertaus: videoelementti

Videoelementin perusteet:

  • controls — näyttää soittimen käyttöliittymän
  • width ja height — estävät asettelun siirtymisen
  • poster — pikkukuva ennen toistoa
  • preload="metadata" — hyvä suorituskyvyn oletusasetus
  • Responsiivisuus: width: 100%; height: auto; tai aspect-ratio: 16/9
  • Mykistetty video voi käynnistyä automaattisesti; useimmissa selaimissa mykistämätön video ei voi
Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
40
Oppitunnit
159
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”video-elementti ja kuvasuhde” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “video-elementti ja kuvasuhde”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”video-elementti ja kuvasuhde”?

Upota video ja säilytä oikea kuvasuhde Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”video-elementti ja kuvasuhde”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. audio-elementti: src, controls, loop ja autoplay
  2. video-elementti ja kuvasuhde
  3. source-elementti useille formaateille
  4. Tekstitykset track-elementillä ja WebVTT:llä
← Takaisin: HTML Academy