Notions de base des développeurs de joueurs : Plugin personnalisé - Conversion de code

Dans cette rubrique, vous apprendrez à convertir le code qui contrôle le Brightcove Player en un plugin personnalisé.

Étapes

Ces étapes supposent que vous avez écrit le code pour améliorer le Brightcove Player sur une seule page HTML.

Créez des fichiers vides pour le JavaScript et le CSS. En tant que meilleure pratique, les noms de fichiers doivent refléter les fonctionnalités du plugin. Dans la vidéo back-forward-Buttons.js et back-forward-Buttons.css sont utilisés.
Copiez le CSS de la page HTML, moins le <style> et collez-les dans le fichier CSS dédié.
Copiez le JavaScript de la page HTML, moins le <script> et collez-les dans le fichier JavaScript dédié.
Dans le fichier JavaScript, recherchez le code qui ressemble à
```
videojs.getPlayer('myPlayerID').ready(function () {
```
et remplacez-le par ce qui suit, en choisissant un nom pour le plugin qui reflète sa fonctionnalité:
```
videojs.registerPlugin('backForwardButtons', function() {
```
Notez que les noms de fichiers pour le CSS et JavaScript utilisent des tirets, tandis que le nom du plugin est camelCase. Il s'agit simplement d'une convention utilisée par l'auteur du code et vous pouvez nommer les entités comme vous le souhaitez.
De la page HTML d'origine, supprimez le <style> bloquez-le et remplacez-le par un lien vers le fichier CSS:
```
<link href="back-forward-buttons.css" rel="stylesheet">
```
À partir de la page HTML d'origine, et juste en dessous du <script> balise qui renvoie au joueur index.min.js fichier, ajoutez un second <script> tag pour créer un lien vers le JavaScript du plugin:
```
<script src="back-forward-buttons.js"></script>
```
À partir de la page HTML d'origine, supprimez le contenu de la <script> block et remplacez-le par le code qui effectue les opérations suivantes:
- Obtenez une référence au joueur en utilisant le getPlayer() et ready() méthodes, qui ont une fonction de gestionnaire d'événements anonyme associée.
- Dans la fonction de gestionnaire d'événements, attribuez une variable nommée myPlayer la this mot-clé, qui représente le joueur dans ce contexte.
- Appelez le plugin.
```
<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.backForwardButtons();
  });
</script>
```

Code complet

Page HTML principale

  <!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
  <link href="back-forward-buttons.css" rel="stylesheet">
  </head>

  <body>

    <video id="myPlayerID"
      data-video-id="5992439742001"
      data-account="1752604059001"
      data-player="default"
      data-embed="default"
      data-application-id=""
      controls=""
      width="640" height="360"></video>
    <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>
    <script src="back-forward-buttons.js"></script>

    <script>
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        myPlayer.backForwardButtons();
      });
    </script>

  </body>

  </html>

JavaScript du plugin personnalisé

  videojs.registerPlugin('backForwardButtons', function() {
    var myPlayer = this,
        jumpAmount = 5,
        controlBar,
        insertBeforeNode,
        newElementBB = document.createElement('div'),
        newElementFB = document.createElement('div'),
        newImageBB = document.createElement('img'),
        newImageFB = document.createElement('img');

    // +++ Assign IDs for later element manipulation +++
    newElementBB.id = 'backButton';
    newElementFB.id = 'forwardButton';

    // +++ Assign properties to elements and assign to parents +++
    newImageBB.setAttribute('src', '/assets/samples/back-forward-buttons/back-button.png');
    newElementBB.appendChild(newImageBB);
    newImageFB.setAttribute('src', '/assets/samples/back-forward-buttons/forward-button.png');
    newElementFB.appendChild(newImageFB);

    // +++ Get controlbar and insert elements +++
    controlBar = myPlayer.$('.vjs-control-bar');
    // Get the element to insert buttons in front of in conrolbar
    insertBeforeNode = myPlayer.$('.vjs-volume-panel');

    // Insert the button div in proper location
    controlBar.insertBefore(newElementBB, insertBeforeNode);
    controlBar.insertBefore(newElementFB, insertBeforeNode);

    // +++ Add event listeners to jump back or forward +++
    // Back button logic, don't jump to negative times
    newElementBB.addEventListener('click', function () {
      var newTime,
          rewindAmt = jumpAmount,
          videoTime = myPlayer.currentTime();
      if (videoTime >= rewindAmt) {
        newTime = videoTime - rewindAmt;
      } else {
        newTime = 0;
      }
      myPlayer.currentTime(newTime);
    });

    // Forward button logic, don't jump past the duration
    newElementFB.addEventListener('click', function () {
      var newTime,
          forwardAmt = jumpAmount,
          videoTime = myPlayer.currentTime(),
          videoDuration = myPlayer.duration();
      if (videoTime + forwardAmt <= videoDuration) {
        newTime = videoTime + forwardAmt;
      } else {
        newTime = videoDuration;
      }
      myPlayer.currentTime(newTime);
    });
  });

CSS du plugin personnalisé

  #backButton img{
    margin-top: -7px;
    height: 45px;
    width: 45px;
    cursor: pointer;
  }
  #forwardButton img{
    margin-top: -7px;
    height: 45px;
    width: 45px;
    cursor: pointer;
  }