Jeg skrev et pythonskript som skulle hente ned stillbilder fra en rekke forskjellige webkameraer som vegvesenet har gjort tilgjengelig på sine sider. Deretter skulle skriptet sette sammen stillbildene til en timelapsefilm.
Fra stillbilder til levende film
Vegvesenet opplyser at de ikke lagrer bildene, men laster opp nye til samme adresse hvert 5-10 minutt. Jeg satte derfor skriptet til å hente ned bildene hvert tidende minutt og deretter kombinere de med 25 bilder i sekundet. Etter at filmklippene var produsert ville jeg gjøre de tilgjengelig på en nettside og med HTML5 kom en ny videotag som passer perfekt.Siden er statisk og peker på samme filmklipp hele tiden. Skriptet genererer nye filmer hver morgen og lagrer de med samme filnavn.
Ingen forhåndsvisning av filmklippene på mobile enheter
Dette fungerte helt fint, men det skulle vise seg å være litt utfordrende for mobile enheter. I nettlesere på PC-er kunne jeg se et stillbilde av video, første ramme tenker jeg. Jeg hadde ikke på autoplay for jeg ønsket ikke at alle videoene skulle spille av samtidig. Men noe måtte være årsaken til at de ikke vises riktig på telefoner og nettbrett, bare en hvit bakgrunn. Jeg tok derfor noen skjermbilder av videoene og la de inn som et poster=”” parameter i videotaggen. Samtidig satte jeg preload=”” til metadata eller none, slik at siden ikke laster noe unødvendig, foruten stillbildene jeg hadde lagt inn.
Formatet på bildene prøvde jeg først i .png, for jeg hadde lest at det var nødvendig for mobile enheter. Men jeg forsøkte .jpg, ettersom de ble mer komprimert og det fungerte helt fint. Nå lastes siden raskt og fint på mobile enheter såvel som på en PC.
Utfordring med ny videokildefil med samme navn
En annen utfordring var at jeg ønsket å automatisk oppdatere videokilden med samme filnavn for at jeg skulle slippe å endre HTML-koden. Jeg fant ut at enkelte nettlesere, i alle fall Firefox, ville ikke slette videobufferen sin mellom hver gang siden oppdateres. Det fantes manuelle metoder og hvis nettleseren lukkes og åpnes på nytt ble bufferen slettet. Dette skulle vise seg å være en kjent feil hos Mozilla, som ennå ikke er fikset.
For å løse dette, fikk jeg skriptet til å generere et tidsstempel som parameter til adressen til videofilen, noe som ikke betyr noe for avspilling av videoklippet, men nettleseren behandler det som en unik fil og dermed slipper jeg bufferproblemet. Skriptet oppdaterer HTML-koden etter at filmklippene er produsert.
Koden til skriptet finnes på GitHub og en demo kan du se her.