Archívum

Archive for 2011. április

HTML 5 – Video & Audio

2011. április 29. péntek 3 hozzászólás

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.

Kategóriák:HTML 5

HTML 5 – Start

2011. április 28. csütörtök 26 hozzászólás

HTML története

A HTML az angol HyperText Markup Language szavak rövidítése. Alapvetően egy leírónyelv, ami weboldalak készítéséhez használunk. A HTML szöveges állomány, amelyet akár egy egyszerű jegyzettömbbel is szerkeszthetünk. A 90 es évek óta 4 végleges változaton vagyunk túl, és most érkezik a HTML5 –ös változata, ami újraértelmezi a HTML-t. Mert immár nem „csak” egy markup leíróról tudunk beszélni, mint ami a HTML4-ig volt. Hanem egy komplett RIA (Rich Internet Application) platformról. Olyan nagy cégek álltak a HTML5 mögé, mint a Microsoft, Adobe vagy a Google. Ők látják, hogy előre mutató technológiáról van szó, ami a piac igényeit átformálja és átdolgozza. A HTML5nek ugyanis meg van az az előnye, hogy szabványos, platform független és nem bontja meg a webes koncepciót. Azaz nem kell külön plugint telepíteni ahhoz, hogy használjuk. Ha a böngésző ismeri a HTML5 szabványt, akkor jól fogja megjeleníteni a számunkra a tartalmat. Ráadásul immár gazdag tartalomról beszélhetünk.

De ne feledjük a HTML5 jelenleg még nincs kész, a szabványosítása még most is tart. Bár már nagyobb változások nem várhatók, de még végleges ajánlás nem készült el.

Ismerkedés a HTML5 alapjaival

Ismerjük meg a HTML5 alapjait, hogy miben hoz újdonságot az oldallá leírása szintjén. Vegyünk a példa kedvéért egy egyszerű oldalt. Általában egy oldalnak van headerje (fejléc) sidebarja (oldalsáv, ahol navigációs elemeket helyezhetünk el például) footerje (lábléce) valamint content (tartalom) része is.

Ezt HTML4 esetében div-ekkel oldottuk meg. Ugyanis speciálisan nem volt footer, header vagy épp article element.

image

Ez így extra munkával járt, hisz ezek gyakori elemek, és külön kellet mindet definiálnunk. A HTML5 tervezésénél viszont megvizsgáltak több millió web oldalt és az eredmény az lett, hogy a legtöbb oldalnál ezeket az elemeket használják. Ezért a HTML5 ezeket az elemeket nyelvi szinten támogatja. Van header, footer, nav, menu, article, section (stb) elementek. Ez a címkézési módszer nem csak azért jobb mert egyszerűbb mint a div-ek használata, de a böngészők is értelmezhetik, hogy milyen strukturális elemről van szó.

Tehát, ha a fentebbi elrendezést szeretnénk az oldalnak adni, nincs más dolgunk, mint a megfelelő elementeket használjuk.

Az előző példa HTML5 elmentekkel:

image

Építsük meg!

Ha HTML5 –ben kezdünk dolgozni, nagyon fontos, hogy az első sorban ezt jelezzük, kell az alábbi elemnettel. (Mint látható, egy DTD-vel Document Type Definitionnal határozzuk ezt meg. Ez biztosítja azt, hogy a böngésző szabványkövető módban értelmezze a weboldalt)

<!DOCTYPE html>              

Amennyiben ezt nem tennénk meg, akkor az oldalunk széteshet, ugyanis a böngésző ilyenkor egy úgynevezett quirks mode-ba kapcsol és magától próbálja értelmezni a kódolást, ami hibás megjelenítést eredményezhet.

Az oldal további részei a következőképpen néznek ki

<html>

<head>

<title>HTML5 Demo</title>

<style>

…

</style>

<body>

<header><h1>Hello HTML5</h1></header>

<nav><p>Menu</p></nav>

<section>

<p>Section</p>

    <article><p>Cikk 1</p></article>

    <article><p>Cikk 2</p></article>

</section>

<footer><p>Lábléc</p></footer>

</body>

</html>

 

A style rész jelenleg direkt ki van hagyva! (Pontozott rész értelemszerűen nem kell a kódba) Ha most betöltenénk az oldalt, akkor kb. csak egy ilyen egyszerű kinézetett kapnánk.

image

