Načrtovanje in razvoj spletnih aplikacij

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:

  • MP4MPEG 4 datoteke z video kodekom H264 in audio kodekom AAC
  • WebMWebM datoteke z video kodekom VP8 in audio kodekom Vorbis
  • OggOgg datoteke z video kodekom Theora in audio kodekom Vorbis

Trenutna podpora brskalnikov video formatom:

Brskalniki MP4 WebM Ogg
Internet Explorer DA NE NE
Firefox DA DA DA
Chrome DA DA DA
Safari DA NE NE
Opera DA DA DA

Primer: Video format MP4

<video width="400" height="228" controls="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="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="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="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>