Exemple de joueur Brightcove : Désactiver le nettoyage direct

Exemple de lecteur

Au départ, vous ne pourrez PAS frotter vers l'avant, mais il est possible de frotter vers l'arrière. Une fois que la vidéo atteint 50% de lecture, vous pouvez faire défiler vers l'avant ou vers l'arrière. Le pourcentage de quand autoriser le brossage vers l'avant est facilement défini dans le code.

Voir le stylo Désactiver le défilement avant par Brightcove Learning Services ( rcrooks1969 ) sur CodePen.

Code source

Voir le solution complète sur GitHub.

Fonctions Middleware

Cet exemple utilise le middleware Video.js pour implémenter la solution de code. À un niveau très élevé, les cas d'utilisation où le middleware est de la plus grande valeur est lorsque vous voulez intercepter et modifier les comportements de base du joueur, tels que la définition de la source ou de l'heure actuelle. Le middleware Video.js en général n'est pas discuté longuement dans ce document, mais le code utilisé pour la fonction intergiciel est expliqué. Voici des documents provenant de sources Video.js qui détaillent les intergiciels :

• Middleware (à partir du jeu de documentation Video.js)
• Pleins feux sur les fonctionnalités : Middleware (extrait du blog Video.js)
• videojs-playbackrate-adjuster (exemple d'application)

Implémentation de fonctions d'intergiciel avec Brightcove Player

Le moyen le plus simple d'utiliser une fonction intergiciel consiste à :

1. Écrivez la fonction intergiciel.
2. Placez la fonction intergiciel soit sur la page avec le lecteur dans une script balise, soit inclure la fonction intergiciel à l'aide de l' src attribut avec un script étiquette. Les deux implémentations seront présentées dans ce document.
3. Enregistrez la fonction intergiciel auprès du lecteur à l'aide de la use() méthode, comme indiqué ici :

   videojs.use('mimeType', functionName);

   Pour le type MIME, vous pouvez utiliser un type MIME vidéo standard, comme vidéo/mp4, ou utiliser un * si vous souhaitez que la fonction intergiciel agisse sur tous les mimétypes.

Configuration du lecteur/HTML

Cette section détaille toute configuration spéciale nécessaire lors de la création du lecteur. En outre, d'autres éléments HTML qui doivent être ajoutés à la page, au-delà du code d'implémentation du lecteur intégré dans la page, sont décrits.

Configuration du lecteur

Aucune configuration spéciale n'est requise pour le lecteur Brightcove que vous créez pour cet exemple.

Autre HTML

Aucun autre élément HTML n'est ajouté à la page.

Flux d'application

La logique de base derrière cette application est la suivante :

• Implémentez la syntaxe de base d'une fonction middleware, en nommant la fonction disableForwardScrubbing.
• Mettre en œuvre les setSource() méthode.
• Modifier le setCurrentTime() pour vérifier si l'heure à laquelle le spectateur essaie de nettoyer est inférieure à l'heure actuelle dans le lecteur ou si le pourcentage de défilement avant est passé. Si l'un ou l'autre est vrai, déplacez la tête de lecture sur cette heure. Si faux, continuez à lire la vidéo à l'heure actuelle.

Créer le squelette de la fonction intergiciel

Trouvez le code étiqueté :

// +++ Define the middleware function+++

La syntaxe de base pour créer une fonction d'intergiciel est la suivante :

var disableForwardScrubbing = function(player) {
  return {
  ...
};

Notez que l' player objet est transmis à la fonction.

Mettre en œuvre le setSource() méthode

Trouvez le code étiqueté :

// ### Implement setSource() ###

Il s'agit d'une méthode obligatoire pour chaque fonction de middleware. En utilisant la syntaxe affichée signifie que le middleware sera toujours sélectionné, quel que soit le type de vidéo :

setSource: function setSource(srcObj, next) {
  next(null, srcObj);
},

Modifier la méthode setCurrentTime ()

Trouvez le code étiqueté :

// ### Alter the setCurrentTime method ###

Ce bloc de code est l'endroit où le réel setCurrentTime() la méthode est modifiée. Pour comprendre cela, le premier point à savoir est que le ct La valeur transmise à la fonction reflète la valeur à laquelle le spectateur effectue le balayage. le if La déclaration vérifie si la nouvelle valeur est inférieure à l'heure actuelle du joueur ou dépasse le pourcentage pour permettre le balayage vers l'avant. Si l'un ou l'autre est vrai, la nouvelle valeur est renvoyée, ce qui entraîne le déplacement de la tête de lecture vers la nouvelle valeur. Si la condition est fausse, ce qui signifie que le spectateur essaie d'avancer avant d'être autorisé, l'heure actuelle du lecteur est renvoyée et la lecture n'est pas modifiée.

setCurrentTime: function setCurrentTime(ct) {
  var percentAllowForward = 50,
   // Determine percentage of video played
   percentPlayed = player.currentTime() / player.duration() * 100;
   // Check if the time scrubbed to is less than the current time
   // or if passed scrub forward percentage
  if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
    // If true, move playhead to desired time
    return ct;
  }
  // If time scrubbed to is past current time and not passed percentage
  // leave playhead at current time
  return player.currentTime();
}

Style d'application

Le CSS de la page définit simplement la taille du lecteur.

Utilisation de la fonction intergiciel

Une fois que la fonction intergiciel a été écrite, vous souhaitez l'utiliser. Deux façons ont été mentionnées plus tôt, et elles seront détaillées maintenant.

Code sur la même page que le joueur

Ici, vous définissez la fonction intergiciel sur la même page que le lecteur, puis vous l'enregistrez.

<video-js id="myPlayerID"
  data-video-id="5701202551001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script type="text/javascript">
  // +++ Define the middleware function+++
  var disableForwardScrubbing = function(player) {
    return {
      // +++ Implement setSource() +++
      setSource: function setSource(srcObj, next) {
        next(null, srcObj);
      },
      // +++ Alter the setCurrentTime method +++
      setCurrentTime: function setCurrentTime(ct) {
        var percentAllowForward = 50,
         // Determine percentage of video played
         percentPlayed = player.currentTime() / player.duration() * 100;
         // Check if the time scrubbed to is less than the current time
         // or if passed scrub forward percentage
        if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
          // If true, move playhead to desired time
          return ct;
        }
        // If time scrubbed to is past current time and not passed percentage
        // leave playhead at current time
        return player.currentTime();
      }
    }
  };

  // Register the middleware with the player
  videojs.use('*', disableForwardScrubbing);

</script>

Code inclus sur la page du joueur

Dans le code suivant, le JavaScript de la fonction middleware et le use() méthode pour l'enregistrer sont simplement inclus dans la page.

<video-js id="myPlayerID"
  data-video-id="5701202551001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script src="disable-forward-scrubbing.js"></script>

Voir le fonction dans un fichier séparé section dans le dépôt GitHub pour le code complet.