Video v HTML

HTML5 je opisal standard za vključitev video vsebin v spletne brskalnike z <video> oznako. Video element podpirajo vsi novejši brskalniki, ne podpirajo pa vsi brskalniki vseh video formatov. Trenutno so v HTML5 podprti trije video formati: MP4, WebM in Ogg:

MP4 – MPEG 4 datoteke z video kodekom H264 in audio kodekom AAC
WebM – WebM datoteke z video kodekom VP8 in audio kodekom Vorbis
Ogg – Ogg datoteke z video kodekom Theora in audio kodekom Vorbis

Trenutna podpora brskalnikov video formatom:

Brskalniki	MP4	WebM	Ogg
Edge	DA	DA	DA
Firefox	DA	DA	DA
Chrome	DA	DA	DA
Safari	DA	DA	NE
Opera	DA	DA	DA

Primer: Video format MP4

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

Primer: Video format WebM

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

Primer: Video format Ogg

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

Primer: Video format Ogg

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

Pred HTML5 standard za prikazovanje video vsebine na spletnih straneh še ni obstajal. Potrebno je bilo namestiti določen vtičnik, ki je omogočal predvajanje tovstnih vsebin (npr. Flash vtičnik).

Primer vstavljanja Youtube videa pred HTML5:

<object width="560" height="315">
   <param name="movie" value="http://www.youtube.com/v/Mp0f0zTPLec?version=3&amp;hl=sl_SI"></param>
   <param name="allowFullScreen" value="true"></param>
   <param name="allowscriptaccess" value="always"></param>
   <embed src="http://www.youtube.com/v/Mp0f0zTPLec?version=3&amp;hl=sl_SI" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Video kontrolniki DOM API

Grafična podoba kontrolnih elemntov videa je v brskalnikih različna. Če nam kontrolni elementi, ki nam jih nudijo brskalniki, niso vizualno všeč, lahko prek vmesnika DOM API izdelamo lastne kontrole.

Poleg tega pa lahko uporabljamo vmesnik DOM API še za mnoge druge stvari. Lahko uporabimo značko HTML <canvas>, na katerem prikažemo video. V tem primeru lahko beremo oziroma zajamemo posamezne podatke iz slikovnih pik ali videosličic in z njimi upravljamo.

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>

Nazaj

Naprej