Suite au tuto sur PopcornJS et comment créer un plugin je me suis ensuite penché sur la façon d’intégrer un plugin utilisant ce framework javascript dans une application utilisant angularJS.
Avant propos
Nous n’allons pas rentrer dans le détail de l’utilisation d’angular car c’est en dehors du scope de cet article et cela risquerait de le rendre trop long et fastidieux à assimiler. La majeure partie des explications techniques sera donnée en commentaires dans le code qui sera linké sur github et le reste sera expliqué de façon plus fonctionnelle dans les paragraphes qui suivent.
Objectifs :
Popcorn : La partie popcorn est simple et suite au tutoriel de création de plugin, nous passerons rapidement sur cette partie. Le plugin nous servira à ajouter un contenu additionnel à une vidéo à certains instants de la vidéo.
Angular : L’architecture du projet sera constituée d’un service qui chargera un json contenant les données du contenu additionnel de la vidéo. Un controller observera les données et leur changement. Une custom directive nous permettera d’encapsuler notre contenu additionnel dans un web component.
Pour suivre le tuto plus facilement et tester vous même le code, il est disponible sur github dans ce repo. Une fois cloné utilisez la commande bower pour installer les dépendances ( angularJS ).
bower install
Préparation du projet
Comme vous avez pu le voir pour ceux qui on déjà jeté un coup d’œil au repo github, il y a un peu plus de code que dans mes précédents tutos. Dans un premier temps nous allons voir le fichier index.html. Ce qui nous intéresse dans ce fichier sont :
- la balise video qui servira à initialiser Popcorn
- la div du dessous ou se trouvera la logique de notre application et où sera visible le contenu supplémentaire lié a la vidéo.
Initialisation de l’application angular
L’initialisation ce fait dans le fichier main.js, rien de très complexe, nous enregistrons notre module avec pour dépendance le système de routeur d’angular ainsi que son système qui permet d’utiliser du code html de façon sécurisée dans notre template.
Le chargement des données de contenu
Nous allons charger ces données depuis un service dans le fichier MoreContentServices.js, ce fichier javascript paraît être compliqué mais il n’est pas si difficile que ça de le comprendre. Concrètement il va charger les données via l’objet $http d’angular, initialiser notre plugin popcorn en lui passant notre balise vidéo et pour finir, itérer sur les données json chargées pour initialiser chaque événement à l’aide de notre plugin popcorn .
Notre directive custom
Une directive est un composant html customisé, coté html c’est une balise non native de navigateur :
Coté JS nous définissons notre directive en l’initialisant avec son controller MoreContentController et un fichier template qui contient notre balise html custom. Le contenu de cette balise html sera updatée par notre controller lorsque le contenu de la valeur de $scope.content changera dans notre controller, c’est le Data binding.
Le plugin Popcorn
Pour finir ce rapide tour des différents fichiers de notre application, nous allons voir notre plugin popcorn. Pour ceux qui n’ont pas lu le tuto sur la création de plugin popcorn, ce fichier enregistre un plugin popcorn avec comme namespace moreContent, c’est pourquoi dans notre service nous l’initialisons de cette façon :
pop.moreContent(item);
Un peu à la manière des plugins jQuery. Ensuite les fonctions start et end seront appelées par Popcorn aux temps donnés dans le json passé à l’initialisation du plugin.
Mise a jour des données additionnelles
Dans notre plugin popcorn lorsque l’appel de la fonction start s’effectue, nous mettons a jour la propriété de $scope.content de notre controller, de plus nous utilisons la fonction d’angular $apply pour prévenir le controller que les données on été mises à jour. Je ne suis pas sûr que ce soit la meilleure façon de faire, cependant après quelques recherches sur le web je n’ai pas trouvé de façon plus simple : Une fois dans le plugin Popcorn, nous sommes en dehors du scope de notre application angular. C’est pourquoi nous devons lui dire que les données ont changées.
Ce que fait notre code
Pour expliquer un peu plus concrètement ce que fait notre code nous allons voir étape par étape ce qui ce passe visuellement dans notre navigateur.
A l’intialisation :
Angular et Popcorn sont initialisés, seule la vidéo est présente à l’écran car la valeur de $scope.content de notre controller est vide donc le contenu de notre custom directive est aussi vide.
Premier événement de contenu additionnel :
Dans notre fichier de données, dans le premier objet json de notre tableau de données la valeur de start vaut 1, donc à une seconde de la vidéo la valeur de l’attribut content va remplacer la valeur vide de $scope.content et comme ces données sont liées à notre controller, elles vont être updatées dans notre directive. Notre premier contenu apparaît sous la vidéo dans notre balise custom
Ce contenu est une description, un nom et du code html ( dans notre cas c’est une balise image )
Contenus additionnels 2 et 3
Idem pour les deux objets json suivants de notre fichier de données. Différents contenus vont venir se succéder au fur et à mesure que la vidéo se joue.
Pour le second il y a seulement une description et pour le troisième une balise html avec un lien.
Si nous jouons avec la barre de temps du player vidéo et que nous revenons sur la position temporelle d’autres événements, il sont bien joués.
En conclusion
Nous pouvons voir qu’avec très peu de code nous avons obtenu une application riche et dynamique. A partir de cette base nous pourrions créer d’autres plugins, skinner les contenus additionnels et bien plus encore !
