J'utilise régulièrement la classe JavaScript Popcorn.js de la fondation Mozzila pour la réalisation de webdocumentaire en HTML5, cette classe permet de synchronisé les actions diverses avec la lecture de vidéo, c'est une librairie open source et j'ai déjà développé un certain nombre de plug-ins que j'utilise pour les webdocs. Popcorn.js est un produit ouvert et très souple que j'apprécie particulièrement pour les webdocumentaire. J'utilise également pour la création d'animations HTML5 et la création de différentes parties de webdoc Hype de Tumult, c'est un outil de création de contenu 100% HTML5, qui permet de créer de magnifiques animations et contenues pour des webdocs, des iBook et des sites internet. Le gros inconvénient de Hype c'est de ne pas avoir la possibilité de déclencher des actions de façon synchroniser avec la lecture de la vidéo, certaines astuces permettent de simuler cette fonctionnalité, mais sans jamais arriver au potentiel de Popcorn.js.
J'ai donc décidé de mixer ces deux outils pour avoir un produit complet de création de webdocu. Ce tuto vous présente les bases du fonctionnement, je n'ai utilisé dans ce tuto que les plug-ins de base de Popcorn.js, mais c'est déjà très puissant. J'ai également ajouter une lightbox, qui permet de visualiser les éléments de façon plus souple sans se soucier du codage, j'ai utilisé Nivo Lightbox, qui est également 100% HTML5, supporte le HiDPI pour les écrans type Retina et a l'avantage de détecter automatiquement le type de contenue, et qui facilite donc grandement l'intégration.
Après un certain nombre d'essais, j'ai trouvé une façon simple d'intégrer Popcorn.js a Hype 2.5, le codage est au final très simple, et permet de booster les possibilités de Hype dans le domaine des webdocumentaires.
Il est également possible une fois le webdoc finalisé, de créer une application Androide ou iOS pour iPhone et iPad complètement autonome !
Voici le code de base de l'intégration, vous pouvez également télécharger le zip contenant l'intégralité du projet au format Hype 2.5 : Projet Hype 2.5, Popcorn.js et Nivo Lightbox
Voici le code d'integration dans Hype :
function start_popcorn(hypeDocument, element, event) {
hypeDocument.getElementById('zvideo').addEventListener('canplay', function () {
var pop = Popcorn('#zvideo', {pauseOnLinkClicked: true});
pop.code({
start: 3,
end: 10,
onStart: function( options ) {
hypeDocument.startTimelineNamed('TL_00');
},
onEnd: function( options ) {
hypeDocument.startTimelineNamed('TL_00End');
}
});pop.code({
start: 12,
end: 60,
onStart: function( options ) {
hypeDocument.startTimelineNamed('TL_01');
},
onEnd: function( options ) {
hypeDocument.startTimelineNamed('TL_01End');
}
});pop.image({
start: 0,
end: 5,
target: "zphoto",
src: "http://www.franck-rondot.com/images/franck-rondot.com/logo-fr-300x300.jpg"
});pop.image({
start: 5,
end: 20,
target: "zphoto",
src: "http://www.franck-rondot.com/images/franck-rondot.com/loading-fr.gif"
});pop.image({
start: 20,
end: 60,
target: "zphoto",
src: "http://www.franck-rondot.com/images/franck-rondot.com/Erreur-404.png"
});pop.footnote({
start: 0,
end: 7,
target: "ztext",
text: "Un webdoc a pour moyen de diffusion principal internet et permet une consultation non linéaire et interactive !"
});pop.footnote({
start: 7,
end: 70,
target: "ztext",
text: "Ce qu'est un webdoc :
Franck Rondot"
});}, false);
hypeDocument.getElementById('zvideo').addEventListener('canplay', function (){
$('a').nivoLightbox();
}, false);
}
