Popcorn, HTML5, framework – une librairie jQuery pour les médias

On se devait de tester cette remarquable bibliothèque javascript et au moins d’approcher les quelques fondamentaux qu’elle promeut et les libertés qu’elle promet. C’est chose faite ! Certes, nous avons à 3WDOC, fait un survol rapide mais néanmoins attentif de son potentiel notamment parce par sa seule existence et son dynamisme, Popcorn légitime deux choses :

L’usage de l’HTML5 et de jQuery pour réaliser une narration enrichie et interactive
Cette framework écrit déjà de très belles pages du Web en consacrant la multiplicité des narrations numériques en s’appuyant sur les qualités propres au web que sont : l’agrégation au détriment de la recherche, la recommandation et le partage.

Sur ce blog, nous avons fait l’éloge de quelques-unes des productions rendues possibles par PopCorn.

La définition de PopCorn

Popcorn.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.

Bon mais assez discuté, voyons dès maintenant ce que le framework PopCorn a dans le citron numérique. Un aspect a particulièrement retenu notre attention. Car, dans tout projet Open Source qui se respecte, il est possible de développer des fonctionnalités additionnelles sous la forme de plugin. On retrouve la filiation revendiqué de PopCorn avec jQuery.

Pourquoi cet aspect plutôt qu’un autre ?
Cet aspect permet d’apprécier deux choses :

Tous les ingrédients de contenu auxquelles les internautes comme les créateurs souhaitent avoir accès. Les internautes pour s’informer, interagir… Les créateurs pour en disposer au sein de leur création comme un levier de narration. Les besoins comme les utilisations sont donc infinis, puisque chaque nouvelle forme d’expression ou de contenu présent sur le web peut être agrégé via un plugin comme source potentiel de contenu.
Le mode d’ingestion de ces nouvelles informations. Le soin est donné à la communauté de développeurs de favoriser la mise à disposition de ce contenu spécifique via un plugin. L’expansion de PopCorn comme framework est donc permanente. Cette expansion est l’expression même de la culture commune qui nait entre le monde du développement, du web et de la création audiovisuelle.

C’est en substance, ce que dit le texte publié sur le site officiel de Popcorn.

Popcorn.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.
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.

Test des plugins les plus significatifs

On va faire un essai sur les plugins les plus significatifs pour récupérer de plate-forme tierce de publication genre facebook, twitter ou intégrer un feed RSS.

La configuration est assez aisée puisqu’il suffit de remplir avec vos propres paramètres afin d’accéder à votre page facebook, à votre page twitter ou enfin au feed RSS de votre blog par exemple.

Extrait du plugin facebook

	.facebook({
		href: "http://www.facebook.com/3wdoc",
      type: "FACEPILE",
      target: "facepilediv",
      width: 300,
      start: 10,
      end: 15
    })

Extrait du plugin googlefeed

.googlefeed({
    start: 0,
    end: 15,
    target: "feed",
	url: "http://blog.3wdoc.com/fr/feed/",
    title: "3WDOC",
    orientation: "Vertical"
  })

Extrait complet du plugin twitter

 
<script>
    document.addEventListener( "DOMContentLoaded", function() {
      var p = Popcorn( "#video" )
      .twitter({
        start: 5,
        end: 15,
        title: "3wdoc",
        src: "@3wdoc",
        target: "twitterdiv",
      })
      .twitter({
        start: 20,
        end: 45,
        title: "webdoc",
        src: "#webdoc",
        target: "twitterdiv"
      })
      .play();
    }, false);
  </script>

Dans ce dernier exemple de plugin, comme dans un plugin jQuery, le plugin PopCorn va attacher à la video #video, un événement en l’ occurrence l’affichage du feed twitter de 3WDOC puis ensuite une recherche sur le mot #webdoc