Developpez.com

Le Club des Développeurs et IT Pro

Mozilla lance Popcorn.js 1.0 : le "jQuery de la vidéo"

Un framework événementiel pour la création de vidéos interactives en HTML5

Le 2011-11-09 15:23:04, par Idelways, Expert éminent sénior


À l'occasion du Mozilla Festival le week-end dernier à Londres, la fondation a dévoilé la version 1.0 de Popcorn, un toolkit JavaScript multimédia en HTML5.

Popcorn.js est un framework événementiel à utiliser pour la réalisation de créations interactives combinant des montages audio et vidéo avec les contenus du Web, comme les flux des réseaux sociaux et des actualités.

Popcorn utilise les propriétés, méthodes et évènements natifs des éléments média du HTML 5 qu'il normalise pour fournir une API facile d'utilisation, et un système de plug-in pour étendre ses fonctionnalité.
Son rôle est ainsi similaire à celui de jQuery, et le site du projet n'oublie pas à faire la parallèle « Penser jQuery pour la vidéo », peut-on y lire en grand titre.

Plus accessible encore, Popcorn et son petit écosystème de plug-in peuvent être mis à contribution sans la moindre ligne de code.
Mozilla présente aussi Popcorn Maker, une application visuelle pour l'édition de montages vidéo interactifs. Elle repose sur l'API d'édition butter.js, une surcouche de Popcorn.js.

One Millionth Tower est le premier documentaire entièrement réalisé en HTML5 grâce à Popcorn et d'autres technologies comme WebGL. Sa première a eu lieu durant le festival Mozilla et peut être consultée sur la toile.

« Popcorn permet aux réalisateurs de films de contrôler des environnements 3D en WebGL et les agrémenter d'informations en temps réel, obtenues de Wikipédia, l'API de Yahoo! météo, Flicker et Google Maps », affirme Mark Surman sur le blog de Mozilla, « Le résultat est une expérience unique sur mesure dans le navigateur pour chaque spectateur. Quand il neige à Toronto, par exemple, il commence à neiger dans le monde virtuel de One Millionth Tower ».

Mozilla estime amorcer là une « nouvelle forme de cinéma qui fonctionne comme le Web : interactive, sociale et riche ».

[ame="http://www.youtube.com/watch?v=rzUb6LvvOrI"]Trailer du film[/ame]

Télécharger Popcorn
Exemples de démonstration

Source : blog de Mozilla

Et vous ?

Que pensez-vous du projet Popcorn ?
  Discussion forum
5 commentaires
  • Aurelien Plazzotta
    Membre extrêmement actif
    C'est très ludique tout ça mais au final, PopCorn dépend de Wikipédia, Yahoo! météo, Flicker et Googles Maps, ce qui fait 4 API tierces pour tourner correctement :/

    M'enfin le résultat est tout de même une belle innovation, trouvera-t-elle rapidement son public?
  • ernestrenan
    Membre régulier
    Envoyé par Kenaryn
    C'est très ludique tout ça mais au final, PopCorn dépend de Wikipédia, Yahoo! météo, Flicker et Googles Maps, ce qui fait 4 API tierces pour tourner correctement :/
    Les applis font se mettre de plus en plus a dependre les une des autres, communiquer ...

    Je trouve que c'est une très bonne idée, ça me fait penser un peu à ce que fait dojo. Et ça va sans doute aider à l'evolution du web.
  • mr_samurai
    Membre éprouvé
    Les applis font se mettre de plus en plus a dependre les une des autres, communiquer ...

    Je trouve que c'est une très bonne idée, ça me fait penser un peu à ce que fait dojo. Et ça va sans doute aider à l'evolution du web.
    Je ne partage pas ton avis. Le problème est que tu risque de crasher quand un service tiers est indisponible...

    En parlant de cela, j'ai pas mal de pages qui tard à se charger à cause de l'inclusion du J'aime de Facebook. Et je vous dis pas que je déteste que mes pages prennent du temps à se charger, question de principe .
  • pmithrandir
    Expert éminent
    Vous avez trouver des exemples en ligne ?

    parce que c'est quand même bizarre un site pour une librairie Javascript qui ne propose pas de démo en ligne je trouve...
  • Idelways
    Expert éminent sénior
    Le site de Mozilla pour Popcorn ne contient en effet pas de démos. Mais le site officiel du framework en a quelque une.
    http://popcornjs.org/demos

    Je vais ajouter ce lien à l'article.

    Cordialement
    Idelways