Conceptos básicos del desarrollador de jugadores: Complemento personalizado: por qué y cómo

En este tema, aprenderá por qué debe usar un complemento personalizado y aprenderá los pasos de alto nivel para su desarrollo.
 

¿Por qué complementos personalizados?

  • No duplique el mismo código en varios lugares
  • Todo el código asociado con el complemento se convierte en parte del reproductor

Pasos

  1. Codifique la funcionalidad mejorada del reproductor
  2. Cree un nuevo archivo que contenga solo el CSS
  3. Cree un nuevo archivo que contenga JavaScript.
    • Altere la línea de código que usa el getPlayer() método
  4. Enlace a los archivos CSS y JavaScript, luego llame al complemento personalizado

Código completo

Página HTML principal

  <!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link href="custom-plugin.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="custom-plugin.js"></script>

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

  </body>

  </html>

JavaScript del complemento personalizado

  videojs.registerPlugin('pluginName', function() {
    var myPlayer = this;
    // Complete JavaScript
    // ...
  });

CSS del plugin personalizado

  /*
   CSS Here
   */