Video v HTML

Video v dokument HTML vključimo z elementom <video>. Ta element omogoča vgradnjo videoposnetka neposredno v spletno stran in v sodobnih brskalnikih podpira predvajanje brez dodatnih vtičnikov.

Video lahko vključimo z eno datoteko ali pa ponudimo več različnih virov. V takem primeru brskalnik uporabi prvi format, ki ga podpira.

Pomni: Znotraj elementa <video> lahko uporabimo enega ali več elementov <source>. Tako povečamo možnost, da bo brskalnik našel podprt format videa.

Osnovna pravila

Video vključimo z elementom <video>.
Za posamezne datoteke uporabimo element <source>.
Z atributom controls prikažemo osnovne kontrolnike za predvajanje.
Videu lahko dodamo sliko začetnega prikaza z atributom poster.
Podnapise ali napise lahko vključimo z elementom <track>.

Pozor: Samodejno predvajanje videa ni vedno zaželeno. V sodobni praksi je pri samodejnem predvajanju pogosto potrebno tudi utišanje videa, sicer brskalnik predvajanja morda ne dovoli.

Video formati

Na spletu se najpogosteje uporabljajo predvsem formati MP4 in WebM. Včasih se uporablja tudi Ogg, vendar redkeje. Različni brskalniki in okolja lahko podpirajo različne kombinacije vsebnika in kodeka, zato je pri spletni rabi pogosto smiselno ponuditi več virov videa.

MP4 – zelo pogost in dobro podprt format za spletni video.
WebM – sodoben format, primeren za spletno uporabo.
Ogg – starejši format, ki ga danes uporabljamo redkeje.

Ker se podpora formatom in kodekom lahko razlikuje, je pogosto koristno ponuditi vsaj dve različici videa, na primer MP4 in WebM.

Osnovni primer videa

Najpreprostejši primer uporabe elementa <video> vsebuje en vir in atribut controls, ki prikaže osnovne kontrolnike predvajanja.

<video width="400" height="228" controls>
  <source src="movie.mp4" type="video/mp4">
  Vaš brskalnik ne podpira video elementa.
</video>

Več virov videa

Elementu <video> lahko dodamo več elementov <source>. Brskalnik bo poskusil uporabiti prvi podprti vir. Vsebina med začetno in končno oznako <video> služi kot nadomestno besedilo, če element ni podprt.

<video width="400" height="228" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  Vaš brskalnik ne podpira video elementa.
</video>

Pogosti atributi elementa `<video>`

controls – prikaže kontrolnike za predvajanje.
width in height – določita velikost prikaza videa.
autoplay – video se začne samodejno predvajati.
muted – video je utišan.
loop – video se po koncu predvaja znova.
poster – določa sliko, ki se prikaže pred začetkom predvajanja.
playsinline – omogoča predvajanje znotraj območja elementa, namesto posebnega celozaslonskega načina v nekaterih okoljih.

Primer z atributom poster:

<video width="400" controls poster="slika.jpg">
  <source src="movie.mp4" type="video/mp4">
</video>

Podnapisi in element `<track>`

Videu lahko dodamo tudi podnapise, napise ali druge besedilne sledi. To storimo z elementom <track>, ki ga uporabimo znotraj elementa <video>. Tak zapis je pomemben tudi z vidika dostopnosti videovsebine.

<video width="400" controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="podnapisi-sl.vtt" kind="subtitles" srclang="sl" label="Slovenščina">
</video>

Pri videih je priporočljivo razmisliti tudi o podnapisih ali prepisu vsebine, saj to izboljša dostopnost in uporabnost videa.

Predvajanje videa z JavaScriptom

Video lahko upravljamo tudi z JavaScriptom. Tako lahko izdelamo lastne gumbe za predvajanje, ustavljanje, spreminjanje velikosti ali utišanje videa.

Primer:

<div>
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <button onclick="toggleMute()">Sound On/Off</button>
</div>

<video id="video1" width="400" height="288" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  Tvoj brskalnik ne podpira video elementa.
</video>

<script>
  var myVideo = document.getElementById("video1");

  function playPause() {
    if (myVideo.paused) myVideo.play();
    else myVideo.pause();
  }

  function makeBig() {
    myVideo.width = 400;
  }

  function makeSmall() {
    myVideo.width = 180;
  }

  function makeNormal() {
    myVideo.width = 288;
  }

  function toggleMute() {
    myVideo.muted = !myVideo.muted;
  }
</script>

Pred pojavom elementa <video> je bilo pri spletni rabi videa pogosto potrebno uporabljati dodatne vtičnike. V sodobnih brskalnikih to praviloma ni več potrebno.

Priporočila

Pri spletnem videu uporabljaj ustrezno oznako <video>.
Po potrebi ponudi več virov videa z elementi <source>.
Za običajno rabo dodaj atribut controls.
Pri pomembni videovsebini razmisli o podnapisih z elementom <track>.
Samodejno predvajanje uporabljaj premišljeno.

Pogoste napake

Video je vključen samo v enem formatu, čeprav bi bil smiseln tudi dodatni vir.
Pri videu ni dodan atribut controls, čeprav uporabnik potrebuje osnovne kontrolnike.
Pri samodejnem predvajanju ni upoštevano, da brskalnik tak video lahko blokira.
Podnapisi niso dodani, čeprav bi izboljšali dostopnost videa.
Rezervno besedilo znotraj elementa <video> ni zapisano.

Nazaj

Naprej