Share
I dag skal vi ta en titt på Popcorn.JS, et bibliotek fra Mozilla som gjør det veldig enkelt å manipulere en nettside basert på nåværende posisjon av en video. Dette lar deg lage rike "hypermedia" -opplevelser rundt videoinnholdet ditt.
Med Popcorn kan du vise informasjon om skuespillere som er på skjermen, eller vise Google Street View-kart over steder i videoen.
Ta en titt på demoversiden for å se hva vi skal oppnå - en blanding av bilder, Google Maps, Wikipedia, tagging, RSS-feeder, Facebook og webinnhold - alt i et 22 sekunders videoklipp.
Popcorn gjør video arbeid som Internett. Vi lager verktøy og programmer for å hjelpe utviklere og forfattere til å lage interaktive sider som supplerer video og lyd med rikt webinnhold, slik at kreasjonene dine kan leve og vokse på nettet.
Popcorn gir en samling av plugins for enkelt å trekke i eksterne data til skjermen. For eksempel, for å vise en utdrag fra Wikipedia-artikkelen om dronningen, vil du bruke denne lille utdraget:
popcorn.wikipedia (start: 12, end: 14, mål: 'wiki', src: 'http://en.wikipedia.org/wiki/Elizabeth_II', tittel: 'The Queen', numberofwords: 40);
Dette trekker i de første 40 ordene fra Dronningens Wikipedia-side inn i elementet med en ID av wiki. Den vises på skjermen på 12 sekunder, og forsvinner om 14 sekunder.
Du kan like enkelt vise et Google Map:
pop.googlemap (start: 10, end: 12, mål: 'kart', type: 'ROADMAP', plassering: 'England', zoom: 6);
Dette viser et Google Map of England i #kart på 10 sekunder, og forsvinner ved 12. Du kan stille inn typeinnstillingen til HYBRID, VEIKART, SATELLITT, TERRENG eller Street og vise mer nøyaktige kart ved å sette inn lat og lng (og for Street View, the overskrift og tonehøyde for mer nøyaktige bilder).
En fullstendig liste over tilgjengelige alternativer for Google Maps-pluginet finnes på Popcorn-siden.
Lag din filstruktur slik:
| index.html | css / | - style.css | js / | - popcorn.js | - script.js | img / | vid /
Innsiden index.html, skriv inn følgende basemal:
En titt på popcorn
Vi har en enkel HTML5-mal, med en § # side som vi skal bruke til å vise mesteparten av innholdet fra popcorn. De div # wikien vil bli brukt til å vise popcorndata fra Wikipedia - den eneste grunnen til at det blir sitt eget element er å hjelpe til med styling.
§ # hoved er hvor video sitter: Vi har spesifisert 3 videoformater:
Nedenfor er videoen § # tags hvor vi viser "tags" ved hjelp av popcorn.
Straks før avslutningen
Inne i din css / style.css fil, legg til i følgende grunnleggende styling. Det er ganske grunnleggende, og jeg vil ikke gå over det for denne opplæringen:
kropp font-family: sans-serif; farge: # 444; a: link, a: besøkt farge: orangeRed; tekst-dekorasjon: ingen; a: svever, a: aktiv farge: crimson; tekst-dekorasjon: understreke; #main width: 640px; flyte: venstre; margin: 0 0 0 10px; #tags border: 5px solid #eee; border-radius: 5px; polstring: 5px 10px; #tags en linjehøyde: 30px; vertikaljustering: topp; #side border: 5px solid #eee; border-radius: 5px; høyde: 405px; bredde: 390px; flyte: venstre; overløp: skjult; polstring: 10px; stilling: relativ; video, iframe border-radius: 5px; grense: 5px solid #eee; -webkit-bakgrunnsbilder: innhold; #wiki a color: # 444; skriftstørrelse: 20px; #wiki a + p margin: 5px 0 0; #webside bredde: 100%; høyde: 460px; #tags img width: 30px; høyde: 30px; footer clear: both; skriftstørrelse: 12px;
Lagre følgende filer i img / katalog - vi vil vise dem på siden med Popcorn:
(Bilder av dronningen og koppen te er i det offentlige området. Den kjekke mannen er meg.)
Høyreklikk og lagre de følgende tre videofilene til din vid / katalogen. De er alle de samme videoene, lagret i tre forskjellige formater:
vids / demo.webm
vids / demo.mp4
vids / demo.ogv
Popcorn støtter også videoer fra YouTube og Vimeo. Klikk på linkene for en demonstrasjon av pluginene.
Til slutt, inkludere Popcorn i prosjektet ditt ved å lagre følgende inn JS / popcorn.js:
http://popcornjs.org/code/dist/popcorn-complete.min.js
I et produksjonsmiljø anbefales det ikke egentlig å inkludere hele Popcorn-biblioteket med alle plugins, som vi gjør her. I stedet bruker du Popcorn Build Tool til å lage din egen versjon av biblioteket med bare de pluginene du trenger.
Innsiden JS / script.js inkludere følgende for å komme i gang med Popcorn:
Accentsconagua
document.addEventListener ("DOMContentLoaded", funksjon () var pop = Popcorn ('# demo_video', pauseOnLinkClicked: true); pop.play ();); Her lager vi en ny Popcorn-forekomst på #demo_video (IDen vi ga vår video element). Vi passerer også Popcorn the pauseOnLinkClicked argumentet slik at videoen er pauset når brukeren klikker en kobling.
Vi kaller da spille() Metode for å instruere Popcorn til automatisk å spille av videoen. Fjern denne linjen hvis du hellere vil vente på at brukeren eksplisitt treffer "Play".
Last opp siden i nettleseren din, og hvis videoen automatisk spilles, er du på rett spor!
Hvis du ser demo videoen gjennom igjen, vil du legge merke til den første Popcorn-hendelsen vi oppretter, er en "tag" på 1s som viser mitt navn, lenke og bilde. La oss lage det først, og vi legger til i hver hendelse som de oppstår, i kronologisk rekkefølge.
For å lage denne taggen bruker vi Popcorns innebygde Tag This Person-plugin. Hvis du ser på plugin-siden, ser du at plugin tar et objekt som et argument med følgende egenskaper som alternativer:
Under pop.play (); legg til følgende:
pop.tagthisperson (start: 1, target: 'tags', person: 'Dan Harper', bilde: 'img / danharper.jpg', href: 'http://danharper.me');
Det er veldig enkelt å jobbe med Popcorn!
Du vil legge merke til at vi ikke spesifiserer eksplisitt en slutt tid. I stedet stopper Popcorn plugin når videoen slutter. (Personlig vil jeg ha muligheten til å ha innholdet vedvarer etter at videoen er avsluttet, men Popcorn ser ikke ut til å tilby denne funksjonaliteten ennå).
Ta en titt på siden i nettleseren din, og du bør se at min etikett vises på 1s.
På 2 sekunder vises Nettuts + -logoen til siden av videoen, og forsvinner om 10 sekunder. Dette er like enkelt som å merke en person. Bildet plugin lar deg vise et bilde i et element.
Som alle Popcorn-plugins, bilde tar et objekt som et argument. bilde aksepterer følgende alternativer:
Å bruke dette pluginet; legg til følgende under .tagthisperson (...); begivenhet:
pop.image (start: 2, end: 10, target: 'side', href: 'http://net.tutsplus.com', src: 'img / nettuts.jpg');
Som du kan se bruker vi alle tilgjengelige alternativer, med unntak av tekst. Oppdater nettleseren din og prøv den! Logoen skal vises i sidelinjen mellom 2 og 10 sekunder.
Googlefeed er en av pluginene som virkelig viste meg potensialet for Popcorn. Gi den nettadressen til en RSS-feed, og den vil vise innleggene i en liten widget inne i elementet du angir.
I demovideoen vises den på 4 sekunder til siste 10 sekunders markering.
Googlefeed aksepterer følgende alternativer for tilpasning:
Med disse alternativene i tankene, la oss legge til plugin for våre Popcorn-hendelser:
pop.googlefeed (start: 4, end: 10, target: 'side', url: 'http://net.tutsplus.com/feed/');
Så lett, rett?
Facebook-plugin gjør det veldig enkelt å vise sosiale elementer fra Facebook til bestemte tider i videoen din. For eksempel, i et virkelighetseksempel, kan du invitere seerne til å Like deg på Facebook, eller dele kommentarer om showet - og få boksvisningen på skjermen i sanntid; som om ved magi;)
Dette pluginet inneholder mange alternativer, hvorav de fleste ikke er relevante for våre behov - viser en liknende boks - så for den fullstendige listen over alternativer, sjekk ut plugin-siden på Popcorn-siden.
Alternativene som angår oss, er imidlertid:
SOM [misligholde], Like-BOX, AKTIVITET, FACEPILE, DIREKTESTRØMMING etc. (valgfritt)som [standard] eller anbefale (valgfri)Vis vår Like-knapp på siden med følgende:
pop.facebook (start: 8, end: 10, target: 'side', href: 'http://net.tutsplus.com');
Oppdater siden, og Facebook Like-knappen skal dukke opp på 8 sekunder, og forsvinner med RSS-feed og Nettuts + bilde på 10 sekunder.
Dette blir så enkelt, din bestemor kunne gjøre det, riktig?
Merk: I testen fant jeg Facebook-knappen for å være ganske temperamentsfull og noen ganger vises før den kommer til å vises, eller forsvinner tidlig.
Om 10 sekunder vil vi vise et Google Map of England i 2 sekunder. Som du kanskje har gjettet, er det en app for det!
Google Maps-plugin-modulen lar deg vise hvilken som helst kart APIen tillater (Road, Satellite, Terrain, Hybrid eller Street View). Alternativene er som følger:
HYBRID [misligholde], VEIKART, SATELLITT, TERRENG eller Street (valgfri)* Du må oppgi enten a plassering eller en lat og lng
Så la oss ta med England-kartet på siden. Legg til følgende i skriptet ditt:
pop.googlemap (start: 10, end: 12, mål: 'side', type: 'ROADMAP', plassering: 'England', zoom: 6);
Hvorfor ikke prøve noen forskjellige alternativer - som å zoome på en bestemt bygning i Street View? Her er en til å begynne med:
pop.googlemap (start: 10, end: 12, mål: 'side', type: 'STREETVIEW', lat: 50.844537, lng: -1.081544, zoom: 2, overskrift: 145, tonehøyde: 1);
Neste i demonstrasjonen, på 12 sekunder, legger vi til en ny tagg for dronningen, og i sidebjeldet viser et bilde av henne, og inneholder noe innhold fra Wikipedia. Bildet og Wikipedia-innholdet forsvinner om 14 sekunder.
Vi har allerede gått over tagthisperson og bilde plugins, så implementering av disse burde være enkle. Hvorfor ikke prøve å gjøre disse biter selv? Fortsett, jeg venter.
Gjort det? Sliter? Eller bare for lat? Vel, her er svaret uansett:
pop.tagthisperson (start: 12, target: 'tags', person: 'The Queen', bilde: 'img / queen-large.jpg', href: 'http://royal.gov.uk'); pop.image (start: 12, end: 14, target: 'side', src: 'img / queen-large.jpg');
La oss nå se på Popcorns Wikipedia-plugin. Det tar noen alternativer å spesifisere hvilket innhold du vil ha, og hvor mye av det:
Med disse alternativene i tankene, prøv å lage denne biten selv. Pluginnavnet er wikipedia.
pop.wikipedia (start: 12, slutt: 14, mål: 'wiki', src: 'http://en.wikipedia.org/wiki/Elizabeth_II', tittel: 'The Queen', numberofwords: 40);
Jeg setter en egendefinert tittel for artikkelen som jeg helst vil vise tittelen 'The Queen' i stedet for 'Elizabeth II'. Vær også oppmerksom på at vi har satt inn mål til #wiki - som jeg nevnte tidligere, er dette bare for kosmetiske formål.
En av de siste delene av interaktivitet i demoen er utseendet på et bilde av en kopp te og den nye taggen av 'Tea' på 14 sekunder, og slutter med 16 sekunder.
Som vi har brukt begge tagthisperson og bilde plugins flere ganger allerede, vil jeg ikke bry meg om å forklare denne koden:
pop.tagthisperson (start: 14, target: 'tags', person: 'Tea', bilde: 'img / cup-of-tea.jpg', href: 'http://en.wikipedia.org/wiki/ Svart te' ); pop.image (start: 14, end: 16, target: 'side', href: 'http://en.wikipedia.org/wiki/Black_tea', src: 'img / cup-of-tea.jpg' );
Faktisk, hvorfor ikke prøv å bruke Popcorn's Flickr-plugin for å laste et bilde av en kopp te, i stedet for å laste en lokal med bilde.
Til slutt, på slutten av demonstrasjonsvideoen laster vi opp den offisielle Mozilla Popcorn-siden i en IFrame i #side. Dette er, som du kanskje regner med, oppnådd ved hjelp av en annen av Popcorns plugins - nettside. Dette pluginet tar bare noen få alternativer:
Så inkludert en iframe på siden er så enkelt som:
pop.webpage (start: 16, target: 'side', src: 'http://mozillapopcorn.org/');
Last opp siden i nettleseren din til finalen - hvorfor ikke ta en pose med popcorn for å nyte showet med? (ha ha).
Jeg håper virkelig du finner Popcorn så interessant som jeg gjør. Potensialet for dette er utrolig, og det kan virkelig presse grensene for det vi vurderer interaktivt innhold.
Quiz-show kan bruke dette til lett å gjøre det mulig for seere å spille sammen i nettleseren, magasinutstillinger kan invitere deg til å bli med på sosiale medier som Facebook, Twitter eller G +. Dokumentarer kan vise tilleggsinformasjon om hva som blir vist.
Eller et komplekst detektive kriminaldrama kan bruke nettleseren som detektivens notatblokk - legge til ledetråder, vitner, ofre og mistenkte på skjermen i sanntid.
Det er allerede en rekke prosjekter som inkorporerer Popcorn på en innovativ måte. Jeg kan ikke vente på å se hva fremtiden har.
En rekke biblioteker og søsterprosjekter er allerede oppskåret i Popcorn økosystemet. Mozilla har en alfa-trinns app for å lage Popcorn-innhold uten å måtte skrive kode, kalt Popcorn Maker, som vil være bra for banebrytende filmskapere som ønsker å våge seg inn i dette nye nettleserbaserte landet på nettet.
Andre prosjekter, som beskrevet på det offisielle nettstedet, inkluderer:
En fullstendig liste over Popcorn-plugins finner du her, eller for lat (jeg har merket dem vi har prøvd):
Merk: Hvis denne artikkelen er litt datert når du leser dette, kan pluginlisten ha vokst betydelig, så sjekk ut det offisielle nettstedet for en oppdatert liste!
