Share
Aujourd'hui, nous allons jeter un coup d'œil à Popcorn.JS, une bibliothèque de Mozilla qui permet de manipuler facilement une page Web en fonction de la position actuelle d'une vidéo. Cela vous permet de créer de riches expériences «hypermédia» autour de votre contenu vidéo..
Avec Popcorn, vous pouvez afficher des informations sur les acteurs actuellement à l'écran ou afficher des cartes Google Street View des lieux dans la vidéo..
Jetez un coup d'œil à la page de démonstration pour voir ce que nous allons réaliser - une combinaison d'images, Google Maps, Wikipedia, marquage, flux RSS, Facebook et contenu Web - le tout dans un clip vidéo de 22 secondes.
Popcorn permet à la vidéo de fonctionner comme sur le Web. Nous créons des outils et des programmes pour aider les développeurs et les auteurs à créer des pages interactives complétant la vidéo et l'audio avec un contenu Web riche, permettant à vos créations de vivre et de grandir en ligne..
Popcorn fournit une collection de plug-ins permettant d'extraire facilement des données distantes à l'écran. Par exemple, pour afficher un extrait de l'article de Wikipedia sur la reine, utilisez ce petit extrait:
popcorn.wikipedia (début: 12, fin: 14, cible: 'wiki', src: 'http://en.wikipedia.org/wiki/Elizabeth_II', titre: 'The Queen', numberofwords: 40);
Cela reprend les 40 premiers mots de la page Wikipedia de la reine dans l’élément avec un identifiant de wiki. Il apparaîtra à l'écran à 12 secondes et disparaîtra à 14 secondes..
Vous pouvez tout aussi facilement afficher une carte Google:
pop.googlemap (début: 10, fin: 12, cible: 'map', tapez: 'ROADMAP', emplacement: 'England', zoom: 6);
Ceci affiche une carte Google de l'Angleterre en #carte à 10 secondes et disparaît à 12. Vous pouvez régler le type sur HYBRIDE, FEUILLE DE ROUTE, SATELLITE, TERRAIN ou STREETVIEW et afficher des cartes plus précises en réglant la lat et lng (et pour Street View, le titre et pas pour des images plus précises).
Une liste complète des options disponibles pour le plugin Google Maps est disponible sur le site Popcorn..
Créez votre structure de fichier comme suit:
| index.html | css / | - style.css | js / | - popcorn.js | - script.js | img / | vid /
À l'intérieur index.html, entrez le modèle de base suivant:
Un coup d'oeil à Popcorn
Nous avons un modèle HTML5 simple, avec un section # side que nous utiliserons pour afficher la plupart du contenu de Popcorn. le div # wiki sera utilisé pour afficher les données Popcorn de Wikipedia - la seule raison pour laquelle il obtient son propre élément est de faciliter le style.
section # main est où le vidéo assis: nous avons spécifié 3 formats vidéo:
Ci-dessous la vidéo est section # tags où nous afficherons les "tags" en utilisant Popcorn.
Directement avant la fermeture
À l'intérieur de votre css / style.css fichier, ajoutez le style de base suivant. C'est assez basique, et je n'en parlerai pas pour ce tutoriel:
body font-family: sans-serif; couleur: # 444; a: lien, a: visité color: orangeRed; texte-décoration: aucun; a: survol, a: actif color: crimson; texte-décoration: souligné; #main width: 640px; float: gauche; marge: 0 0 0 10px; #tags border: 5px solid #eee; border-radius: 5px; rembourrage: 5px 10px; #tags a line-height: 30px; alignement vertical: en haut; #side border: 5px solid #eee; border-radius: 5px; hauteur: 405px; largeur: 390px; float: gauche; débordement caché; rembourrage: 10px; position: relative; video, iframe border-radius: 5px; bordure: 5px solide #eee; -webkit-background-clip: contenu; #wiki a color: # 444; taille de police: 20px; #wiki a + p marge: 5px 0 0; #webpage width: 100%; hauteur: 460px; #tags img width: 30px; hauteur: 30px; footer clear: les deux; taille de police: 12px;
Enregistrez les fichiers suivants dans le img / répertoire - nous les afficherons sur la page avec Popcorn:
(Les images de la reine et de la tasse de thé sont dans le domaine public. Ce beau garçon, c'est moi.)
Cliquez avec le bouton droit et enregistrez les trois fichiers vidéo suivants sur votre vid / annuaire. Ils sont tous la même vidéo, enregistrée dans trois formats différents:
vids / demo.webm
vids / demo.mp4
vids / demo.ogv
Popcorn prend également en charge les vidéos de YouTube et Vimeo. Cliquez sur les liens pour une démonstration des plugins.
Enfin, incluez Popcorn dans votre projet en enregistrant les éléments suivants dans js / popcorn.js:
http://popcornjs.org/code/dist/popcorn-complete.min.js
Dans un environnement de production, il n'est pas vraiment recommandé d'inclure la bibliothèque Popcorn complète avec tous les plugins, comme nous le faisons ici. À la place, utilisez l’outil de création de pop-corn pour créer votre propre version de la bibliothèque avec uniquement les plug-ins dont vous avez besoin..
À l'intérieur js / script.js inclure les éléments suivants pour commencer à utiliser Popcorn:
Accentsconagua
document.addEventListener ("DOMContentLoaded", function () var pop = Popcorn ('# demo_video', pauseOnLinkClicked: true); pop.play ();); Ici, nous créons une nouvelle instance Popcorn sur #demo_video (l’identité que nous avons donnée à notre vidéo élément). Nous passons aussi Popcorn le pauseOnLinkClicked argument de sorte que la vidéo est suspendue lorsque l'utilisateur clique sur un lien.
Nous appelons ensuite le jouer() méthode pour indiquer à Popcorn de lire automatiquement la vidéo. Supprimez cette ligne si vous préférez attendre que l'utilisateur clique de manière explicite sur "Lecture"..
Chargez la page dans votre navigateur et si la lecture de la vidéo est automatique, vous êtes sur la bonne voie.!
Si vous regardez à nouveau la vidéo de démonstration, vous remarquerez que le premier événement Popcorn que nous créons est un «tag» sur 1s affichant mon nom, mon lien et mon image. Créons cela en premier, et nous ajouterons chaque événement au fur et à mesure, par ordre chronologique..
Pour créer cette balise, nous allons utiliser le plugin intégré Tag This Person de Popcorn. Si vous regardez sur la page du plugin, vous verrez que le plugin prend un objet en tant qu'argument avec les propriétés suivantes comme options:
Au dessous de pop.play (); ajoutez ce qui suit:
pop.tagthisperson (début: 1, cible: 'tags', personne: 'Dan Harper', image: 'img / danharper.jpg', href: 'http://danharper.me');
Travailler avec Popcorn est vraiment simple!
Vous remarquerez que nous ne spécifions pas explicitement un fin temps. Popcorn arrêtera le plug-in à la fin de la vidéo. (Personnellement, j'aimerais que le contenu persiste une fois la vidéo terminée, mais Popcorn ne semble pas encore offrir cette fonctionnalité.).
Jetez un coup d'oeil à la page de votre navigateur et vous devriez voir mon tag apparaître à 1s.
Au bout de 2 secondes, le logo Nettuts + est affiché sur le côté de la vidéo et disparaît au bout de 10 secondes. C’est aussi simple que de marquer une personne. Le plugin Image vous permet d'afficher une image à l'intérieur d'un élément.
Comme tous les plugins Popcorn, image prend un objet comme argument. image accepte les options suivantes:
Pour utiliser ce plugin; ajoutez ce qui suit ci-dessous le .tagthisperson (…); un événement:
pop.image (début: 2, fin: 10, cible: 'côté', href: 'http://net.tutsplus.com' ', src:' img / nettuts.jpg ');
Comme vous pouvez le constater, nous utilisons toutes les options disponibles à l’exception de texte. Actualisez votre navigateur et essayez-le! Le logo doit apparaître dans la barre latérale entre 2 et 10 secondes..
Googlefeed est l'un des plugins qui m'a vraiment démontré le potentiel de Popcorn. Donnez-lui l'URL d'un flux RSS, et les messages seront affichés dans un petit widget à l'intérieur de l'élément que vous spécifiez..
Dans la vidéo de démonstration, il affiche au bout de 4 secondes jusqu'à la marque des 10 secondes..
Googlefeed accepte les options de personnalisation suivantes:
Avec ces options en tête, ajoutons le plugin à nos événements Popcorn:
pop.googlefeed (début: 4, fin: 10, cible: 'côté', url: 'http://net.tutsplus.com/feed/');
Si facile, à droite?
Le plugin Facebook permet d'afficher très facilement des éléments sociaux de Facebook à certains moments de votre vidéo. Par exemple, dans un exemple concret, vous pouvez inviter vos téléspectateurs à vous aimer sur Facebook ou partager leurs commentaires sur l'émission - et faire en sorte que la boîte s'affiche à l'écran en temps réel. comme par magie;)
Ce plugin contient beaucoup d'options, dont la majorité ne sont pas pertinentes pour nous - affichage d'une boîte de dialogue Like - donc pour la liste complète des options, consultez la page du plugin sur le site Popcorn..
Les options qui nous concernent, cependant, sont:
COMME [défaut], LIKE-BOX, ACTIVITÉ, FACEPILE, DIRECT etc. (optionnel)comme [défaut] ou recommander (optionnel)Affichez notre bouton J'aime sur la page avec les éléments suivants:
pop.facebook (début: 8, fin: 10, cible: 'side', href: 'http://net.tutsplus.com');
Actualisez la page et le bouton Facebook Like devrait apparaître au bout de 8 secondes et disparaître avec le flux RSS et l'image Nettuts + à 10 secondes..
Cela devient si facile, votre grand-mère pourrait le faire, à droite?
Remarque: lors de mes tests, j’ai trouvé que le bouton Facebook était assez capricieux et s’affiche parfois avant qu’il n’apparaisse, ou disparaisse tôt..
À 10 secondes, nous voulons afficher une carte Google de l'Angleterre pendant 2 secondes. Comme vous l'avez peut-être deviné, il y a Une application pour ça!
Le plugin Google Maps vous permet d’afficher tout type de carte que permet l’API (Route, Satellite, Terrain, Hybride ou Street View). Les options sont les suivantes:
HYBRIDE [défaut], FEUILLE DE ROUTE, SATELLITE, TERRAIN ou STREETVIEW (optionnel)* Vous devez fournir soit un emplacement ou une lat et lng
Alors, incluons la carte de l'Angleterre sur la page. Ajoutez les éléments suivants à votre script:
pop.googlemap (début: 10, fin: 12, cible: 'side', tapez: 'ROADMAP', emplacement: 'England', zoom: 6);
Pourquoi ne pas essayer différentes options, telles que le zoom sur un bâtiment spécifique dans Street View? En voici une pour commencer:
pop.googlemap (début: 10, fin: 12, cible: 'side', tapez: 'STREETVIEW', lat: 50.844537, lng: -1.081544, zoom: 2, cap: 145, pas: 1);
Ensuite, dans la démo, à 12 secondes, nous ajoutons un nouveau tag pour la reine et dans la barre latérale nous affichons une image de celle-ci et incluons du contenu de Wikipedia. Le contenu de l'image et de Wikipedia disparaît à 14 secondes.
Nous avons déjà passé le tagthisperson et image plugins, donc les implémenter devrait être facile. Pourquoi ne pas essayer de faire ces bits vous-même? Allez-y, je vais attendre.
C'est fait? En difficulté? Ou trop paresseux? Eh bien, voici la réponse quand même:
pop.tagthisperson (début: 12, cible: 'tags', personne: 'La reine', image: 'img / queen-large.jpg', href: 'http://royal.gov.uk'); pop.image (début: 12, fin: 14, cible: 'side', src: 'img / queen-large.jpg');
Jetons maintenant un coup d'œil au plugin Wikipedia de Popcorn. Quelques options sont nécessaires pour spécifier le contenu que vous souhaitez et son contenu:
Avec ces options en tête, essayez de créer vous-même ce bit. Le nom du plugin est Wikipédia.
pop.wikipedia (début: 12, fin: 14, cible: 'wiki', src: 'http://en.wikipedia.org/wiki/Elizabeth_II', titre: 'The Queen', numberofwords: 40);
Je crée un titre personnalisé pour l'article car je préfère afficher le titre «La reine» au lieu de «Elizabeth II». Notez également que nous avons défini le cible à #wiki - comme je l'ai mentionné plus tôt, ceci est purement cosmétique.
L’une des dernières pièces d’interactivité de la démo est l’apparition de la photo d’une tasse de thé et de la nouvelle étiquette «Tea» à 14 secondes et se terminant à 16 secondes..
Comme nous avons utilisé les deux tagthisperson et image plugins plusieurs fois déjà, je ne vais pas vous expliquer ce code:
pop.tagthisperson (début: 14, cible: 'tags', personne: 'thé', image: 'img / tasse-de-tea.jpg', href: 'http://en.wikipedia.org/wiki/ Thé noir' ); pop.image (début: 14, fin: 16, cible: 'side', href: 'http://en.wikipedia.org/wiki/Black_tea', src: 'img / cup-of-tea.jpg' );
En fait, pourquoi ne pas essayer d’utiliser le plug-in Flickr de Popcorn pour charger une image d’une tasse de thé au lieu d’en charger une image.
Enfin, à la fin de la vidéo de démonstration, nous chargeons le site officiel de Mozilla Popcorn dans un IFrame au #côté. Comme vous pouvez vous y attendre, ceci est réalisé en utilisant un autre plugin de Popcorn: la page Web. Ce plugin ne prend que quelques options:
Donc, inclure un iframe sur la page est aussi simple que:
pop.webpage (début: 16, cible: 'side', src: 'http://mozillapopcorn.org/');
Chargez la page dans votre navigateur pour la grande finale - pourquoi ne pas prendre un sac de maïs soufflé pour profiter du spectacle? (ha, ha).
J'espère vraiment que vous trouverez Popcorn aussi intéressant que moi. Ce potentiel est incroyable et peut vraiment repousser les limites de ce que nous considérons comme un contenu interactif..
Les émissions-questionnaires pourraient facilement permettre aux téléspectateurs de jouer avec leur navigateur, tandis que les magazines pourraient vous inviter à les rejoindre sur des sites de réseaux sociaux tels que Facebook, Twitter ou G +. Les documentaires peuvent afficher des informations supplémentaires sur ce qui est montré.
Sinon, un drame policier complexe pourrait utiliser votre navigateur comme bloc-notes du détective - en ajoutant des indices, des témoins, des victimes et des suspects à l'écran en temps réel..
Il existe déjà un certain nombre de projets incorporant Popcorn de manière innovante. J'ai hâte de voir ce que l'avenir nous réserve.
Un certain nombre de bibliothèques et de projets soeurs font déjà leur apparition dans l'éco-système Popcorn. Mozilla possède une application alpha-stage pour créer du contenu Popcorn sans écrire de code, appelée Popcorn Maker, qui conviendra parfaitement aux cinéastes à la pointe de la technologie souhaitant s'aventurer dans ce nouveau site Web basé sur un navigateur..
Les autres projets, détaillés sur le site officiel, comprennent:
Une liste complète des plugins Popcorn peut être trouvée ici, ou pour les paresseux (j'ai marqué ceux que nous avons essayés):
Remarque: si cet article est légèrement daté, la liste des plugins a peut-être considérablement augmenté, consultez le site officiel pour obtenir une liste à jour.!
