Notions de base des développeurs de joueurs : Plugin personnalisé - Pourquoi et comment

Dans cette rubrique, vous apprendrez pourquoi vous devriez utiliser un plugin personnalisé et les étapes de haut niveau de leur développement.
 

Pourquoi des plugins personnalisés?

  • Ne dupliquez pas le même code à plusieurs endroits
  • Tout le code associé au plugin devient une partie du lecteur

Étapes

  1. Coder la fonctionnalité de lecteur améliorée
  2. Créez un nouveau fichier contenant uniquement le CSS
  3. Créez un nouveau fichier contenant le JavaScript
    • Modifier la ligne de code qui utilise le getPlayer() méthode
  4. Lien vers les fichiers CSS et JavaScript, puis appelez le plugin personnalisé

Code complet

Page HTML principale

  <!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 du plugin personnalisé

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

CSS du plugin personnalisé

  /*
   CSS Here
   */