Grundlagen für Spielerentwickler: Benutzerdefiniertes Plugin - Warum und Wie

In diesem Thema erfahren Sie, warum Sie ein benutzerdefiniertes Plugin verwenden sollten, und lernen die allgemeinen Schritte zu deren Entwicklung kennen.
 

Warum benutzerdefinierte Plugins?

  • Duplizieren Sie denselben Code nicht an mehreren Stellen
  • Der gesamte mit dem Plugin verknüpfte Code wird Teil des Players

Schritte

  1. Codieren Sie die erweiterte Player-Funktionalität
  2. Erstellen Sie eine neue Datei, die nur das CSS enthält
  3. Erstellen Sie eine neue Datei, die JavaScript enthält
    • Ändern Sie die Codezeile, die das verwendet getPlayer() Methode
  4. Verknüpfen Sie die CSS- und JavaScript-Dateien und rufen Sie das benutzerdefinierte Plugin auf

Vollständiger Code

Haupt-HTML-Seite

  <!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 des benutzerdefinierten Plugins

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

CSS des benutzerdefinierten Plugins

  /*
   CSS Here
   */