Hvorfor (og hvordan) lage din egen YouTube videospiller?

  • 10.08.2008
  • Av Eivind Savio

At man kan implementere YouTube videoer på egen hjemmeside visste du sikkert, men visste du at du kan lage din egen YouTube videospiller?

Hvorfor skal jeg lage min egen YouTube videospiller, tenker du kanskje? Det er hovedsakelig tre grunner til det:

  1. Du kan selv bestemme utseende og funksjonalitet.
  2. Du kan få sporet brukene av videoene gjennom din egen webanalyse. Jeg har flere ganger nevnt at Google Analytics vil komme med noe som kalles handlingssporing (Event Tracking). Dette er foreløpig kun tilgjengelig for Google Analytics Beta-testere, men sporing av videoer er nettopp noe av det handlingssporing er ment for. Du vil nå kunne måle engasjement, og ikke bare sidevisninger, klikkstrøm og tid brukt på siden. Det er ikke sikkert tiden jeg brukte på videosiden din var på seeing av video, det kan godt hende at jeg bare hadde åpnet siden, lot den stå åpen, og deretter forlot den uten å ha sett en eneste video.
  3. Du kan spille av YouTube videoer i høy kvalitet på en enkel måte.

Under finner du min YouTube videspiller demonstrert. Jeg vurderte å vise noen av videoene som finnes om hvordan du kan lage din egen YouTube spiller, men de var så dørgende kjedelige at jeg i stedet har valgt å vise videoen til Coldplay - Viva La Vida, da denne fulgte meg på veien i sommer.

Etter at jeg skrev artikkelen har spilleren blitt oppdatert med flere funksjoner. Jeg slet lenge med å få volumkontrollen til å fungere, men det ser nå ut til at jeg har lykkes med dette. Andre funksjoner som jeg har programmert inn etter at artikkelen ble skrevet er spoling forover og bakover.

Hvordan lage din egen YouTube videospiller

For å kunne lage din egen videospiller må du ta i bruk YouTube sitt API. Har du intensjon om å kunne benytte egne knapper etc. slik jeg har gjort, eller spore videoene i Google Analytics senere, må du lage den basert på YouTube Chromeless Player. Denne løsningen gir deg full fleksibilitet til å lage egne knapper, menyer og spillelister.

Er det vanskelig å lage en YouTube videospiller?

Jeg er ingen programmerer og jeg har greid det, så da burde også andre greie det. Men - jeg klødde meg en del i hodet underveis.

Jeg kommer nå til å gjennomgå noen av utfordringene jeg hadde, hvordan jeg løste disse, og hvorfor jeg har lagd spilleren min som jeg har gjort. Jeg kommer ikke til å gå i detalj på det tekniske i denne omgang da dette finnes forklart på utviklersidene, og jeg vurderer å lage en oppfølgingsartikkel. På utviklingssidene til YouTube finner du et eksempel på en enkel Chromeless videospiller. Analytics Talk har en detaljert gjennomgang på hvordan du kan spore handlinger i Google Analytics basert på Chromeless eksempelet til YouTube, og disse dannet også utgangspunktet for utviklingen av min videospiller.

Om min videospiller

Målet med min videospiller var tre ting:

  1. Den skulle være enkel å implementere i artikler.
  2. Den skulle være forberedt på å kunne spore handlinger i Google Analytics.
  3. Den skulle være lett å bruke. Brukervennligheten gjenstår det litt på, dette er hovedsakelig knyttet til mine programmeringsevner.

Opprinnelig ønsket jeg å implementere videospilleren ved hjelp av AJAX, men på grunn av at jeg ikke fikk videoene til "å fyre av" uten ekstra klikking, gikk jeg bort fra denne metoden. Jeg har i stedet benyttet meg av en iframe-løsning, selv om jeg ikke er noe "glad i" iframes. Hovedproblemene mine var knyttet til funksjonen loadVideoById() og det å få javascriptet som laster avspilleren til å virke slik jeg ønsket med AJAX-løsningen.

Hvis du ser på eksemplene til YouTube og Analytics Talk, ser du at de enten laster videoen ved hjelp av klikk eller en nedtrekksmeny. Måten avspilleren lastes på er heller ikke veldig hensiktsmessig hvis du skal vise flere videoer på samme side. Bruk av iframe løste begge disse utfordringene for meg.

Utseendet på min spiller

Utseendet på min videospiller er en kombinasjon av HTML, CSS og selve videoen som jeg får levert fra YouTube. Avspillingsknappene er for eksempel stylede, uordnede lister.

Sliderne er en kombinasjon av stylede div og span. De horisontale sliderne viser avspilt tid, og hvor mye av videoen som er lastet inn. Disse er koblet mot funksjonene getCurrentTime() og getVideoBytesLoaded() som du finner i YouTube APIet.

Ideelt sett hadde det vært mulig å spole i filmen ved hjelp av en slider (slik som volumkontrollen), den viser kun avspilt tid, du har ingen mulighet til å spole frem eller tilbake med den. Spoling foregår ved hjelp av knapper. Det er er sikkert mulig å få til, men enn så lenge får det holde.

Forhåndsvisningsbildet som vises før du starter videoen henter jeg fra YouTube. Ut fra hva jeg vet lager YouTube tre forskjellige bildestørrelser fra videoene. Disse har navnene 0.jpg, 1.jpg og 2.jpg, hvor 0.jpg er det største bildet. Det største bildet er ikke brederen enn 320 piksler så jeg er nødt til å strekke det litt, noe som medfører at de blir litt kornete. Bildene finner du på YouTube på adressen http://img.youtube.com/vi/VideoID/0.jpg. Bildet til videoen i denne artikkelen henter jeg fra adressen http://img.youtube.com/vi/44xirQ55IgA/0.jpg.