Ez így még nem megfelelő a számunkra. Ezt a stílusokkal tudjuk meghatározni. Sőt immár CSS3 támogatása is van az Internet Exporer 9-es változatnának. (A CSS3 újdonságaival később ismerkedünk meg) De írjuk meg az oldalunk egy alap stílusát. (Figyeljük meg, hogy nem adtuk meg a style-nál hogy miről is van konkrétan szó, csak annyit mondtunk, hogy stílus) Illesszük be az alábbi kódsort a <style> </style> element közé.

body {background-color:white; color: black; text-align:center;}

 

header, footer, nav, section, article {display:block;}

 

header {width:100%; background-color:yellow;}

 

nav {width:30%; background-color:orange;float:left;}

section {width:65%; background-color:SpringGreen ; float:right;}

article {width:70%; margin:2em 10%; background-color:turquoise;}

 

footer {width:100%; background-color:pink; clear:both;}

Látható, hogy immár a headernek, navnak és további elemnek direktbe adunk stílust.

Az oldal kinézete immár az elvárt elrendezést kapjuk.

image

A teljes kód:

<!DOCTYPE html>

<html>

<head>

<title>Basic styling of new structural tags</title>

<style>

body {background-color:white; color: black; text-align:center;}

 

header, footer, nav, section, article {display:block;}

 

header {width:100%; background-color:yellow;}

 

nav {width:30%; background-color:orange;float:left;}

section {width:65%; background-color:SpringGreen ; float:right;}

article {width:70%; margin:2em 10%; background-color:turquoise;}

 

footer {width:100%; background-color:pink; clear:both;}

</style>

<body>

<header><h1>Hello HTML5</h1></header>

<nav><p>Menu</p></nav>

<section>

<p>Section</p>

    <article><p>Cikk 1</p></article>

    <article><p>Cikk 2</p></article>

</section>

<footer><p>Lábléc</p></footer>

</body>

</html>

Header és Footer

A headerbe általában banner, oldal nevet, címet szoktunk belepakolni. Azt is mondhatnánk, hogy headerből vagy footerből elég egy is egy oldalra. De a HTML5 –nél akár több is lehet. Hogy hol van ennek haszna? Nagyon is sok helyen. Például, egy cikknek is lehet fejléce és lábléce.

<article> 

  <header> 

    <h1>Cikk 1</h1> 

    <p>2010. november 1</p> 

  </header> 

  <p>Tartalom</p> 

  <footer>Beküldő: Livesoft Kft.</footer> 

</article>


Ilyenkor a stílusban definiált beállításokhoz képest fog a számunkra megjelenni az oldal.

Elmenetek Internet Explorer 8-al

Fejlesztési szempontból fontos megemlíteni, hogy ha ezt az oldalt meg akarnánk nézni Internet Explorer 8 –al akkor egy széteset oldal kapnánk, ugyanis a 8-as Explorer a HTML5-öt nem támogatja. Így egy kerülő megoldást kell alkalmaznunk.

Ilyenkor az alábbi elemet kell beillesztenünk az oldalunk fejlécébe:

<!–[if IE]> 

<script> 

 document.createElement("header"); 

 document.createElement("footer"); 

 document.createElement("nav"); 

 document.createElement("article"); 

 document.createElement("section"); 

</script> 

<![endif]–>

Elavult elemek

A HTML5-ben közel 100 HTML címke van. De bizonyos elemek kikerültek a HTML 4.01 es változatához képest. Az alábbi elemeket mostantól kerüljük egy webes alkalmazás készítése során.

·         <acronim>

·         <applet>

·         <basefont>

·         <big>

·         <center>

·         <dir>

·         <font>

·         <frame>

·         <frameset>

·         <isindex>

·         <menu>

·         <noframes>

·         <s>

·         <strike>

·         <tt>

·         <u>

·         <xmp>

További újdonságok

A HTML5 rengeteg újítást hozott, nem csoda, hogy ezt a technológiát emlegetik a jövő RIA-jának. Nézzünk néhány lényegesebb újítást még

·         Új szöveges elemek Time, progress, meter,

·         Új tartalom beágyazó elemek: (figure, video, audio, source, canvas, mapaz)

·         Interaktivitást lehetővé tevő elemek: details, command, menu,

·         microdata, adatokat tudunk HTML-be ágyazni

·         HTML és JavaScript kapcsolata, események működése

·         Offline alkalmazások létrehozása

Ezen elemek közül megismerkedünk még néhánnyal.


Kategóriák:HTML 5