Popcorn.js is — Framework Javascript vidéo & audio HTML5

Popcorn.js is est un framework Javascript créé par Mozilla pour faciliter la création de vidéos interactives. Popcorn normalise les propriétés, les méthodes et les événements natifs des éléments média audio et video HTML5 sous la forme d’une API extensible via des plugins. En gros, il s’agit du jQuery de la vidéo. C’est dire l’ambition des concepteurs qui espèrent révolutionner le monde de la vidéo en l’adaptant au web via l’utilisation des ressources visuelles, audios et vidéos disponibles sur les réseaux sociaux.

Parmi les plugins disponibles, nous trouvons :

  • Openmap — Ajoute une carte OpenLayers (OpenStreetMap, NASA WorldWind ou USGS Topographic),
  • Code — Active une fonction Javascript d’après le timing de la vidéo,
  • Facebook — Rend disponible une partie de l’API de Facebook,
  • GML –Affiche une balise GML dans un élément HTML,
  • Googlefeed — Affiche le flux RSS d’un blog via son URL,
  • Linkedin — Place un plugin LinkedIn,
  • Lowerthird — Affiche les informations à propos d’un intervenant par-dessus la video ou dans un élément de la page,
  • MustachePour mettre des moustaches aux gens qui apparaissent dans une vidéo Utilise la bibliothèque de templating Mustache pour afficher des données au format JSON, 🙂
  • Pause plugin — Met en pause les vidéos qui disposent de l’option pauseOnLinkClicked lorsqu’un lien est cliqué sur la page,
  • Processing.js — Ajoute un élément visuel créé via Processing.js dans une balise <div> ou <canvas>,
  • Timeline — Ajoute des données associées à un moment de la vidéo avec un effet de scroll sur les éléments concernés au fur et à mesure que la vidéo progresse.
  • Wordriver — Affiche une chaine de caractère qui apparait et disparait en se fondant dans la vidéo (fading in and out),
  • Tag This Person — Ajoute le nom d’une personne,
  • Lastfm — Ajoute des informations sur un artiste joué sur Lastfm,
  • Image — Affiche une image dans un élément ciblé,
  • Attribution — Permet à l’utilisateur d’ajouter des informations à propos des différentes sources multimédias utilisées,
  • Wikipedia — Affiche un article de Wikipédia,
  • Webpage — Crée un élément <iframe> pour afficher une page web,
  • Footnote — Ajoute du texte à un élément sur la page,
  • Subtitle — Affiche des sous-titres par-dessus la vidéo ou dans un élément HTML,
  • Flickr — Permet de retrouver des images en provenance de Flickr selon les termes de la recherche et les dimensions spécifiées,
  • Google Map — Affiche une carte Google centrée sur la position géographique spécifiée par l’utilisateur,
  • Twitter — Affiche un widget Twitter dans un élément.

Via Développez.