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.

  1. 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.
  2. Copie el CSS de la página HTML, menos el <style> etiquetas y péguelas en el archivo CSS dedicado.
  3. Copie el JavaScript de la página HTML, menos el <script> etiquetas y péguelas en el archivo JavaScript dedicado.
  4. En el archivo JavaScript, busque el código que se asemeja a 
    videojs.getPlayer('myPlayerID').ready(function () {
    JavaScript
    y reemplácelo con lo siguiente, eligiendo un nombre para el complemento que refleje su funcionalidad: 
    videojs.registerPlugin('backForwardButtons', function() {
    JavaScript
  5. 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">
    HTML
  6. 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>
    HTML
  7. 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>
    HTML

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>
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);
  });
});
JavaScript

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;
}
CSS