Over forhåndsvisningsbildet har jeg lagt et gjennomsiktig bilde med en stor avspillingsknapp, samt Savio.no og YouTube logoen. Jeg har benyttet z-index for å få til dette. Ved å klikke på bildet gjemmes "avspillingsbildet", spilleren vises og videoen lastes og startes.

Avslutning

Om du finner en avspiller som kun kan spille av YouTube videoer for "snever", finnes det andre muligheter. JW FLV Media Player er et eksempel på en videospiller som det skal være mulig å implementere Google Analytics handlingssporing i, og som du kan spille av YouTube videoer i. Spilleren er gratis for ikke-kommersiell bruk, og koster ikke mye for kommersiell bruk.

Har du lagd en YouTube Chromeless videospiller, har kommentarer til spilleren min, har testet ut andre nettbaserte videospillere eller har andre meninger om video på nett, legg gjerne igjen en kommentar.

Oppdatering

(16.08.2008) Som du kanskje forstår av teksten, har denne blitt endret siden siden den først ble publisert. Etter mange sene kveldstimer har jeg løst de problemene jeg hadde, og flere funksjoner har blitt lagt til spilleren.

Siden jeg først publiserte artikkelen har spilleren blitt oppdatert med nye knapper, spoling forover og bakover, skjuling/visning av Lyd av/Lyd på, volumkontroll og skjuling/visning av Spill av/Pause.

Etter et tips på Kuttisme har jeg i etterkant lagt til muligheten til å spille av videoer i høy kvalitet (de som er tilgjengeliggjort i dette formatet). Begge videoene i dette innlegget er nå i høy kvalitet.

Som en digresjon til de sene kveldstimene har jeg tatt med en video til i artikkelen, The Chemical Brothers - Midnight Madness.

Om du skulle oppleve noen problemer med den nye spilleren, fint om du legger igjen en kommentar under.

Du kan følge kommentarer til denne posten med RSS. Du må ha javascript aktivert for å kunne kommentere. Tilbaketråkk er deaktivert.

Tags : , ,

  • Comments are closed
Til opplysning, så fungerer avspilleren helt fint i FF 3.01
Det har du helt rett i, takk for korreksjonen. Jeg har kun testet med Firefox på min stasjonære pc tidligere, men ser at det fungerer her på min bærbare nå.

Får starte opp min stasjonære etterpå og se om det er min Firefox-versjon på den som er problematisk, eller om det er min stasjonære pc som sliter.
Gode tips her! takk..
  • bjorn
  • 12.12.2008 11:51:07
Takk for tipsene, ja.

Kan man bruke event tracking til å sjekke hvor mye av videoen brukeren ser på? (f.eks. at man legger inn tracking hvert 10nde sekund i den avspilleren, det vil jo være en grei sak dersom man har full kontroll over den flash saken man lager) .. :)

- bjorn
Først, jeg tror at grunnen til at du spør om dette er at trackingen nå har en stor svakhet:

Hvis du navigerer deg bort fra nettsiden som videoen vises på (eks. bruker tilbakeknappen) vil det ikke bli registrert. Så selv om brukeren så 99 % av videoen, og deretter klikket tilbakeknappen, vil dette bli registrert som at brukeren så 0 sekunder.

Er det riktig forstått av meg?

Hvis det er det som er bakgrunnen for spørsmålet ville jeg sett på muligheten for å få registrert at brukeren navigerer seg bort fra nettsiden (har sett noen slike javascript, men ikke testet de ut), og logget dette som "stopp".

Tror ikke jeg ville forsøkt å logge hvert 10ende sekund.
  • bjorn
  • 15.12.2008 22:14:40
Hei Eivind, og takk for svar...

Vel, grunnen til at jeg spør er at jeg kunne tenkt meg å vite om brukeren ser mer enn f.eks. 3 minutter av en 4 minutters video. Det med hvert 10nde sec var bare et eksempel, det kan likesågreit legges inn et slags event som fyres etter 3 minutter som registrerer at videoen er sett.

Slik jeg har forstått det (har kikket litt rundt nå) så har man full kontroll over videoavspilleren, så da vil slikt være mulig ..

Ganske interessant dette egentlig, for nå kan man faktisk bruke YouTube som "lagringsplass" filformat-converter uten å noensinne besøke YouTube (man kan jo laste opp/ned/spille av osv. via eget grensesnitt).

- bjorn
Ah, sånn og forstå.

Det er fullt mulig å tracke når den besøkende forlater videoen (stoppknapp, video ferdig spilt eller forlater nettsiden). Undersøkte litt rundt det siste i går, og det skal kunne fungere rimelig greit. Det vil si at det dermed ikke bør være nødvendig å lage et script som fyrer av etter x-antall minutter (om jeg har forstått tankegangen din riktig).

Det som gjenstår da er å dykke litt ned i videodataene - har hverken sett eller lest noe om filtrering eller avansert segmentering av Event Tracking, så (enn så lenge?) må man gjøre en manuell jobb ser det ut til.

Man har full kontroll over videospilleren, begrensningene er egen kompetanse (eks. programmering) og vurdering av kost/nytte av de dataene man ønsker å samle inn. Det ligger også en begrensning i hvor mye data man kan samle inn per sesjon. Det står beskrevet til slutt på Google sin Event Tracking Guide.

XKlikk her for å flytte kommentarfeltet

Give Feedback