![\"Popcorn,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/12\/popcornjs_slider.jpg\")
<\/a>Copyright©Popcorn<\/em><\/p>\nOn se devait de tester cette remarquable biblioth\u00e8que javascript et au moins d’approcher les quelques fondamentaux qu’elle promeut et les libert\u00e9s qu’elle promet. C’est chose faite ! Certes, nous avons \u00e0 3WDOC, fait un survol rapide mais n\u00e9anmoins attentif de son potentiel notamment parce par sa seule existence et son dynamisme, Popcorn l\u00e9gitime deux choses : <\/p>\n
- \n
- L’usage de l’HTML5 et de jQuery pour r\u00e9aliser une narration enrichie et interactive<\/li>\n
- Cette framework \u00e9crit d\u00e9j\u00e0 de tr\u00e8s belles pages du Web en consacrant la multiplicit\u00e9 des narrations num\u00e9riques en s’appuyant sur les qualit\u00e9s propres au web que sont : l’agr\u00e9gation au d\u00e9triment de la recherche, la recommandation et le partage.<\/li>\n<\/ul>\n
Sur ce blog, nous avons fait l’\u00e9loge de quelques-unes des productions rendues possibles par PopCorn.<\/p>\n
La d\u00e9finition de PopCorn<\/b><\/p>\n
\nPopcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web. Popcorn.js is part of Mozilla’s Popcorn project.\n<\/p><\/blockquote>\n
Bon mais assez discut\u00e9, voyons d\u00e8s maintenant ce que le framework PopCorn a dans le citron num\u00e9rique. Un aspect a particuli\u00e8rement retenu notre attention. Car, dans tout projet Open Source qui se respecte, il est possible de d\u00e9velopper des fonctionnalit\u00e9s additionnelles sous la forme de plugin. On retrouve la filiation revendiqu\u00e9 de PopCorn avec jQuery.<\/p>\n
Pourquoi cet aspect plut\u00f4t qu’un autre ?<\/b>
\nCet aspect permet d’appr\u00e9cier deux choses :<\/p>\n- \n
- Tous les ingr\u00e9dients de contenu auxquelles les internautes comme les cr\u00e9ateurs souhaitent avoir acc\u00e8s. Les internautes pour s’informer, interagir… Les cr\u00e9ateurs pour en disposer au sein de leur cr\u00e9ation comme un levier de narration. Les besoins comme les utilisations sont donc infinis, puisque chaque nouvelle forme d’expression ou de contenu pr\u00e9sent sur le web peut \u00eatre agr\u00e9g\u00e9 via un plugin comme source potentiel de contenu.<\/li>\n
- Le mode d’ingestion de ces nouvelles informations. Le soin est donn\u00e9 \u00e0 la communaut\u00e9 de d\u00e9veloppeurs de favoriser la mise \u00e0 disposition de ce contenu sp\u00e9cifique via un plugin. L’expansion de PopCorn comme framework est donc permanente. Cette expansion est l’expression m\u00eame de la culture commune qui nait entre le monde du d\u00e9veloppement, du web et de la cr\u00e9ation audiovisuelle.<\/li>\n<\/ul>\n
C’est en substance, ce que dit le texte publi\u00e9 sur le site officiel de Popcorn.<\/p>\n
\nPopcorn.js can be used with almost any media type you can imagine, from HTML5 audio and video, to YouTube and Vimeo, to SoundCloud, etc. Popcorn.js also has plugins to allow content from popular web sites and services to be integrated easily, for example, Wikipedia, Twitter, Facebook, Google Maps, etc.<\/p>\n
Anything you can do on the web can be turned into a Popcorn.js plugin, and become part of a timeline-based web experience. Popcorn.js breaks video out of the box and allows media to fully interact with the rest of the web.\n<\/p><\/blockquote>\n
Test des plugins les plus significatifs<\/h4>\n
On va faire un essai sur les plugins les plus significatifs pour r\u00e9cup\u00e9rer de plate-forme tierce de publication genre facebook, twitter ou int\u00e9grer un feed RSS.<\/p>\n
La configuration est assez ais\u00e9e puisqu’il suffit de remplir avec vos propres param\u00e8tres afin d’acc\u00e9der \u00e0 votre page facebook, \u00e0 votre page twitter ou enfin au feed RSS de votre blog par exemple.<\/p>\n
Extrait du plugin facebook<\/b> <\/p>\n
\n\t.facebook({\n\t\thref: "http:\/\/www.facebook.com\/3wdoc",\n type: "FACEPILE",\n target: "facepilediv",\n width: 300,\n start: 10,\n end: 15\n })\n \n<\/pre>\nExtrait du plugin googlefeed<\/b> <\/p>\n
\n.googlefeed({\n start: 0,\n end: 15,\n target: "feed",\n\turl: "http:\/\/blog.3wdoc.com\/fr\/feed\/",\n title: "3WDOC",\n orientation: "Vertical"\n })\n<\/pre>\nExtrait complet du plugin twitter<\/b><\/p>\n
\n\n<script>\n document.addEventListener( "DOMContentLoaded", function() {\n var p = Popcorn( "#video" )\n .twitter({\n start: 5,\n end: 15,\n title: "3wdoc",\n src: "@3wdoc",\n target: "twitterdiv",\n })\n .twitter({\n start: 20,\n end: 45,\n title: "webdoc",\n src: "#webdoc",\n target: "twitterdiv"\n })\n .play();\n }, false);\n <\/script>\n<\/pre>\n\nDans ce dernier exemple de plugin, comme dans un plugin jQuery, le plugin PopCorn va attacher \u00e0 la video
#video<\/code>, un \u00e9v\u00e9nement en l’ occurrence l’affichage du feed twitter de 3WDOC puis ensuite une recherche sur le mot#webdoc<\/code><\/b><\/p>\nPour aller plus loin<\/h2>\n
- \n
- Popcorn.js | The HTML5 Media Framework
http:\/\/popcornjs.org\/<\/a><\/li>\n- Les Plugins Popcorn
http:\/\/popcornjs.org\/creating-plugins<\/a><\/li>\n- Pr\u00e9sentation de la librairie
http:\/\/mozillapopcorn.org\/popcornjs\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Copyright©Popcorn On se devait de tester cette remarquable biblioth\u00e8que javascript et au moins d’approcher les quelques fondamentaux qu’elle promeut et les libert\u00e9s qu’elle promet. C’est… <\/p>\n
- Les Plugins Popcorn
- Popcorn.js | The HTML5 Media Framework