HTML 5 in dodajanje video posnetkov
Splet, kot ga poznamo danes, sodi v t. i. generacijo Splet 2.0. Prepoznamo jo po barvitih spletnih straneh, bolj ali manj nadležnih spletnih oglasih na njih ter bolj ali manj posrečenih oblikovalskih poskusih, kako narediti za uporabnika privlačen in uporaben dizajn. Splet 1.0 je bil v tem pogledu v kameni dobi, saj so bile spletne strani videti kot v grobe okvire nametano besedilo, v najboljšem primeru v spremstvu fotografije ali dveh. Splet 3.0, ki bo temeljil na tehnologiji HTML 5, pa prinaša pomembne novosti, predvsem pa končno prijateljuje z video vsebinami, ki jim današnje spletne strani niso bile kos.
Programski jezik HTML 5 je torej skupek kode, ki bo v prihodnosti sestavljala praktično vsako spletno stran. Novi standard je na voljo že danes, zato bi se spodobilo, da tehnični in računalniški zanesenjaki svoje strani prevedemo na novo platformo čim prej. HTML 5 namreč prinaša nekatere korenite spremembe v strukturo spletnih strani, s tem pa olajša uporabo različnih elementov na strani. Ustvarjalci novega standarda so namreč namenili posebno pozornost avdiovizualnim vsebinam, ki so bile doslej zapostavljene oziroma slabše podprte.
Odkar je namreč na voljo svetovni splet, spletni brskalniki prikazujejo besedilo na spletnih straneh. Mosaic je bil prvi brskalnik, ki je podprl prikazovanje spletne grafike, zato je bil med prvimi kiberščaki silno priljubljen. In na tej podlagi je splet temeljil praktično več desetletij. Zvočni in video posnetki so namreč vedno zahtevali pomoč različnih vtičnikov, če so želeli spletni brskalniki te vsebine tudi predvajati. Takšno podajanje vsebine, še posebej različnih spletnih pretočnih storitev, je kaj hitro postalo problematično, saj na svetu žal ni univerzalnega spletnega brskalnika in univerzalne platforme, kjer bi se prikazovale video vsebine, ustvarjene z različnimi kamerami in računalniki.
HTML 5 na področje spletne večpredstavnosti vnaša red. Spletne strani, združljive s HTML 5, bodo v novih spletnih brskalnikih znale predvajati tako zvočne kot video posnetke brez posredovanja različnih vtičnikov neodvisno od platforme. Prej ali slej bodo v ta nabor vključeni tudi brskalniki na mobilnih napravah. Tehnologija pa ima dobrodošle posledice tudi na drugi strani, na strani ustvarjalca, saj ta zdaj ne potrebuje več namenskega strežnika za posredovanje večpredstavnih vsebin, temveč lahko preprosto "aktivira" povezave do datotek v spletnem strežniku. Brskalnik jih bo prebral tako domače, kot je doslej počel z besedilom in fotografijami. Tako je zagotovljena ne le boljša interaktivnost, temveč je olajšano tudi delo z različnimi skripti.
Prav zato smo tokrat za vas pripravili vodnik, ki vam bo v pomoč pri dodajanju video vsebin na spletno stran s pomočjo standarda HTML 5. Ker se zavedamo, da se je vsaj v tem "prehodnem obdobju" treba držati združljivosti za nazaj, saj starejši brskalniki ne podpirajo HTML 5, bomo za vsak primer podali tudi "klasično" rešitev.
Ustvarjanje video datotek
Vse se torej začne pri vsebini. Kot rečeno, bomo na spletno stran dodali video vsebine, ker pa želimo ohraniti združljivost za nazaj, to pomeni, da bomo morali na začetku ustvariti dve različici video posnetka. K sreči se nam s samim kodiranjem spletne strani ne bo treba prav veliko ukvarjati, saj bo to z našo pomočjo uredil priročen programček EasyHTML5Video, ki domuje na naslovu www.easyhtml5video.com, njegove storitve pa so za nekomercialno rabo brezplačne. Za urejanje video zapisa datotek priporočamo uporabo še enega brezplačnega orodja, ki sliši na ime MiniCoder (najdete ga na spletnem naslovu www.videohelp.com/tools/MiniCoder). Potem ko smo namestili program MiniCoder, velja zagnati njegovo posodobitev, da iz spleta prenese morebitne nove različice kodirnikov. Program podpira hkratno kodiranje večjega števila datotek, če se bomo morebiti odločili za takojšnjo pretvorbo več datotek.
V našem primeru imamo datoteko v video zapisu .mov, za katero velja, da skoraj vsi spletni za njeno predvajanje zahtevajo namestitev vtičnika. Zato jo bomo najprej "prevedli" v precej bolj razširjen zapis MPEG4 z zvočnim kodiranjem MP3. Kot kodirnik smo izbrali vse bolj priljubljeni X.264 in datoteko zapisali v zapis MP4. Zvočni zapis pa bo v MP3 obliko spravil kodirnik Lame MP3. Pasovno širino lahko nastavljamo poljubno, zavedati se moramo le, da bodo višje pasovne širine pomenile večje datoteke in torej večje breme za spletni strežnik, pri uporabnikih s slabšo povezavo v splet pa tudi zatikajočo se uporabniško izkušnjo. Zato z vrednostmi ne gre pretiravati, mi smo, denimo, nastavili vzorčenje 700 kbps za video in 128 kbps za zvočni del zapisa. Če imamo na spletnem strežniku omejen prostor ali pa želimo sami omejiti velikost ustvarjene datoteke, v programu MiniCoder preprosto nastavimo mejno vrednost in bo že sam prilagodil nastavitve zapisa.
Izbiramo lahko med različnimi video in avdio kodirniki. Zaradi kar najboljše združljivosti z različnimi brskalniki smo izbrali tiste najbolj razširjene, kombinacijo MP4/MP3.
Zdaj bomo postopek ponovili za pripravo posnetka Ogg Theora. Ob izbiri možnosti Theora se nam opazno zmanjšajo možnosti urejanja tako v video kot avdio delu, še vedno pa lahko izbiramo pasovno širino ali ciljno velikost datoteke. Ko smo enkrat našli nastavitve, s katerimi smo najbolj zadovoljni, jih velja shraniti kot prednastavljene vrednosti, saj nam bo to pri večji količini video posnetkov prihranilo kar nekaj časa.
Urejanje datoteke HTML
Potem ko smo ustvarili vse potrebne video datoteke, se lahko lotimo urejanja datoteke HTML, ki vsebuje podatke o vsebini spletne strani. Prejšnji standardi HTML so od nas zahtevali dolge in na trenutke zmedene oznake tipa <!DOCTYPE>, HTML 5 pa zahteva vsega glavo z oznako <!DOCTYPE html> ter podatek o uporabi vrste jezika in kodiranja pisave (v našem primeru sta to angleščina in utf-8). Brskalniki, ki ne podpirajo tehnologije HTML 5, bodo postreženi na klasični način, sodobnežem pa bomo hitro pokazali, katero video vsebino naj predvajajo z drugo datoteko HTML.
Zaradi preglednosti si velja že na domačem disku popredalčkati vsebine, saj bo pozneje manj zmede pri prenosu vsebin v spletni strežnik. Predlagamo, da gredo datoteke HTML v korenski imenik, video posnetkom pa namenimo mapo Video, kjer jih bomo hitro našli. Brskalniku, ki podpira HTML 5, je kazanje poti do video posnetka otročje lahko, vse, kar moramo dodati v datoteko HTML, je oznaka <video> in parameter src z označeno potjo do datoteke. Seveda konec vnosa končamo z ukazom </video>.
V spletnem brskalniku se nam bo prikazala prva sličica video posnetka, žal pa se video ne bo začel samodejno predvajati, niti ga ne bomo mogli klikniti in zagnati. Zato moramo v datoteki HTML prej dopolniti vnosno polje pri video posnetku in omogočiti upravljanje videa. To storimo tako, da v vrstico o videu vnesemo parametra autoplay in controls. Prvi bo sprožil predvajanje videa takoj, ko bo brskalnik prepričan, da ima dovolj predpomnilnika, drugi pa bo videu dodal osnovne možnosti upravljanja (predvajaj, ustavi, pavza ...).
Video ukazi v HTML 5
Standard HTML 5 v navezi z vrstico <video> podpira različne lastnosti, ki jih dodamo video posnetku. Prikazane so v tabeli, pri čemer velja, da je zadnje tri moč uporabiti le ob souporabi ukaza <source>.
Nekateri brskalniki še vedno ne podpirajo prikaza MPEG4 video datotek, zato smo se odločili, da med video vire dodamo še datoteko OGG. Spremembe so vidne v naši datoteki HTML, da bi brskalnikom še dodatno olajšali delo, pa smo vrsto datotek označili s parametroma type=''video/mp4'' in type=''video/ogg''. Za uporabo ukaza type smo seveda morali prej uporabiti ukaz <source>. Vsi video ukazi vrste <source> se morajo zvrstiti med ukazoma <video> in </video>.
Tako oblikovana datoteka HTML bo omogočila predvajanje video posnetka v večini spletnih brskalnikov. Brskalnik bo namreč sistematsko pregledal seznam video posnetkov in začel predvajati tistega, ki ga prvega spozna. Če bi radi, da vaša spletna stran z videom ugaja tudi uporabnikom naprav z logotipom ugriznjenega jabolka in operacijskim sistemom iOS, vam svetujemo, da med video vire najprej postavite video zapise, kodirane v zapisu MPEG4.
Dodajanje sporočil o nezdružljivosti ali fotografij
Seveda se tehnično napredni uporabniki večkrat čutimo poklicane, da o novostih izobražujemo vse druge. Za naš primer se torej spodobi, da uporabnike, ki ne uporabljajo najsodobnejših različic spletnih brskalnikov, na to tudi opozorimo. Datoteko HTML bomo zato dopolnili tako, da bo tem uporabnikom ob nezmožnosti predvajanja video posnetka izpisala sporočilo o nadgradnji. To preprosto storimo tako, da na konec seznama video posnetkov vnesemo poljubno besedilo.
Precej uporabna možnost je tudi dodajanje fotografije, ki bo prikazana med nalaganjem video posnetka oziroma do trenutka, ko uporabnik s klikom požene video. Tudi slednje je otročje lahko opravilo, saj le najdemo sliko, ki nam je všeč, jo obrežemo na približne ali natančne mere video posnetka in shranimo v zapisu JPG ali PNG. Ni nam treba drugega, kot da uporabimo razširjen video ukaz poster, v našem primeru poster=''image/uvodna-fotka.jpg''.
Tako opremljena spletna stran bo hitro in enostavno prikazala video posnetek v zadnjih različicah spletnih brskalnikov Chrome, Firefox in Internet Explorer. Zadnji sicer še ne podpira prikaza izbrane fotografije pred predvajanjem video posnetka (ukaza poster), to pa samo dokazuje, da ima tudi standard HTML 5 pred seboj še nekaj dela, preden bo postal univerzalna rešitev spleta 3.0 za predvajanje video vsebin.
Sestavljanje datotek HTML 5 in nalaganje vsebin v splet
Programček Easy HTML5 Video, ki je na voljo za platformi MAC in Windows, vsebuje preprostega čarovnika. Ta bo video posnetke s pomočjo HTML 5 kode naložil na spletno stran v vsega nekaj klikih. Čarovnik namreč pozna le tri korake.
Najprej vanj s tehniko "povleci in spusti" naložimo video posnetke, ki jih želimo objaviti v spletu. Zatem nam čarovnik ponudi vklop različnih funkcij videa ter enostavno izbiro prve fotografije. Ob strani je prikazana tudi združljivost posameznih vrst video posnetkov s posameznimi spletnimi brskalniki.
Zagon programa bo sprožil ustvarjanje tako s HTML 5 združljive datoteke HTML kot tudi treh vrst video datotek (oziroma manj, če smo možnosti združljivosti okrnili), in sicer MP4 ter OGG za HTML 5 in MP4 Flash videa za starejše brskalnike.
Že korak zatem nam program ponudi objavo vsebin v spletu, kamor vnesemo podatke za dostop do spletnega strežnika. Pritisnemo na gumb Publish (Objavi) in že smo končali.
