Share
Vandaag gaan we kijken naar Popcorn.JS, een bibliotheek van Mozilla, die het heel gemakkelijk maakt om een webpagina te manipuleren op basis van de huidige positie van een video. Hiermee kunt u rijke 'hypermedia'-ervaringen rond uw video-inhoud creëren.
Met Popcorn kun je informatie weergeven over acteurs die momenteel op het scherm staan, of Google Street View-kaarten weergeven van locaties in de video.
Neem een kijkje op de demopagina om te zien wat we zullen bereiken - een mix van afbeeldingen, Google Maps, Wikipedia, tagging, RSS-feeds, Facebook en webinhoud - alles in een 22 seconden durende videoclip.
Popcorn laat video werken zoals het web. We maken tools en programma's waarmee ontwikkelaars en auteurs interactieve pagina's kunnen maken die video en audio aanvullen met rijke webinhoud, zodat uw creaties online kunnen leven en groeien.
Popcorn biedt een verzameling plug-ins om eenvoudig gegevens op afstand naar het scherm te trekken. Als u bijvoorbeeld een fragment van het Wikipedia-artikel over de koningin wilt weergeven, gebruikt u dit kleine fragment:
popcorn.wikipedia (start: 12, end: 14, target: 'wiki', src: 'http://en.wikipedia.org/wiki/Elizabeth_II', title: 'The Queen', numberofwords: 40);
Dit trekt de eerste 40 woorden van de Queen's Wikipedia-pagina in het element met een ID van wiki. Het verschijnt op het scherm na 12 seconden en verdwijnt na 14 seconden.
U kunt net zo gemakkelijk een Google Map weergeven:
pop.googlemap (start: 10, end: 12, target: 'map', type: 'ROADMAP', locatie: 'Engeland', zoom: 6);
Hierin wordt een Google Map of England weergegeven #kaart na 10 seconden en verdwijnt om 12 uur. U kunt de instelling van het type instellen op HYBRIDE, ROADMAP, SATELLIET, TERREIN of STREETVIEW en toon nauwkeurigere kaarten door de LAT en lng (en voor Street View, de titel en toonhoogte voor nauwkeurigere afbeeldingen).
Een volledige lijst met de beschikbare opties voor de Google Maps-plug-in is te vinden op de Popcorn-site.
Maak uw bestandsstructuur als volgt:
| index.html | css / | - style.css | js / | - popcorn.js | - script.js | img / | vid /
Binnen index.html, voer de volgende basissjabloon in:
Een blik op Popcorn
We hebben een eenvoudige HTML5-sjabloon, met een sectie # side die we zullen gebruiken om het grootste deel van de inhoud van Popcorn weer te geven. De div # wiki wordt gebruikt om Popcorn-gegevens van Wikipedia weer te geven - de enige reden waarom het zijn eigen element krijgt, is het helpen bij het stylen.
sectie # main is waar de video- zit: we hebben 3 videoformaten gespecificeerd:
Hieronder de video sectie #-tags waar we "tags" weergeven met Popcorn.
Direct voor de sluiting
In jouw css / style.css bestand, voeg de volgende basisstyling toe. Het is vrij eenvoudig en ik zal er niet overheen gaan voor deze tutorial:
body font-family: sans-serif; kleur: # 444; a: link, a: visited color: orangeRed; tekstdecoratie: geen; a: hover, a: active color: crimson; tekstdecoratie: onderstrepen; #main width: 640px; zweven: links; marge: 0 0 0 10px; #tags border: 5px solid #eee; grensradius: 5px; opvulling: 5px 10px; #tags a line-height: 30px; vertical-align: top; #side border: 5px solid #eee; grensradius: 5px; hoogte: 405px; breedte: 390 px; zweven: links; overloop verborgen; opvulling: 10px; positie: relatief; video, iframe border-radius: 5px; border: 5px solid #eee; -webkit-achtergrond-clip: inhoud; #wiki a color: # 444; lettertypegrootte: 20px; #wiki a + p margin: 5px 0 0; #webpagina width: 100%; hoogte: 460 px; #tags img width: 30px; hoogte: 30 px; voettekst clear: beide; lettergrootte: 12px;
Sla de volgende bestanden op in de img / directory - we zullen ze weergeven op de pagina met Popcorn:
(Beelden van de koningin en de kop thee zijn in het publieke domein. Die knappe kerel ben ik.)
Klik met de rechtermuisknop en sla de volgende drie videobestanden op in uw vid / directory. Ze zijn allemaal dezelfde video, opgeslagen in drie verschillende indelingen:
vids / demo.webm
vids / demo.mp4
vids / demo.ogv
Popcorn ondersteunt ook video's van YouTube en Vimeo. Klik op de links voor een demo van de plug-ins.
Voeg ten slotte Popcorn toe aan uw project door het volgende op te slaan js / popcorn.js:
http://popcornjs.org/code/dist/popcorn-complete.min.js
In een productieomgeving wordt het niet echt aangeraden om de volledige Popcorn-bibliotheek met alle plug-ins te gebruiken, zoals we hier doen. Gebruik in plaats daarvan de Popcorn Build Tool om uw eigen versie van de bibliotheek te maken met alleen de plug-ins die u nodig hebt.
Binnen js / script.js neem het volgende op om aan de slag te gaan met Popcorn:
Accentsconagua
document.addEventListener ("DOMContentLoaded", function () var pop = Popcorn ('# demo_video', pauseOnLinkClicked: true); pop.play ();); Hier maken we een nieuwe Popcorn-instantie aan #demo_video (de ID die we onze hebben gegeven video- element). We passeren ook Popcorn de pauseOnLinkClicked argument zodat de video wordt gepauzeerd wanneer de gebruiker op een link klikt.
We noemen dan de spelen() methode om Popcorn te instrueren om de video automatisch af te spelen. Verwijder deze regel als u liever wacht totdat de gebruiker expliciet op 'Afspelen' klikt.
Laad de pagina in uw browser en als de video automatisch wordt afgespeeld, bent u op de goede weg!
Als je de demovideo opnieuw bekijkt, zie je dat de eerste Popcorn-gebeurtenis die we maken een "tag" is bij 1s waarop mijn naam, link en afbeelding worden weergegeven. Laten we dat eerst maken en we zullen in elke gebeurtenis toevoegen wanneer deze zich voordoet, in chronologische volgorde.
Om deze tag te maken, gebruiken we Popcorn's ingebouwde Tag This Person-plug-in. Als u op de plug-in-pagina kijkt, ziet u dat de plug-in een object als argument neemt met de volgende eigenschappen als opties:
beneden pop.play (); voeg het volgende toe:
pop.tagthisperson (start: 1, target: 'tags', persoon: 'Dan Harper', afbeelding: 'img / danharper.jpg', href: 'http://danharper.me');
Het werken met Popcorn is echt zo eenvoudig!
U zult merken dat we niet expliciet een einde tijd. In plaats daarvan stopt Popcorn de plug-in wanneer de video eindigt. (Persoonlijk zou ik graag zien dat de inhoud blijft bestaan nadat de video is beëindigd, maar Popcorn lijkt deze functionaliteit nog niet aan te bieden).
Kijk eens naar de pagina in je browser en je zou mijn tag op nummer 1 moeten zien verschijnen.
Na 2 seconden wordt het logo van Nettuts + weergegeven aan de zijkant van de video en verdwijnt na 10 seconden. Dit is net zo eenvoudig als het taggen van een persoon. Met de plug-in Image kunt u een afbeelding binnen een element weergeven.
Zoals alle Popcorn-plug-ins, beeld neemt een object als een argument. beeld accepteert de volgende opties:
Om deze plug-in te gebruiken; voeg het volgende toe onder de .tagthisperson (...); evenement:
pop.image (start: 2, end: 10, target: 'side', href: 'http://net.tutsplus.com', src: 'img / nettuts.jpg');
Zoals je ziet, gebruiken we alle beschikbare opties behalve voor tekst. Ververs je browser en probeer het uit! Het logo moet in de zijbalk tussen 2 en 10 seconden worden weergegeven.
Googlefeed is een van de plug-ins die me echt het potentieel van Popcorn hebben bewezen. Geef het de URL naar een RSS-feed en het zal de berichten weergeven in een kleine widget binnen het element dat je opgeeft.
In de demovideo wordt deze weergegeven met een duur van 4 seconden tot de markering van 10 seconden.
Googlefeed accepteert de volgende opties voor aanpassing:
Met deze opties in gedachten, laten we de plug-in toevoegen aan onze Popcorn-evenementen:
pop.googlefeed (start: 4, end: 10, target: 'side', url: 'http://net.tutsplus.com/feed/');
Zo eenvoudig, toch?
De Facebook-plug-in maakt het heel gemakkelijk om sociale elementen van Facebook op bepaalde momenten in uw video weer te geven. In een voorbeeld uit de praktijk kunt u bijvoorbeeld uw kijkers uitnodigen om u op Facebook te liken, of hun opmerkingen over de show delen - en de box in realtime op het scherm laten weergeven; als bij toverslag;)
Deze plug-in bevat veel opties, waarvan de meeste niet relevant zijn voor onze behoeften - een Like-box weergeven - dus voor de volledige lijst met opties, kijk op de plugin's pagina op de Popcorn-site.
De opties die ons betreffen, zijn echter:
NET ZOALS [standaard], LIKE-BOX, ACTIVITEIT, FACEPILE, LIVESTREAM etc. (optioneel)net zoals [standaard] of adviseren (Optioneel)Toon onze Like-knop op de pagina met het volgende:
pop.facebook (start: 8, end: 10, target: 'side', href: 'http://net.tutsplus.com');
Ververs de pagina en de Facebook-achtige knop moet 8 seconden na elkaar verschijnen en verdwijnen met de RSS-feed en Nettuts + afbeelding na 10 seconden.
Dit gaat zo gemakkelijk, je oma kan het, goed?
Opmerking: tijdens mijn testen vond ik de Facebook-knop behoorlijk temperamentvol en wordt deze soms weergegeven voordat deze moet verschijnen of vroegtijdig verdwijnt.
Op 10 seconden willen we een Google Map of England weergeven gedurende 2 seconden. Zoals je misschien al geraden hebt, is er een app daarom!
Met de Google Maps-plug-in kunt u elk soort kaart weergeven die de API toelaat (Weg, Satelliet, Terrein, Hybride of Street View). De opties zijn als volgt:
HYBRIDE [standaard], ROADMAP, SATELLIET, TERREIN of STREETVIEW (Optioneel)* U moet een van beide opgeven plaats of een LAT en lng
Dus laten we de Engeland-kaart op de pagina opnemen. Voeg het volgende toe aan uw script:
pop.googlemap (start: 10, end: 12, target: 'side', type: 'ROADMAP', locatie: 'Engeland', zoom: 6);
Waarom probeert u niet een aantal verschillende opties uit, zoals het zoomen op een specifiek gebouw in Street View? Hier is er een om mee te beginnen:
pop.googlemap (start: 10, end: 12, target: 'side', type: 'STREETVIEW', lat: 50.844537, lng: -1.081544, zoom: 2, heading: 145, pitch: 1);
De volgende stap in de demo, na 12 seconden, voegen we een nieuwe tag toe voor de koningin en in de zijbalk een afbeelding van haar en bevatten we wat inhoud van Wikipedia. De inhoud van de afbeelding en Wikipedia verdwijnt na 14 seconden.
We zijn al over de tagthisperson en beeld plug-ins, dus het implementeren ervan moet eenvoudig zijn. Waarom probeer je die stukjes niet zelf te doen? Ga je gang, ik wacht.
Heb je het gedaan? Worstelen? Of gewoon te lui? Nou, hier is het antwoord toch:
pop.tagthisperson (start: 12, target: 'tags', person: 'The Queen', afbeelding: 'img / queen-large.jpg', href: 'http://royal.gov.uk'); pop.image (start: 12, end: 14, target: 'side', src: 'img / queen-large.jpg');
Laten we nu eens kijken naar Popcorn's Wikipedia-plug-in. Er zijn enkele opties nodig om aan te geven welke inhoud u wilt en hoeveel hiervan:
Met deze opties in gedachten, probeer dit bit zelf te maken. De plugin-naam is wikipedia.
pop.wikipedia (start: 12, end: 14, target: 'wiki', src: 'http://en.wikipedia.org/wiki/Elizabeth_II', title: 'The Queen', numberofwords: 40);
Ik stel een aangepaste titel in voor het artikel, omdat ik liever de titel 'De koningin' in plaats van 'Elizabeth II' laat zien. Merk ook op dat we de doelwit naar #wiki - zoals ik eerder al zei, dit is puur voor cosmetische doeleinden.
Een van de laatste stukjes interactiviteit in de demo is het verschijnen van een foto van een kopje thee en de nieuwe tag van 'Tea' op 14 seconden en eindigt op 16 seconden.
Zoals we beide hebben gebruikt tagthisperson en beeld plug-ins al verschillende keren, ik zal niet de moeite nemen om deze code uit te leggen:
pop.tagthisperson (start: 14, target: 'tags', person: 'Tea', afbeelding: 'img / cup-of-tea.jpg', href: 'http://en.wikipedia.org/wiki/ Zwarte thee' ); pop.image (start: 14, end: 16, target: 'side', href: 'http://en.wikipedia.org/wiki/Black_tea', src: 'img / cup-of-tea.jpg' );
Waarom zou je de Flickr-plug-in van Popcorn niet gebruiken om een foto van een kopje thee te laden, in plaats van een lokale afbeelding te laden met beeld.
Eindelijk, aan het einde van de demovideo laden we de officiële Mozilla Popcorn-site in een IFrame in #kant. Dit is, zoals je zou verwachten, bereikt met behulp van een andere popcorn-plug-ins - webpagina. Deze plug-in neemt slechts een paar opties in beslag:
Dus inclusief een iframe op de pagina is zo simpel als:
pop.webpagina (start: 16, target: 'side', src: 'http://mozillapopcorn.org/');
Laad de pagina in uw browser voor de grote finale - waarom zou u niet een zak popcorn nemen om van de show te genieten? (ha, ha).
Ik hoop echt dat je Popcorn net zo interessant vindt als ik. Het potentieel hiervoor is ongelooflijk, en het kan de grenzen verleggen voor wat we beschouwen als interactieve inhoud.
Quizshows kunnen dit gebruiken om kijkers eenvoudig mee te laten spelen in hun browser, tijdschriftshows kunnen u uitnodigen om mee te doen op sociale mediasites zoals Facebook, Twitter of G +. Documentaires kunnen aanvullende informatie weergeven over wat wordt getoond.
Of een complex misdaaddrama voor detectives zou je browser kunnen gebruiken als een notitieblok van de detective - in realtime aanwijzingen, getuigen, slachtoffers en verdachten aan het scherm toevoegen.
Er zijn al een aantal projecten waarin Popcorn op een innovatieve manier wordt geïntegreerd. Ik kan niet wachten om te zien wat de toekomst inhoudt.
Een aantal bibliotheken en zusterprojecten duiken al op in het ecosysteem van Popcorn. Mozilla heeft een alpha-stage app voor het maken van Popcorn-content zonder code te hoeven schrijven, genaamd Popcorn Maker, wat geweldig zal zijn voor de allernieuwste filmmakers die zich willen wagen aan deze nieuwe browsergebaseerde land op het web.
Andere projecten, zoals beschreven op de officiële site, zijn onder andere:
Een volledige lijst van Popcorn-plug-ins kan hier worden gevonden, of voor de lui (ik heb degene gemarkeerd die we hebben geprobeerd):
Let op: als dit artikel enigszins verouderd is wanneer je dit leest, is de pluginlijst mogelijk aanzienlijk gegroeid, dus bekijk de officiële site voor een actuele lijst!
