Exemple de joueur Brightcove : Obtenir le temps recherché

Exemple de lecteur

En cliquant dans la barre de recherche, les heures auxquelles vous avez cliqué s'affichent sous le lecteur.

Voir le stylo Obtenez le temps recherché 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 middleware soit sur la page avec le lecteur dans un scénario ou incluez la fonction middleware à l'aide de src attribut avec un scénario marque. Les deux implémentations seront présentées dans ce document.
3. Enregistrez la fonction middleware auprès du lecteur à l'aide du utilisation() méthode, comme indiqué ici:

   videojs.use ('mimeType', nomFonction);

   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 getSeekedTime.
• Modifier le setCurrentTime () méthode pour renvoyer simplement l'heure recherchée.

Créer le squelette de la fonction intergiciel

Trouvez le code étiqueté :

// +++ Définir la fonction middleware +++

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

var getSeekedTime = function (joueur) {
  retour {
  ...
} ;

Modifier la méthode setCurrentTime ()

Trouvez le code étiqueté :

// ### Définit le temps de recherche dans la méthode setCurrentTime ###

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. Par conséquent, vous pouvez simplement attribuer la valeur à la variable appropriée et renvoyer cette valeur afin setCurrentTime () fonctionne toujours correctement.

setCurrentTime: fonction setCurrentTime (ct) {
  SeekBarclickedTime = ct ;
  retour ct ;
}

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 = "par défaut"
  data-embed="par défaut »
  data-application-id=""
  controls=""></video-js>

<div id = "displayTimesHere"> </div>

<script src= » https://players.brightcove.net/1752604059001/default_default/index.min.js "> < /script >

<type de script ="text/javascript » >
  var seekBarClickedTime;

  // +++ Définir la fonction middleware +++
  var getSeekedTime = function (joueur) {
    retour {
    // +++ Définir le temps de recherche dans la méthode setCurrentTime +++
      setCurrentTime: fonction setCurrentTime (ct) {
        SeekBarclickedTime = ct ;
        retour ct ;
      }
    }
  };

  // Enregistrer le middleware avec le lecteur
  videojs.use ('*', getSeekedTime);

  // Initialise l'événement mouseup sur la barre de recherche
  videojs.getPlayer ('myPlayerID'). ready (function () {
    var myPlayer = ceci;
    myPlayer.controlBar.progressControl.seekBar.on ('mouseup', fonction (événement) {
      displayTimesHere.innerHTML + = seekBarClickedTime + '<br>';
    }) ;
  }) ;
  </script>

Code inclus sur la page du joueur

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

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

<script src = "get-seeked-time.js"> </script>

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