HTML5 Hap Pas Hapi: Integrimi i Videove

Autor: Skender Mustafi

Përmes formave (anglisht: canvas) të ndryshme që mund të kombinohen me HTML e që tani JQuerry format janë të standardizuara për HTML5, HTML mundëson integrimin e medieve të ndryshme si video, audio, foto, flash etj.. Më poshtë do të sqarojmë se si bëhet integrimi i medieve në një kodt HTML5 dhe atributet të cilat ky kod mbështetë dhe mund të integrohen.

Inegrimi i video materialeve

HTML5 për dallim nga versionet e mëparshme, mbështetë standard për integrimin e video materialeve në faqe interneti. Këtu nuk bëhet fjalë vetëm për thirrjen e video materialeve nga burime tjera si Youtube, por edhe për integrimin e video materialeve nga vetë serveri i faqes. Të gjithë shfletuesit eminentë momental si Google Chrome, Firefox, Internet Explorer, Safari, e Opera mbështesin këtë standard.

Etiketa standarde për integrimin e video materialeve është përcaktuar <video>. Në mënyrë që të mund të paraqisni një video material në faqe ju duhet të përcaktoni standardin <video> si dhe etiketën për burimin e video materialit <source>. Në këtë rast me rëndësi është që këto elemente bazë të mbështeten dhe nga atributet të cilat përcaktojnë se si materiali do të duket për vizitorin.

Atributet e rëndësishme për etiketën video janë:

height – përcakton lartësinë e video kornizës: height=”200″
width – përcakton gjerësinë e video kornizës: width=”220″
controls – shfaqë pullat për ndërveprim me video materialin: constrols
autoplay – përcakton që video fillon posa të jetë gati: <video controls autoplay>
loop – përcakton që video të përsëritet pasi që mbaron: <video controls autoplay loop>
muted – përcakton që video të jetë e heshtur: <video controls autoplay loop muted>
poster – përcakton vendosjen e një fotografie e cila qëndron për vizitorin derisa video të jetë gati ose/dhe derisa vizitori të pullën luaj: <video controls poster=”/images/w3html5.gif”>
preload – përcakton se di duhet video materiali të hapet derisa faqja hapet: <video controls preload=”none”> ose preload=”auto” ose preload=”metadata”
Shembull: <video width=”220″ height=”200″ controls></video>

Atributet e burimit të video materialit janë:

src – përcakton burimin: src=”film_i_vizatuar.mp4″
media – përcakton llojin e burimit: media=”screen and (min-width:320px)”
type – përcakton llojin: type=”video/mp4″
Shembull: <source src=”film_i_vizatuar.mp4″ type=”video/mp4″ src=”film_i_vizatuar.mp4″ media=”screen and (min-width:320px)”>

Ja një shembull i kodit të plotë për paraqitjen e video materialeve në faqe:

<video width=”220″ height=”200″ controls
<source src=”film_i_vizatuar.mp4″ type=”video/mp4″ src=”film_i_vizatuar.mp4″>
Shfletuesi juaj nuk mbështetë etiketën për paraqitjen e video materialeve. (kjo shkruhet meqë jo të gjithë shfletuesit mbështesin këtë standard dhe nëse standardi nuk mbështetet atëherë hapësira për paraqitjen e video materialit mbetet e zbrazët.)
</video>

Për momentin etiketa video mbështetë 3 video formate: MP4, WebM dhe Ogg ku vetëm Google Chrome mbështetë të tre formatet. Ja cili shfletues cilin format mbështetë:

Shfletuesi	MP4	WebM	Ogg
Internet Explorer 9+	PO	JO	JO
Chrome 6+	PO	PO	PO
Firefox 3.6+	JO	PO	PO
Safari 5+	PO	JO	JO
Opera 10.6+	JO	PO	PO

Një etiketë tjerët e rëndësishme, përveç <source> e cila kombinohet me video etiketën është edhe etiketa <track> e cila mundëson bashkëngjitjen e materialeve tekstuale të cilat duhet paraqitur gjatë luajtjes së video materialeve. Kjo etiketë për momentin mbështetet vetëm nga Internet Explorer, Google Chrome dhe Opera.

Atributet e etiketës <track> janë:

default – përcakton që materiali lejohet nëse përdoruesi nuk përcakton ndonjë material si më të përshtatshëm: <track default>
kind – përcakton llojin e tekstit dhe mbështetë këto parametra: captions, chapters, description, metadata dhe subtitles: <track kind=”subtitles”>
lable – përcakton titullin e dokumentit tekstual: <track label=”Albanian”>
src – përcakton burimin: <track src=”nentituj_sq.vtt”>
srclang – përckaton gjuhën e burimit. Ky atribut kërkohen nëse paraprakisht është përcaktuar kind=”subtitles”: <track srclang=”no”>
Shembull: <track src=”nentituj_sq.vtt” kind=”subtitles” srclang=”en” label=”Albanian” default>

Një etiketë ndihmëse e cila mund t’i bashkëngjitet kësaj etikete është <embed>. Kjo etiketë nëse vendoset në brendi të etiketës <video>, do të funksionojë vetëm në rast se burimi i etiketës video dështojë të funksionojë. Vendosja e etiketës në kod bëhet si në shembullin e më poshtëm:

Format indirekte të integrimit të video materialeve

Po them format indirekte meqë HTML5 nuk ka standard për këto mënyra të integrimit të video materialeve, por që kompani të ndryshme kanë themeluar standardet e tyre të cilat mbështesin integrimin e video materialeve, kështu që ne mund t’i shfrytëzojmë për t’i integruar videot të cilat dhe i lexojnë shfletuesit e njohur.

Formatet më të njohura të video materialeve janë:

Formati	Skeda
AVI	.avi
WMV	.wmv
MPEG	.mpg.mpeg
QuickTime	.mov
RealVideo	.rm.ram
Flash	.swf.flv
MP4	.mp4

Më poshtë do të paraqesim disa shembuj të mënyrave të paraqitjes së vide materialeve të cilat do të shfaqen tek shfletuesi përmes lexuesve të ndryshëm jostandard: