LECTEUR VIDÉO BRIGHTCOVE : LOGICIEL INTERMÉDIAIRE

Photo de JESS R
JESS R
blog-placeholder image

L'intergiciel est l'une des nouvelles fonctionnalités intéressantes de Video.js dans la version 6.0.

Grâce à l'intergiciel, vous pouvez désormais interagir avec le lecteur et la technologie et modifier la façon dont ils communiquent entre eux. La technologie est l'abstraction de Video.js par rapport au lecteur, séparant l'API du lecteur de la technologie de lecture. Avec les techs, nous pouvons ajouter des éléments tels qu'un fallback Flash ou un embed Youtube dans Video.js sans modifier l'API externe ou l'aspect et la convivialité du lecteur.

Les intergiciels Video.js sont semblables aux intergiciels Express, mais les routes sont basées sur les types MIME vidéo.

Beaucoup d'utilisateurs de Video.js peuvent être familiers avec les middleware de projets comme Express. L'intergiciel Video.js n'est pas très différent de ces derniers. Dans les deux cas, vous enregistrez votre middleware contre une route particulière pour appeler la chaîne lorsque la route est déclenchée. Dans Express, les routes sont basées sur les chemins d'url. Dans Video.js, ces routes sont basées sur le type MIME de la vidéo. Et, comme dans Express, il existe des routes "en étoile" (*) qui correspondent à tous les itinéraires.

Il y a deux éléments importants à connaître en matière d'intergiciels :

  • Traitement dynamique des sources
  • Interception des interactions entre le joueur et la technologie

Un catalogue vidéo

Grâce à la gestion des sources dynamiques, vous pouvez charger une vidéo avec un type et une source personnalisés et la résoudre de manière asynchrone. Un bon exemple est celui d'un système de catalogue vidéo. La page peut être rendue avec un ID de catalogue spécifique et un type MIME spécial, comme suit :

<video controls class="video-js">
  <source src="123" type="video/my-catalog">
</video>

Ensuite, vous pouvez enregistrer un logiciel intermédiaire pour cette route - le type video/my-catalog.

// middleware methods get the player instance as an argument
videojs.use('video/my-catalog', function(player) {

  // middleware are expected to return an object with the methods on it.
  // It can be a plain object or an instance of something.
  return {

    // setSource allows you to tell Video.js whether you're going to be handling the source or not
    setSource(srcObj, next) {
      const id = srcObj.src;

      videojs.xhr({
        uri: '/getVideo?id=' + id
      }, function(err, res, body) {

        // pass null as the first argument to say everything is going fine and we can handle it.
        next(null, {
          src: body.sourceUrl,
          type: body.sourceType
        })
      });
    }
  };
});

Ensuite, lorsque Video.js s'initialise, il appelle les intergiciels qui ont été définis pour video/my-catalog.

Insertion publicitaire côté serveur

L'insertion publicitaire côté serveur (SSAI) est une solution idéale pour les intergiciels. Elle met en évidence la capacité d'intercepter les interactions entre la lecture et la technologie. Par exemple, vous avez une publicité de 30 secondes suivie d'une vidéo de cinq minutes dans votre manifeste HLS. Vous souhaitez que la timeline affiche l'heure de la publicité et l'heure du contenu en fonction de la durée de lecture. Actuellement, la durée affichée est la durée combinée de cinq minutes et 30 secondes (5:30). La solution consiste à ajouter un logiciel intermédiaire qui sait quand la publicité est diffusée et qui indique au lecteur que la durée est de 30 secondes et quand le contenu est diffusé que la durée est de cinq minutes.

// register a star-middleware because HLS has two mimetypes
videojs.use('*', function(player) {
  return {
    setSource(srcObj, next) {
      const type = srcObj.type;

      if (type !== 'application/x-mpegurl' && type !== 'application/vnd.apple.mpegurl') {

        // call next with an error to signal you cannot handle the source
        next(new Error('Source is not an HLS source'));
      } else {

        // in here we know we're playing back an HLS source.
        // We don't want to do anything special for it, so, pass along the source along with a null.
        next(null, srcObj);
      }
    },

    // this method gets called on the tech and then up the middleware chain providing the values as you go along
    duration(durationFromTech) {
      if (areWeCurrentlyPlayingAnAd(durationFromTech)) {
        // since we're now in an ad, return the ad duration
        // in a real example you'd calculate this based on your playlist
        // rather than hardcode a value in here
        return 30;
      } else {
        // we're playing back content, so, return that duration
        return 5 * 60;
      }
    }
  }
});

Ajustement du playbackrate - Une étude de cas

Un intergiciel simple mais intéressant à étudier est l'ajusteur de taux de lecture. Cet intergiciel modifie l'heure des commandes en fonction du taux actuel. Par exemple, si vous lisez une vidéo de 20 minutes et que vous changez le taux à 2x, les contrôles s'ajusteront pour afficher 10 minutes. Jetons un coup d'œil au code.

videojs.use('*', function(player) {
  /* ... */

  return {
    setSource(srcObj, next) {
      next(null, srcObj);
    },

    duration(dur) {
      return dur / player.playbackRate();
    },

    /* ... */
  };
});

Ici, nous attachons un star-middleware parce que nous voulons qu'il s'applique à n'importe quelle vidéo, quel que soit le type MIME. En setSourceNous appelons également next directement avec null et le srcObj car nous voulons utiliser cet intergiciel avec toutes les sources. Nous avons également mis en place notre duration pour prendre la durée de l'intergiciel précédent et la diviser par le taux de lecture que nous obtenons du lecteur.

Si vous regardez le code vous pouvez voir d'autres méthodes à côté de la durée. Elles sont là pour s'assurer que les autres méthodes qui s'appuient sur la durée sont mises à jour. Les deux méthodes à noter sont currentTime et setCurrentTimecurrentTime est appelée lorsque nous voulons connaître l'heure actuelle. setCurrentTime est appelé lorsque nous cherchons. Comme l'utilisateur cherche en temps décalé, nous voulons appliquer notre opération de changement en sens inverse. Au lieu de le diviser, nous voulons le multiplier.

    currentTime(ct) {
      return ct / player.playbackRate();
    },

    setCurrentTime(ct) {
      return ct * player.playbackRate();
    },

Si vous appliquez ce que nous avons fait jusqu'à présent, vous remarquerez que rien ne change, la barre de contrôle affiche toujours une durée de 20 minutes. C'est parce que Video.js sait que rien n'a changé. Nous devons donc indiquer à Video.js que la durée a changé. Nous pouvons le faire en stockant le tech que Video.js nous donne à la fin de la sélection de la source.

videojs.use('*', function(player) {
  let tech;

  return {
    setTech(newTech) {
      tech = newTech;
    }

    /* ... */
  };
});

Et puis, lorsque le ratechange se déclenche, nous indiquons à Video.js que la durée a changé et Video.js mettra à jour les contrôles en conséquence :

videojs.use('*', function(player) {
  let tech;

  player.on('ratechange', function() {
    tech.trigger('durationchange');
    tech.trigger('timeupdate');
  });

  return {
   /* ... */
  }
});

Voir un exemple concret et le code complet.

Cet article a été publié à l'origine sur le blog Video.js.

Brightcove a aidé un fabricant d'équipements de diagnostic à réduire le temps et les dépenses consacrés à la salle de classe tout en améliorant la réussite ...
Brightcove a aidé la place de marché automobile la plus reconnue à gérer son énorme vidéothèque et à la rentabiliser...
Pour préserver l'intégrité de leur marque, les enseignes de distribution ont besoin de lecteurs vidéo personnalisables qui leur permettent d'ajuster les couleurs, la police...

PRÊT À COMMENCER ?

Contactez-nous pour savoir comment nous pouvons améliorer vos efforts de marketing vidéo et vous aider à générer les résultats et le retour sur investissement dont vous avez besoin.