Share
Astăzi o să luăm o privire la Popcorn.JS, o bibliotecă de la Mozilla, care face foarte ușor să manipulezi o pagină Web bazată pe poziția actuală a unui videoclip. Acest lucru vă permite să creați experiențe bogate în "hypermedia" în jurul conținutului dvs. video.
Cu Popcorn, puteți afișa informații despre actorii care se afișează pe ecran sau puteți afișa hărți Google Street View ale locațiilor din videoclip.
Aruncați o privire la pagina Demo pentru a vedea ce vom realiza - un amestec de imagini, Google Maps, Wikipedia, etichetarea, fluxurile RSS, Facebook și conținutul web - toate într-un clip video de 22 de secunde.
Popcorn face ca videoclipul să funcționeze ca pe web. Creați instrumente și programe pentru a ajuta dezvoltatorii și autorii să creeze pagini interactive care să completeze materiale video și audio cu conținut web bogat, permițând creațiilor dvs. să trăiască și să crească online.
Popcorn oferă o colecție de plugin-uri pentru a trage cu ușurință date de la distanță pe ecran. De exemplu, pentru a afișa un fragment din articolul Wikipedia despre regină, ați folosi acest fragment mic:
popcorn.wikipedia (start: 12, end: 14, țintă: 'wiki', src: 'http://en.wikipedia.org/wiki/Elizabeth_II', titlu: 'The Queen', numberofwords: 40);
Acest lucru atrage primele 40 de cuvinte de pe pagina Wikipedia a Reginei în elementul cu un ID de wiki. Acesta va apărea pe ecran la 12 secunde și va dispărea la 14 secunde.
Puteți afișa la fel de ușor o hartă Google:
pop.googlemap (început: 10, sfârșitul: 12, țintă: "hartă", tip: "ROADMAP", locație: "Anglia", zoom: 6);
Acesta afișează o hartă Google a Angliei în #Hartă la 10 secunde și dispare la 12. Puteți seta setarea de tip la HIBRID, FOAIE DE PARCURS, SATELIT, TEREN sau VEDERE DE STRADA și afișați hărți mai precise prin setarea lat și LNG (și pentru Street View, rubrică și pas pentru imagini mai precise).
O listă completă a opțiunilor disponibile pentru pluginul Google Maps poate fi găsită pe site-ul Popcorn.
Creați structura fișierelor astfel:
| index.html | css / | - stil.css | js / | - popcorn.js | - script.js | img / | VID /
Interior index.html, introduceți următorul șablon de bază:
O privire la Popcorn
Avem un șablon HTML5 simplu, cu un # secțiunea laterală pe care o vom folosi pentru a afișa cea mai mare parte a conținutului de la Popcorn. div # wiki va fi folosit pentru a afișa date despre Popcorn de pe Wikipedia - singurul motiv pentru care devine elementul său propriu este de a ajuta la stil.
# secțiunea principală este în cazul în care video se află: am specificat 3 formate video:
Sub videoclip este Secțiunea # tag-uri unde vom afișa "etichete" folosind Popcorn.
Înainte de închidere
În interiorul tău css / style.css fișier, adăugați următoarele stil de bază. Este destul de bază și nu voi trece peste acest tutorial:
corp font-family: sans-serif; culoare: # 444; a: link, a: vizitat culoare: orangeRed; text-decoration: nici unul; a: hover, a: activ culoare: crimson; text-decorare: subliniere; #main width: 640px; plutește la stânga; margine: 0 0 0 10px; #tags border: 5px solid #eee; raza de graniță: 5px; padding: 5px 10px; #tags o line-height: 30px; vertical-aliniere: partea de sus; #side frontieră: 5px solid #eee; raza de graniță: 5px; înălțime: 405px; lățime: 390px; plutește la stânga; overflow: ascuns; padding: 10px; poziție: relativă; video, iframe border-radius: 5px; frontieră: 5px solid #eee; -webkit-background-clip: conținut; #wiki a culoare: # 444; font-size: 20px; #wiki a + p marja: 5px 0 0; #webpage lățime: 100%; înălțime: 460px; #tags img lățime: 30px; înălțime: 30px; footer clar: ambele; font-size: 12px;
Salvați următoarele fișiere în img / - le vom afișa pe pagina cu Popcorn:
(Imaginile reginei și ceașcă de ceai sunt în domeniul public. Acel om frumos e al meu.)
Faceți clic dreapta și salvați următoarele trei fișiere video la dvs. VID / director. Toate sunt același videoclip, salvate în trei formate diferite:
vids / demo.webm
vids / demo.mp4
vids / demo.ogv
Popcorn susține, de asemenea, videoclipuri de la YouTube și Vimeo. Faceți clic pe linkurile pentru o demonstrație a pluginurilor.
În cele din urmă, includeți Popcorn în proiectul dvs. salvând următoarele js / Popcorn.js:
http://popcornjs.org/code/dist/popcorn-complete.min.js
Într-un mediu de producție, nu este recomandat să includeți toată biblioteca Popcorn cu toate pluginurile, așa cum facem aici. În schimb, utilizați instrumentul Popcorn Build Tool pentru a vă crea propria versiune a bibliotecii, cu numai pluginurile de care aveți nevoie.
Interior js / script.js includeți următoarele pentru a începe cu Popcorn:
Accentsconagua
document.addEventListener ("DOMContentLoaded", funcție () var pop = Popcorn ('# demo_video', pauseOnLinkClicked: true); Aici creăm o nouă instanță Popcorn #demo_video (ID-ul pe care l-am dat video element). De asemenea, trecem prin Popcorn pauseOnLinkClicked astfel încât videoclipul să fie întrerupt atunci când utilizatorul face clic pe un link.
Apoi chemăm Joaca() pentru a instrui popcornul să redea automat videoclipul. Eliminați această linie dacă doriți mai degrabă să așteptați ca utilizatorul să lovească în mod explicit "Redare".
Încărcați pagina în browser și, dacă videoclipul se redă automat, sunteți pe pistă!
Dacă urmăriți din nou videoclipul demo, veți observa că primul eveniment din Popcorn pe care îl creăm este o "etichetă" la 1 secunde care afișează numele meu, linkul și imaginea. Să creăm asta mai întâi și vom adăuga în fiecare eveniment în ordine cronologică.
Pentru a crea această etichetă, vom utiliza pluginul Plug-in Tag This Person. Dacă priviți în pagina pluginului, veți vedea că pluginul ia un obiect ca argument, având ca opțiuni următoarele proprietăți:
De mai jos pop.play (); adăugați următoarele:
pop.tagthisperson (început: 1, țintă: "etichete", persoană: "Dan Harper", imagine: 'img / danharper.jpg', href: 'http://danharper.me');
Lucrul cu Popcorn este într-adevăr atât de ușor!
Veți observa că nu specificăm în mod explicit un Sfârșit timp. În schimb, Popcorn va opri pluginul când videoclipul se termină. (Personal, mi-ar plăcea opțiunea de a continua conținutul după terminarea videoclipului, dar Popcorn nu pare să ofere încă această funcție).
Uitați-vă la pagina din browser și ar trebui să vedeți eticheta mea la 1s.
La 2 secunde, sigla Nettuts + este afișată în partea laterală a videoclipului și dispare la 10 secunde. Acest lucru este la fel de ușor ca etichetarea unei persoane. Pluginul Image vă permite să afișați o imagine în interiorul unui element.
Ca toate pluginurile Popcorn, imagine ia un obiect ca argument. imagine acceptă următoarele opțiuni:
Pentru a utiliza acest plugin; adăugați următoarele sub .tagthisperson (...); eveniment:
pop.image (început: 2, final: 10, țintă: "partea", href: "http://net.tutsplus.com", src: 'img / nettuts.jpg');
După cum puteți vedea, folosim toate opțiunile disponibile, cu excepția pentru text. Reîmprospătați browserul și încercați! Logo-ul ar trebui să apară în bara laterală între 2 și 10 secunde.
Googlefeed este unul dintre pluginurile care mi-au demonstrat cu adevărat potențialul Popcorn. Dați-i adresa URL unui feed RSS și acesta va afișa postările într-un mic widget în interiorul elementului pe care îl specificați.
În videoclipul demonstrativ se afișează la 4 secunde, până la 10 secunde.
Googlefeed acceptă următoarele opțiuni pentru personalizare:
Având în vedere aceste opțiuni, să adăugăm pluginul la evenimentele Popcorn:
pop.googlefeed (început: 4, sfârșitul: 10, țintă: "partea", url: "http://net.tutsplus.com/feed/");
Atât de ușor, corect?
Pluginul Facebook face foarte ușor să afișeze elemente sociale de pe Facebook în anumite momente din videoclip. De exemplu, într-un exemplu din lumea reală, ați putea invita spectatorii dvs. să vă placă pe Facebook sau să vă împărtășiți comentariile lor despre spectacol - și să aveți afișarea casetei pe ecran în timp real; ca prin magie;)
Acest plugin conține o mulțime de opțiuni, majoritatea care nu sunt relevante pentru nevoile noastre - afișează o casetă Like - astfel încât pentru lista completă a opțiunilor, verificați pagina pluginului de pe site-ul Popcorn.
Opțiunile care ne îngrijorează totuși sunt:
CA [Mod implicit], LIKE-BOX, ACTIVITATE, FACEPILE, TRANSMITERE LIVE etc (opțional)ca [implicit] sau recomanda (Opțional)Afișează butonul "Like" din pagină cu următoarele:
pop.facebook (început: 8, sfârșitul: 10, țintă: "partea", href: "http://net.tutsplus.com");
Reîmprospătați pagina și butonul Facebook Like ar trebui să apară la 8 secunde și să dispară cu feedul RSS și imaginea Nettuts + la 10 secunde.
Acest lucru devine atât de ușor, bunica voastră ar putea să o facă, bine?
Notă: În testele mele am găsit butonul Facebook să fie destul de temperamental și uneori să apară înainte ca acesta să apară sau dispare devreme.
La 10 secunde, dorim să afișăm o hartă Google a Angliei timp de 2 secunde. După cum probabil ați ghicit, există o aplicatie pentru asta!
Pluginul Google Maps vă permite să afișați orice fel de hartă pe care API le permite (Road, Satellite, Terrain, Hybrid sau Street View). Opțiunile sunt următoarele:
HIBRID [Mod implicit], FOAIE DE PARCURS, SATELIT, TEREN sau VEDERE DE STRADA (Opțional)* Trebuie să furnizați fie a Locație sau A lat și LNG
Deci, să includeți harta Angliei pe pagină. Adăugați următoarele în scriptul dvs.:
pop.googlemap (început: 10, sfârșitul: 12, țintă: "lateral", tip: "ROADMAP", locație: "Anglia", zoom: 6);
De ce să nu încercați câteva opțiuni diferite - cum ar fi mărirea unei anumite clădiri în Street View? Iată unul de început:
pop.googlemap (început: 10, sfârșitul: 12, țintă: "lateral", tip: "STREETVIEW", lat: 50.844537, lng: -1.081544, zoom: 2, titlu: 145, pas: 1);
În continuare, în demo, la 12 secunde, adăugăm o nouă etichetă pentru Regină și în bara laterală o imagine a ei și include un conținut de pe Wikipedia. Conținutul imaginii și Wikipedia dispare la 14 secunde.
Am trecut deja peste tagthisperson și imagine plugin-uri, astfel încât punerea în aplicare a acestora ar trebui să fie ușor. De ce nu încercați să faceți singuri acele biți? Dă-i drumul, aștept.
Făcut-o? Incercand? Sau prea leneș? Ei bine, iată răspunsul oricum:
pop.tagthisperson (început: 12, țintă: "etichete", persoană: "The Queen", imagine: 'img / queen-large.jpg', href: 'http://royal.gov.uk'); pop.image (început: 12, sfârșitul: 14, țintă: "partea", src: 'img / queen-large.jpg');
Acum, să aruncăm o privire la pluginul Wikipedia al lui Popcorn. Este nevoie de câteva opțiuni pentru a specifica ce conținut doriți și cât de mult:
Având în vedere aceste opțiuni, încercați să creați singur acest bit. Numele pluginului este wikipedia.
pop.wikipedia (început: 12, sfârșitul: 14, țintă: 'wiki', src: 'http://en.wikipedia.org/wiki/Elizabeth_II', titlu: 'The Queen', numberofwords: 40);
Am stabilit un titlu personalizat pentru articol, aș prefera să afișez titlul "Regina" în loc de "Elizabeth II". De asemenea, rețineți că am setat ţintă la #wiki - după cum am menționat mai devreme, este vorba exclusiv de scopuri cosmetice.
Una dintre piesele finale de interactivitate în demo este apariția unei imagini cu o ceașcă de ceai și noua etichetă de "ceai" la 14 secunde și se încheie la 16 secunde.
Așa cum am folosit amândouă tagthisperson și imagine plugin-uri de mai multe ori deja, nu voi deranja explicarea acestui cod:
pop.tagthisperson (început: 14, țintă: "etichete", persoană: "Ceai", imagine: 'img / cup-of-tea.jpg', href: 'http://en.wikipedia.org/wiki/ Ceai negru' ); pop.image (start: 14, end: 16, target: 'side', href: 'http://en.wikipedia.org/wiki/Black_tea', src: 'img / cup-of-tea.jpg' );
De fapt, de ce nu încercați să folosiți pluginul Flickr de la Popcorn pentru a încărca o fotografie a unei cești de ceai, în loc să încărcați unul local cu imagine.
În final, la sfârșitul videoclipului demo, încărcăm site-ul oficial Mozilla Popcorn într-un IFrame din România #latură. Acesta este, după cum s-ar putea să vă așteptați, realizat utilizând o altă pagină a paginilor de tip Popcorn. Acest plugin are doar câteva opțiuni:
Așadar includerea unei iframe pe pagină este la fel de simplă:
pop.webpage (început: 16, țintă: "partea", src: "http://mozillapopcorn.org/");
Încărcați pagina în browserul dvs. pentru finala mare - de ce nu luați o geantă de popcorn pentru a vă bucura de spectacol? (ha, ha).
Sper că veți găsi Popcorn la fel de interesant ca și mine. Potențialul pentru acest lucru este incredibil și poate împinge cu adevărat limitele pentru ceea ce considerăm conținut interactiv.
Vizualizările de tip "Quiz" ar putea folosi acest lucru pentru a permite spectatorilor să se joace cu ușurință în browserul lor, iar emisiunile de reviste vă pot invita să vă alăturați pe site-uri de socializare precum Facebook, Twitter sau G +. Documentare ar putea afișa informații suplimentare despre ceea ce se afișează.
Sau o drama complexă a crimei detectivului ar putea folosi browserul tău ca detector de note - adăugând indicii, martori, victime și suspecți pe ecran în timp real.
Există deja o serie de proiecte care încorporează Popcorn într-un mod inovator. Nu pot să aștept să văd ce are viitorul.
O serie de biblioteci și proiecte soratice se dezvoltă deja în ecosistemul Popcorn. Mozilla are o aplicație alfa-stage pentru crearea conținutului de Popcorn fără a scrie cod, numit Popcorn Maker, care va fi grozav pentru producătorii de filme de ultimă oră care doresc să se aventureze în acest nou teren de pe web.
Alte proiecte, așa cum sunt detaliate pe site-ul oficial, includ:
O listă completă a pluginurilor Popcorn poate fi găsită aici sau pentru leneș (am marcat cele pe care le-am încercat):
Rețineți: dacă acest articol este ușor datat atunci când citiți acest lucru, lista pluginurilor s-ar putea să fi crescut în mod substanțial, așa că verificați site-ul oficial pentru o listă actualizată!
