Share
Oggi daremo un'occhiata a Popcorn.JS, una libreria di Mozilla che rende molto facile manipolare una pagina web in base alla posizione corrente di un video. Ciò ti consente di creare esperienze "ipermediali" complete attorno ai tuoi contenuti video.
Con Popcorn, puoi visualizzare le informazioni sugli attori attualmente sullo schermo o mostrare le mappe di Google Street View nel video.
Dai un'occhiata alla pagina dimostrativa per vedere cosa otterremo - un mix di immagini, Google Maps, Wikipedia, tagging, feed RSS, Facebook e contenuti web - tutto in un video clip di 22 secondi.
Popcorn rende il video funziona come il web. Creiamo strumenti e programmi per aiutare gli sviluppatori e gli autori a creare pagine interattive che integrano video e audio con ricchi contenuti web, consentendo alle tue creazioni di vivere e crescere online.
Popcorn fornisce una raccolta di plug-in per estrarre facilmente i dati remoti sullo schermo. Ad esempio, per visualizzare uno snippet dall'articolo di Wikipedia sulla Regina, dovresti usare questo piccolo frammento:
popcorn.wikipedia (inizio: 12, fine: 14, obiettivo: 'wiki', src: 'http://en.wikipedia.org/wiki/Elizabeth_II', titolo: 'The Queen', numberofwords: 40);
Ciò attira le prime 40 parole dalla pagina Wikipedia di Queen nell'elemento con un ID di wiki. Apparirà sullo schermo a 12 secondi e scomparirà a 14 secondi.
Puoi facilmente visualizzare una mappa di Google:
pop.googlemap (inizio: 10, fine: 12, obiettivo: 'mappa', digitare: 'ROADMAP', posizione: 'Inghilterra', zoom: 6);
Questo visualizza una Google Map of England in #carta geografica a 10 secondi e scompare alle 12. È possibile impostare il tipo su IBRIDO, TABELLA DI MARCIA, SATELLITARE, TERRENO o VISTA STRADALE e visualizzare mappe più precise impostando il lat e lng (e per Street View, il intestazione e intonazione per immagini più accurate).
Un elenco completo delle opzioni disponibili per il plug-in di Google Maps è disponibile sul sito di Popcorn.
Crea la tua struttura di file in questo modo:
| index.html | css / | - style.css | js / | - popcorn.js | - script.js | img / | Vid /
Dentro index.html, inserisci il seguente modello base:
Uno sguardo a Popcorn
Abbiamo un semplice modello HTML5, con a sezione # lato che useremo per visualizzare la maggior parte dei contenuti da Popcorn. Il div # wiki sarà usato per visualizzare i dati Popcorn da Wikipedia - l'unica ragione per cui ottiene il proprio elemento è di aiutare nello styling.
sezione # principale è dove il video siede: abbiamo specificato 3 formati video:
Di seguito il video è sezione # tag dove mostreremo "tags" usando Popcorn.
Direttamente prima della chiusura
Dentro il tuo css / style.css file, aggiungere il seguente stile di base. È piuttosto semplice e non lo esaminerò per questo tutorial:
body font-family: sans-serif; colore: # 444; a: link, a: visited color: orangeRed; decorazione del testo: nessuna; a: hover, a: active color: crimson; decorazione del testo: sottolineatura; #main width: 640px; fluttuare: a sinistra; margine: 0 0 0 10 px; #tags border: 5px solid #eee; border-radius: 5px; imbottitura: 5px 10px; #tags a line-height: 30px; vertical-align: top; #side border: 5px solid #eee; border-radius: 5px; altezza: 405 px; larghezza: 390px; fluttuare: a sinistra; overflow: nascosto; imbottitura: 10px; posizione: relativa; video, iframe border-radius: 5px; border: 5px solid #eee; -webkit-background-clip: contenuto; #wiki a color: # 444; font-size: 20px; #wiki a + p margin: 5px 0 0; #webpage width: 100%; altezza: 460px; #tags img width: 30px; altezza: 30 px; footer clear: both; font-size: 12px;
Salva i seguenti file nel img / directory - li visualizzeremo sulla pagina con Popcorn:
(Le immagini della Regina e della tazza di tè sono di dominio pubblico.
Fai clic con il pulsante destro e salva i seguenti tre file video sul tuo Vid / directory. Sono tutti video uguali, salvati in tre diversi formati:
vids / demo.webm
vids / demo.mp4
vids / demo.ogv
Popcorn supporta anche video da YouTube e Vimeo. Fare clic sui collegamenti per una demo dei plugin.
Infine, includi Popcorn nel tuo progetto salvando quanto segue in JS / popcorn.js:
http://popcornjs.org/code/dist/popcorn-complete.min.js
In un ambiente di produzione, non è consigliabile includere la libreria completa di Popcorn con tutti i plugin, come stiamo facendo qui. Invece, usa lo strumento Popcorn Build per creare la tua versione della libreria con solo i plug-in necessari.
Dentro JS / script.js includere quanto segue per iniziare con Popcorn:
Accentsconagua
document.addEventListener ("DOMContentLoaded", function () var pop = Popcorn ('# demo_video', pauseOnLinkClicked: true); pop.play ();); Qui stiamo creando una nuova istanza di Popcorn #demo_video (l'ID che abbiamo dato al nostro video elemento). Passiamo anche a Popcorn pauseOnLinkClicked argomento in modo che il video venga messo in pausa quando l'utente fa clic su un collegamento.
Quindi chiamiamo il giocare() metodo per ordinare a Popcorn di riprodurre automaticamente il video. Rimuovi questa riga se preferisci che l'utente prenda esplicitamente "Riproduci".
Carica la pagina nel browser e se il video viene riprodotto automaticamente, sei sulla strada giusta!
Se guardi di nuovo il video demo, noterai che il primo evento Popcorn che creiamo è un "tag" a 1s che mostra il mio nome, link e immagine. Creiamo prima questo e aggiungeremo in ogni evento man mano che si verificano, in ordine cronologico.
Per creare questo tag, utilizzeremo il plug-in Tag This Person incorporato di Popcorn. Se guardi nella pagina del plugin, vedrai che il plugin accetta un oggetto come argomento con le seguenti proprietà come opzioni:
Sotto pop.play (); aggiungere il seguente:
pop.tagthisperson (start: 1, target: 'tags', person: 'Dan Harper', immagine: 'img / danharper.jpg', href: 'http://danharper.me');
Lavorare con Popcorn è davvero così facile!
Noterai che non specificiamo esplicitamente un fine tempo. Invece, Popcorn interromperà il plugin al termine del video. (Personalmente gradirei l'opzione di mantenere il contenuto persistente dopo che il video è terminato, ma Popcorn non sembra ancora offrire questa funzionalità).
Dai un'occhiata alla pagina nel tuo browser e dovresti vedere il mio tag apparire a 1s.
A 2 secondi, il logo Nettuts + viene visualizzato a lato del video e scompare dopo 10 secondi. Questo è altrettanto facile come taggare una persona. Il plug-in Immagine ti consente di visualizzare un'immagine all'interno di un elemento.
Come tutti i plugin per Popcorn, Immagine prende un oggetto come argomento. Immagine accetta le seguenti opzioni:
Per usare questo plugin; aggiungi quanto segue sotto .tagthisperson (...); evento:
pop.image (start: 2, end: 10, target: 'side', href: 'http://net.tutsplus.com', src: 'img / nettuts.jpg');
Come puoi vedere, stiamo utilizzando tutte le opzioni disponibili tranne testo. Aggiorna il tuo browser e provalo! Il logo dovrebbe essere visualizzato nella barra laterale tra 2 e 10 secondi.
Googlefeed è uno dei plugin che mi ha davvero dimostrato il potenziale di Popcorn. Dagli l'URL di un feed RSS e visualizzerà i post in un piccolo widget all'interno dell'elemento specificato.
Nel video dimostrativo viene visualizzato a 4 secondi, fino al segno dei 10 secondi.
Googlefeed accetta le seguenti opzioni per la personalizzazione:
Con queste opzioni in mente, aggiungiamo il plugin ai nostri eventi Popcorn:
pop.googlefeed (start: 4, end: 10, target: 'side', url: 'http://net.tutsplus.com/feed/');
Così facile, giusto?
Il plugin di Facebook rende molto facile visualizzare elementi social da Facebook in determinati momenti del tuo video. Ad esempio, in un esempio del mondo reale, potresti invitare i tuoi spettatori a "Mi piace" su Facebook, o condividere i loro commenti sullo show - e mostrare il riquadro sullo schermo in tempo reale; come per magia;)
Questo plug-in contiene molte opzioni, la maggior parte delle quali non sono rilevanti per le nostre esigenze: visualizzazione di una casella "Mi piace", quindi per l'elenco completo delle opzioni, controlla la pagina del plug-in sul sito di Popcorn.
Le opzioni che ci riguardano, tuttavia, sono:
PIACE [predefinito], LIKE-BOX, ATTIVITÀ, FACEPILE, TRASMISSIONE IN DIRETTA ecc. (opzionale)piace [predefinito] o raccomandare (opzionale)Visualizza il nostro pulsante Mi piace nella pagina con il seguente:
pop.facebook (start: 8, end: 10, target: 'side', href: 'http://net.tutsplus.com');
Aggiorna la pagina e il pulsante Mi piace di Facebook dovrebbe apparire a 8 secondi e scomparire con il feed RSS e Nets + l'immagine a 10 secondi.
Questo sta diventando così facile, tua nonna potrebbe farlo, giusto?
Nota: nei miei test ho trovato il pulsante di Facebook piuttosto irritante e talvolta viene visualizzato prima che appaia o scompaia presto.
A 10 secondi, vogliamo visualizzare una Google Map of England per 2 secondi. Come avrai intuito, c'è una app per quello!
Il plug-in di Google Maps ti consente di visualizzare qualsiasi tipo di mappa consentita dall'API (Road, Satellite, Terrain, Hybrid o Street View). Le opzioni sono le seguenti:
IBRIDO [predefinito], TABELLA DI MARCIA, SATELLITARE, TERRENO o VISTA STRADALE (opzionale)* Devi fornire uno a Posizione o un lat e lng
Quindi includiamo la mappa dell'Inghilterra sulla pagina. Aggiungi il seguente al tuo script:
pop.googlemap (inizio: 10, fine: 12, obiettivo: "lato", digitare: "ROADMAP", posizione: "Inghilterra", zoom: 6);
Perché non provare alcune opzioni diverse, ad esempio lo zoom su un edificio specifico in Street View? Ecco uno per iniziare:
pop.googlemap (inizio: 10, fine: 12, obiettivo: 'lato', digitare: 'STREETVIEW', lat: 50.844537, lng: -1.081544, zoom: 2, intestazione: 145, pitch: 1);
Di seguito, nella demo, a 12 secondi, aggiungiamo un nuovo tag per la Regina e nella barra laterale visualizziamo un'immagine di lei e includiamo alcuni contenuti di Wikipedia. L'immagine e il contenuto di Wikipedia scompaiono dopo 14 secondi.
Abbiamo già passato il tagthisperson e Immagine plugin, quindi implementarli dovrebbe essere facile. Perché non provi a fare quei pezzi tu stesso? Vai avanti, aspetterò.
Fatto? Lottando? O semplicemente troppo pigro? Bene, ecco la risposta comunque:
pop.tagthisperson (start: 12, target: 'tags', person: 'The Queen', immagine: 'img / queen-large.jpg', href: 'http://royal.gov.uk'); pop.image (inizio: 12, fine: 14, obiettivo: 'side', src: 'img / queen-large.jpg');
Ora diamo un'occhiata al plugin di Wikipedia di Popcorn. Ci vogliono alcune opzioni per specificare quale contenuto vuoi e quanto di esso:
Con queste opzioni in mente, prova a creare questo bit da te. Il nome del plugin è wikipedia.
pop.wikipedia (inizio: 12, fine: 14, obiettivo: 'wiki', src: 'http://en.wikipedia.org/wiki/Elizabeth_II', titolo: 'The Queen', numberofwords: 40);
Sto impostando un titolo personalizzato per l'articolo in quanto preferisco visualizzare il titolo "The Queen" invece di "Elizabeth II". Si noti inoltre che abbiamo impostato il bersaglio a #wiki - come ho detto prima, questo è puramente a scopo cosmetico.
Uno degli ultimi pezzi di interattività nella demo è l'apparizione di una foto di una tazza di tè e il nuovo tag di "Tè" a 14 secondi e termina a 16 secondi.
Come abbiamo usato entrambi tagthisperson e Immagine plugin più volte, non mi preoccuperò di spiegare questo codice:
pop.tagthisperson (inizio: 14, obiettivo: 'tag', persona: 'Tè', immagine: 'img / cup-of-tea.jpg', href: 'http://en.wikipedia.org/wiki/ Tè nero' ); pop.image (inizio: 14, fine: 16, obiettivo: 'side', href: 'http://en.wikipedia.org/wiki/Black_tea', src: 'img / cup-of-tea.jpg' );
Infatti, perché non provare a utilizzare il plugin Flickr di Popcorn per caricare un'immagine di una tazza di tè, invece di caricarne una locale con Immagine.
Infine, alla fine del video demo cariciamo il sito ufficiale di Mozilla Popcorn in un IFrame in #lato. Questo è, come ci si potrebbe aspettare, realizzato utilizzando un altro plug-in di Popcorn - pagina web. Questo plugin richiede solo alcune opzioni:
Quindi includere un iframe nella pagina è semplice come:
pop.webpage (start: 16, target: 'side', src: 'http://mozillapopcorn.org/');
Carica la pagina nel tuo browser per il gran finale: perché non prendi un sacchetto di popcorn per goderti lo spettacolo? (ha, ha).
Spero davvero che tu trovi Popcorn interessante come me. Il potenziale per questo è incredibile e può davvero spingere i limiti per ciò che consideriamo contenuto interattivo.
Gli spettacoli di quiz potrebbero usare questo per consentire agli spettatori di giocare facilmente nel loro browser, i programmi di riviste possono invitarli a unirsi a loro su siti di social media come Facebook, Twitter o G +. I documentari potrebbero visualizzare ulteriori informazioni su ciò che viene mostrato.
Oppure un complicato dramma poliziesco potrebbe usare il browser come appunto del detective: aggiungere indizi, testimoni, vittime e sospetti sullo schermo in tempo reale.
Esistono già numerosi progetti che incorporano Popcorn in modo innovativo. Non vedo l'ora di vedere cosa riserva il futuro.
Un certo numero di librerie e progetti gemelli stanno già emergendo nell'ecosistema Popcorn. Mozilla ha un'app alpha stage per la creazione di contenuti popcorn senza dover scrivere codice, chiamato Popcorn Maker che sarà perfetto per i creatori di film all'avanguardia che vogliono avventurarsi in questa nuova terra basata su browser sul Web.
Altri progetti, come dettagliato sul sito ufficiale, includono:
Un elenco completo di plugin per Popcorn può essere trovato qui, o per i pigri (ho segnato quelli che abbiamo provato):
Nota: se questo articolo è un po 'datato quando stai leggendo questo, l'elenco dei plugin potrebbe essere notevolmente cresciuto, quindi controlla il sito ufficiale per un elenco aggiornato!
