Publier des documents web multimédia (Popcorn.js)

Création de plugin

Dans cet exercice, nous allons apprendre à utiliser les plugins mais aussi à les créer. Pour cela, vous allez devoir reprendre le code que vous avez écrit lors du premier exercice.

Question

Affichez :

  • un sous-titre entre t = 2s et t = 3s contenant "Cet exercice est génial !"

  • un popup à t = 5s affichant "Pas tant que ça en fait"

Indice

Pour les sous-titres, utilisez le plugin subtitle.

Pour le popup, utilisez le plugin code et la fonction alert().

Solution
1
pop.subtitle({
2
  start: 2,
3
  end: 3,
4
  text: "Cet exercice est genial",
5
});
6
7
pop.code({
8
  start: 5,
9
  onStart: function( options ) {
10
    alert("Pas tant que ca en fait...");
11
  }
12
});

Question

Créez un plugin "christmas" qui permet d'entourer la vidéo d'une aura rouge

Indice

Pour accéder à l'élément vidéo, utilisez this.media

Pour l'aura, on pourra utiliser un style css tel que : box-shadow: 0px 0px 60px red ;

Solution
1
Popcorn.plugin( "christmas" , {
2
      start: function( event, options ){
3
          this.media.style['box-shadow'] = '0px 0px 60px red';
4
      },
5
      end: function( event, options ) {
6
          this.media.style['box-shadow'] = '';
7
      },
8
  });
9
var p = Popcorn( "#video" ).play().christmas({start: 0,end: 5});
PrécédentPrécédentFin
AccueilAccueilImprimerImprimer Jeffrey DECORDE, Damien MARIÉ, 2014-2015 (Contributions : Stéphane Crozat, les étudiants de NF29) Paternité - Partage des Conditions Initiales à l'IdentiqueRéalisé avec Scenari (nouvelle fenêtre)