Conceptos básicos del desarrollador de jugadores: Complemento personalizado: conversión de código

En este tema, aprenderá a convertir el código que controla Brightcove Player en un complemento personalizado.

Pasos

Estos pasos asumen que ha escrito el código para mejorar Brightcove Player en una sola página HTML.

Cree archivos vacíos para JavaScript y CSS. Como práctica recomendada, los nombres de archivo deben reflejar la funcionalidad del complemento. En el video back-forward-buttons.js y back-forward-buttons.css son usados.
Copie el CSS de la página HTML, menos el <style> etiquetas y péguelas en el archivo CSS dedicado.
Copie el JavaScript de la página HTML, menos el <script> etiquetas y péguelas en el archivo JavaScript dedicado.
En el archivo JavaScript, busque el código que se asemeja a
```
videojs.getPlayer('myPlayerID').ready(function () {
```
y reemplácelo con lo siguiente, eligiendo un nombre para el complemento que refleje su funcionalidad:
```
videojs.registerPlugin('backForwardButtons', function() {
```
Tenga en cuenta que los nombres de archivo para CSS y JavaScript utilizan guiones, mientras que el nombre del complemento es camelCase. Esta es simplemente una convención utilizada por el escritor del código y puede nombrar entidades como desee.
De la página HTML original, elimine el <style> bloquearlo y reemplazarlo con un enlace al archivo CSS:
```
<link href="back-forward-buttons.css" rel="stylesheet">
```
Desde la página HTML original, y justo debajo del <script> etiqueta que se vincula a la del jugador index.min.js archivo, agregue un segundo <script> etiqueta para vincular al JavaScript del complemento:
```
<script src="back-forward-buttons.js"></script>
```
De la página HTML original, elimine el contenido de la <script> block y reemplácelo con el código que realiza lo siguiente:
- Obtenga una referencia al jugador usando el getPlayer() y ready() métodos, que tiene una función de controlador de eventos anónimos relacionada.
- En la función del controlador de eventos, asigne una variable llamada myPlayer la this palabra clave, que representa al jugador en este contexto.
- Llame al complemento.
```
<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.backForwardButtons();
  });
</script>
```

Código completo

Página HTML principal

  <!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 del complemento personalizado

  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 del plugin personalizado

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