I forbindelse med lanseringen av Internet Explorer 9 lagde vi (IXD) en showcase i samarbeid med Filmweb for visning av film-trailere ved hjelp av Html5 teknologiene tilgjengelig i IE9. Den virker selvsagt også i andre moderne nettlesere. For visning av video brukes altså nettlesernes innebygde video støtte og av andre interessante detaljer kan det nevnes at designet kun bruker fire bilder (Filmweb logo, kinosal bakgrunnsbilde, høyre og venstre maske for ambilight effekt), resten er gjort med CSS, SVG og Canvas.
Selve navigeringen gjøres ved å bevege musepekeren mot høyre eller venstre i listevisningen, filmcover og tilhørende bilder scroller da lagvis. Avspillingsknappen som kommer når man holder musen over et filmcover er kun CSS (border-radius og mye box-shadow) basert på ett av eksemplene her Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius. Vi benytter også en “blur” effekt på coverbildet, den tredje av variantene beskrevet her: Blurring an image using the HTML 5 canvas.
Et par andre løsninger som kan være interessant å nevne er bruken av Quicksand for animert sortering av filmene (med tilhørende bilder) og vi bruker også en Javascript løsning for fler-kolonne design. Denne fler-kolonne løsningen gjør at hvis det er plass til det vil film coverene vises i flere linjer, de er da sortert først nedover og så mot høyre. Dette er nødvendig for å vise de “riktige” resultatene først, da flere resultater kommer når man scroller til høyre. Implementasjonen av dette var ikke så komplekst i dette tilfellet da alle filmcoverene har samme størrelse (en generell implementasjon av CSS3 multi-column spesifikasjonen i Javascript er langt værre), koden finnes i funksjonen IXD.multiColumn() i filen script.js.
Klikk på filmcover åpner selve trailervisningen, spesielt her (foruten at video vises direkte i Html5 uten plugins) er bruk av canvas-taggen for å lage en “ambilight” effekt der lyset i videoen stråler ut i omgivelsene og refleksjon av videoen i underkant av bildet. For “ambilight” effekten baserte vi oss på teknikken og scriptet beskrevet her, Ambilight for the “video” tag. Vi modifiserte dette for å virke over et bakgrunnsbilde (altså være gjennomsiktig) og la til speileffekten under.
Et kjent problem i en del av dagens nettlesere er at de begynner å laste ned alle (hele) trailer videoene når siden lastes. Det er mulig dette kan løses ved bruk av ‘preload’ attributtet på video elementet, eller i verste fall ved å kun generere video elementet for valgt trailer når bruker klikker på cover. Og ikke ha alle liggende i Html’en når siden lastes slik som nå.
Vi har ikke hatt så mange html-tekniske innlegg på Kuttisme, men vi håper dette er nyttig for noen av dere.
Har dere noen spørsmål eller kommentarer, fyr løs :-)
2 kommentarer til "Html5 video og canvas"
Noe man ofte glemmer når man eksperimenterer med tidlig implementasjoner av blant annet og box-shadow er ytelse. Var skeptisk, for i min Chrome for OS X gikk dette veldig hakket og seigt. Men i IE9 i Virtualbox, og Safari på en annen Mac her gikk det strålende.
Ser veldig bra ut. Var det Microsoft eller Filmweb som var oppdragsgiver?
Godt poeng om ytelse, den kan variere ganske mye for de nye teknologiene. Ytelse er jo også et problem det er vrient å teste/optimalisere effektivt for, i og med at nettlesere oppfører seg såpass forskjellig. En endring for å gjøre det raskere i en nettleser kan gjøre det tregere i en annen, forhåpentligvis blir forskjellene mindre ettersom teknologiene blir mer modne.
Det var Microsoft som var oppdragsgiver.