HMTL5 og video-tag

Heisann!

Bloggen min heter "Mitt IT-eventyr", og innimellom så føles tiden foran pc'en slik.
Som et eventyr á la Alice i Eventyrland som er blitt digitalisert.

Forleden dag fikk vi på skolen i oppgave å finne en av våre egne videoer og lage en html side med den som en del av den. Kordan vi valgte å gjøre det var opp til oss. Ukjent med utfordringene eg kunne komme til å støte på kastet eg meg over denne "enkle" oppgaven. Hele leksjonen på 5 ulike oppgaver skulle ikke ta meg mer enn kanskje en time, mente eg.

Eg startet med nullpunktet mitt, slik eg alltid gjør med standard html tagging for å lage meg en html fil og knytte den til en standard style.css fil. Alt slik kan du lese om i tidligere innlegg på denne bloggen.

Så bestemte eg meg for å bruke en video fra min iPhone4. Filformat .mov Først rotet eg meg inn på en runddans med <object> - taggen. Der alt viste seg å virke fint i browseren Google Chrome (på min maskin). Fortsatte testen med de 4 andre browserne eg bruker til slik testing og oppdager plutselig at dette ikke virker slik det var tiltenkt. Jaja... Vi får prøve på nytt.

De fem eg bruker er Google Chrome, Firefox, Internet Explorer, Safari og Opera.

Som sagt, eg skulle prøve noe annet. Så eg satt i gang med HTML5 sin <video> tag. Og en .mov fil. Eller quicktime format om du vil..
Før eg går videre vil eg du skal forstå at video, video redigering, formater og slikt er ikke daglig kost. Så eg satte i gang og laget siden med nytt mot.

Denne gangen var opplevelsen at videosnutten min ble vist frem "oppned", noe som var veldig frustrerende når eg skjønte at eg kanskje måtte filme en ny snutt. Så siden tanken min var at alt kan ordnes så fant eg en måte via CSS å snu den på! Og gleden over å ha klart det varte akkurat så lenge som det tar å innse at også 'play' knappen og alle andre knapper nå var på hodet.

Etter et desperat søk på google innså eg at det var mulig å lage en knapperad i javascript, men nå hadde eg allerede brukt så mye tid at eg ønsket ikke den biten i tillegg.
Så da ble det nytt forsøk og et tredje forsøk. Legg merke til at eg fremdeles roter med filer med .MOV format.
Lager det til slik eg tror det skal med både visning av feil og rett video, sjekker at alt fungerer i mine browsere og så legger eg det ut på serveren, kun for å oppdage at det er kun hjemme hos meg det fungerer.

Leser over leksjonen igjen, og begynner å innse at eg kanskje burde heller prøve å få et annet format på disse snuttene. Så en ny jakt starter, jakten på en converter. Som tidligere skrevet er ikke dette mitt største interessefelt (så langt), men en gang skal være den første.

Så nedlastingsraten i heimen økte sakte, men sikkert i takt med stressnivået.
Følgende convertere ble prøvd:

EasyHTML5 Video
MIRO Video Converter
Any Video Converter
Handbrake

og sist, men ikke minst...

VLC

Når eg hadde vært gjennom denne runden hadde eg konvertert begge snuttene til både .mp4 OG .ogg
Som er formater som skal virke bra med <video> - taggen.

Joda, det skaffet meg noen erfaringer, og eg har denne gangen fått testet ny kunnskap til gangs.
Fremdeles synes eg det minner om et eventyr, for i de fleste eventyr ender det godt. Det gjorde det også denne gang, trodde eg i går når eg slo av maskinen for å legge meg, nesten en time etter eg BURDE vært i seng.

Kun for å oppdage når eg kom på jobb i dag og skulle se på resultatet i en versjon av IE9. Jammen?Det virket jo..? Så klart skjønte ikke en amatør som meg dette. Der var ikke noe som tydet på at her var noen videoer. Eg husket å ha lest at eg burde legge inn en tekst/melding til brukeren i slike situasjoner.Men det hadde eg jo ikke gjort. Hallo? Det virket jo?
Så det er klart at det første eg gjorde når eg kom hjem var å rette opp den lille tabben. OG testet mot IE9.

Om DU har lyst å lage en html side med video så kan du lære om det her:
http://www.w3schools.com/html/html5_video.asp

Og der kan du også teste om browseren/nettleseren din takler dette.

Og her er videoen som eg KANSKJE burde sett FØR eg rotet meg inn i dette på egen hånd ;)



Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!