Kezdőlap > HTML 5 > HTML 5 – Video & Audio

HTML 5 – Video & Audio

2011. április 29. péntek Hozzászólás Go to comments

Ma, amikor a multimédia a hétköznapok részévé vált, a weben még mindig különböző bővítmények segítségével tudunk videót nézni. Általában vagy Flash vagy Silverlight esetleg valamilyen ActiveX-es vezérlő kellet ahhoz, hogy videó vagy audió anyagot élvezhessünk a neten. Ezen is változtatott a HTML5, ugyanis beépített audió és videó vezérlővel rendelkezik. És ami nagyon jó benne, hogy rendkívül jól használható. Igaz vannak korlátai, mert szegényes formátumot támogatása van, de amit támogat azt nagyon jól. Audio szempontjából AAC-t vagy MP3at, míg videó szempontjából MP4 vagy H.264 –es videó lesz a megfelelő. (A videók audió sávja szintén csak AAC vagy MP3 lehet) De ez nagyjából elég is, az átlagos felhasználóknak.

Video lejátszó

A HTML5 sokat fejlődött, és nagyon egyszerűen tudunk benne multimédia tartalmakat megjelenítni. Például, ha szeretnénk egy kis videót lejátszani, csak az alábbi elem és annak attribútumaira lesz szükségünk.

<video width=”400″

    height=”300″

    src=”demo.mp4″

    poster=”frame.jpg”

    autoplay

    controls

    loop>

    Ez a szöveg akkor fog megjelenni, hogy ha az adott codeck nem támogatott.

 </video>


Nézzük mit is csináltunk pontosan. Készítettük egy video tagot, ahol megadtuk a magasságát és a hosszúságát a videónak. Az src attribútumnál megadtuk a videó elérési útvonalát.  A poster attribútum egy képet mutat addig, amíg a videó, egyfajta splash screen szerű dolog. Az autoplay tulajdonsággal meghatározzuk, hogy ha betöltődött a videó, akkor rögtön kezdje el lejátszani, a loop-pal meg értelemszerűen újra és újra kezdi a videót. A controls még egy érdekes tulajdonság, ha ezt az elemet belerakjuk akkor az alapvető videó vezérlő kontrolok megjelennek az videóban (Természetesen testre szabható, átalakíthatóak)

image

De akár több forrást is megadhatunk, a source elementek között.

<video width=”400″ height=”300″ poster=”frame.png” autoplay controls loop>

    <source src=”video.ogv” type=’video/ogg; codecs=”theora,

     vorbis”‘>

    <source src=”video.mp4″ type=’video/mp4; codecs=”avc1.42E01E,

     mp4a.40.2″‘>

 </video>


Az eredmény kb. a következő lesz:

image

De felmerülhet a kérdés, hogy miért jobb ez a videó „lejátszó” mint mondjuk egy Silverlightos vagy egy Flashes. Nos, a válasz abban rejlik, hogy ez tisztán HTML. Azaz nincs böngésző plugin nem kell telepíteni semmit se hozzá, sőt ha akarom, olyan szinten testre szabhatjuk, amennyire csak szeretném JavaScriptel bármit elérhetek benne.

Készítsünk video lejátszó weboldalt

A cél az, hogy egy mini webes videó lejátszót készítsünk.

<!DOCTYPE html>

<html>

 <head>

  <title>HTML5 Video</title>

  <style>     </style>

<body>

 <article>

 <video id=”example” src=”demo.mp4″ height=”256″ width=”592″ controls autobuffer>

    Ez a szöveg akkor fog megjelenni, hogy ha az adott codeck nem támogatott.

 </video>

 </article>

 </body>

</html>


A példa videót innen lehet letölteni. Ezt a videót tegyük közvetlen a html oldal mellé. (Vagy hivatkozzunk rá)

Adjunk stílus az oldalnak. Legyen fekete az oldal, és a videó lejátszót pedig pozicionáljuk középre. Az article elementbe helyezzük el a videót.

<style>

       body {

              background:#000;

              padding:0;

              margin:0;

              overflow:hidden;

              width:100%;

              height:100%;

              font-family:sans-serif;

              font-size:10px;

              color: #666;

              }

       article {

              display:block;

              position:relative;

              margin:100px auto 10px auto;

              width:592px;

              }

</style>

 

Ha most elindítjuk az alkalmazást, akkor egy sima videó lejátszó alkalmazást kapunk.

image

Ez eddig egyszerű, de nem lenne olyan jó, ha nem lehetne testre szabni. A következőekben készítünk egy kis menedzsment felületet hozzá.

Adjunk az article elementbe a videó alá egy sima gombot, aminek az id-ja play legyen.

<button id=”play”>Play</button>


Most már csak a JavaScriptet kell megírnunk.

<script>

       var play =  document.getElementById(‘play’);   

       var video = document.getElementById(‘example’);

       play.addEventListener(‘click’,playControl,false);

       function playControl()

       {

              if (video.paused == false) {

                     video.pause();

                     this.firstChild.nodeValue = ‘Play’;

              } else {

                     video.play();

                     this.firstChild.nodeValue = ‘Pause’;

              }

       }

</script>

A JavaScriptben lekérdezzük mind play mind a video elementet. A video elementnek az id-ja az example. Itt név szerint hivatkozunk rá, majd feliratkozunk a click eseményére. Utána értelemszerű a dolgunk. Ha video jelenleg nincs megállított, akkor leállítjuk, majd a gomb nevét átírjuk.

image

És így már van saját gombunk, amit mi írtunk hozzá. Ha rákattintunk, akkor elindul a videó, ha már megy és megint rákattintunk akkor leáll a videó.

Audio lejátszó

Tulajdonképpen az audio elementnek ugyanolyan tulajdonságai vannak, mint a videónak, kivéve a Width és Height tulajdonság, mert neki ugyanis nincs ilyen eleme. Viszont az alapvető vezérlő kontrolok itt is megtalálhatóak.

image

<audio src=”demo.mp3″ autoplay controls>


Amit észre kell vennünk, hogy audio és videó alkalmazásokat HTML5-höz nagyon könnyen írhatunk. Néhány pillanat alatt kész is egy teljes értékű kis videó és zene lejátszó weboldal.

Próbáld ki élesben egy HTML5-ös videó alkalmazást

Kattints ide és nézd meg, hogy milyen lehetőségek vannak még a HTML5 videó és audió támogatásának.

Reklámok
Kategóriák:HTML 5
  1. 2011. április 29. péntek - 11:34

    Tetszik, szép 🙂

    Ha jól látom a több source tag arra való ha az adott browser csak az egyik formátumot támogatja.

    Lejátszási lista készítésére van valami már kész módszer vagy arra még rá kell dolgozni?

    Morzel

  2. 2011. április 29. péntek - 11:38

    🙂
    Nem találtam kész módszert rá. Manuálisan kell JavaScriptből töltögetni. Ami számomra picit kényelmetlen.

    Érdekesség még a formátumokon kívül, hogy bizonyos böngészők támogatják a filmek feliratozását is. (Sajnos az IE9 pont nem 😦 )

  1. 2011. május 23. hétfő - 14:40

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: