Schritt für Schritt: Video.js-Plug-in-Generator

In diesem Thema erfahren Sie, wie Sie mit dem Plugin-Generator video.js Plugins für den Brightcove Player erstellen und testen.

Der Plugin-Generator video.js erstellt die Dateien und Ordner, die zum Erstellen eines herkömmlichen Plugins erforderlich sind. Es enthält eine Testumgebung, damit Sie Ihre Änderungen bei der Entwicklung Ihres Plugins leicht sehen können. Es werden sogar die endgültigen Plugin-Dateien generiert, die Sie verwenden können, wenn Sie bereit sind, sie freizugeben.

Überblick

In diesem Thema führen Sie die folgenden Aufgaben aus:

Eine Videoübersicht finden Sie im folgenden Abschnitt:

Richten Sie Ihre Umgebung ein

Gehen Sie folgendermaßen vor, um Ihre Umgebung für die Ausführung des Plugin-Generators einzurichten:

  1. Wenn Sie es noch nicht haben, laden Sie es herunter und installieren Sie es Node.js JavaScript-Laufzeit. Dazu gehört npm, ein Paket-Ökosystem, das eine große Sammlung von Open Source-Bibliotheken enthält.

  2. Erstellen Sie einen lokalen Ordner auf Ihrem Computer. In diesem Beispiel erstellen wir einen Namen Prüfung. Hier werden die Generatordateien und Ihre Plugin-Dateien abgelegt.
  3. Überprüfen Sie die Liesmich Informationen für die video.js Plugin Generator. In dem docs Ordner, öffnen und überprüfen Sie die Video.js Plugin-Konventionen. In diesem Dokument werden die empfohlenen Regeln zum Erstellen Ihres Plugins beschrieben.
  4. Öffnen Sie die Terminal-App in dem Ordner, den Sie in einem vorherigen Schritt erstellt haben. Öffnen Sie für dieses Beispiel die Terminal-App in der Prüfung Mappe.

  5. Installieren Sie in der Terminal-App den Plugin-Generator zusammen mit Yeoman:

    $ npm install -g yo generator-videojs-plugin

    Der Plugin-Generator video.js verwendet einen Yeoman-Generator, ein Gerüstwerkzeug, mit dem die Grundlage für jedes Projekt geschaffen wird. Dadurch werden die grundlegenden Dateien und Ordner eingerichtet. Sie müssen Yeoman nicht verstehen. Sie müssen es nur mit dem Plugin-Generator installieren.

Erstellen Sie die Plugin-Grundlage

In diesem Abschnitt erstellen Sie die Foundation-Ordner und -Dateien für Ihr Plugin.

  1. Führen Sie im Terminal den folgenden Befehl aus:

    $ yo videojs-plugin

  2. Als nächstes werden Ihnen eine Reihe von Fragen zu den Details Ihres Plugins gestellt. Hier finden Sie eine Liste der Optionen sowie eine kurze Beschreibung für jede Option.

    Option Beschreibung Werte für dieses Beispiel
    Paketumfang Optional: Dies ist nur erforderlich, wenn Sie Ihr Plugin in einer privaten npm-Organisation veröffentlichen möchten. Sie können Ihren Firmennamen hier verwenden oder leer lassen. leer
    Name des Plugins Geben Sie Ihrem Plugin einen Namen. Geben Sie den Namen ein Demo erstellt ein Plugin mit dem Namen videojs-demo. Demo
    Beschreibung Geben Sie eine Beschreibung für Ihr Plugin ein. Dies ist eine Demo
    Autor Das Format für Name und E-Mail-Adresse ist nicht erforderlich, wird jedoch zum Auffüllen des verwendet Autor Feld in der package.json Datei. Der Generator wird versuchen, diese Werte basierend auf Ihrem Git-Setup zu erraten, aber Sie können sie ändern. [Ihr Name] <Ihre E-Mail-Adresse>
    Lizenz Wählen Sie eine der Lizenzoptionen. Für Ihre privaten Plugins können Sie auswählen Nicht lizenziert. Nicht lizenziert
    Basic oder Advanced Plugin Das grundlegende, funktionsbasierte Plugin ist eine einfache JavaScript-Funktion. Wenn Sie in der Vergangenheit ein Video.js-Plugin geschrieben haben, sollten Sie mit dem grundlegenden Plugin-Konzept vertraut sein.

    Das erweiterte, klassenbasierte Plugin wurde mit Video.js 6 eingeführt. Dieser Plugin-Typ beginnt mit einer JavaScript-Klasse, bei der es sich um eine Konstruktorfunktion handelt.

    Einzelheiten finden Sie in der Video.js Plugins Readme-Dokumentation.     		Basis-Plugin (funktionsbasiert)
    CSS-Tooling Wählen Sie Ja, wenn Sie das CSS-Styling einschließen möchten. Dadurch wird eine CSS-Datei generiert. Ja
    Dokumentationswerkzeuge Wenn ja, enthält der Generator JSDoc und stellt einen Befehl zum Generieren der Dokumentation bereit. Nein
    Internationalisierte Saiten Dies ist hilfreich, wenn Sie Text haben, den Sie in verschiedene Sprachen übersetzen möchten. Das Tool bietet keine automatische Übersetzung, konvertiert jedoch Dateien aus dem JSON-Format von video.j in JavaScript. Anschließend können Sie Sprachen wie für video.js erstellen und in die Ausgabe Ihres Plugins kompilieren lassen. Nein
    Lint hat Dateien geändert Fügen Sie ein Linting-Tool namens videojs standard hinzu. Dieser Prozess überprüft Ihren Code auf einige häufige Fehler. Ja
    Vor Git Push Dies gibt Ihnen die Möglichkeit, das Verschieben in ein Git-Repository zu verhindern, wenn die ausgewählten Prüfungen fehlschlagen. Das Überprüfen der Codequalität ist ein guter Weg, um zu verhindern, dass Code übertragen wird, der nicht den Standards entspricht. Nein

    So sieht die Ausgabe mit den für dieses Beispiel festgelegten Werten aus:

    Optionswerte
    Optionswerte
  3. Wenn das Setup abgeschlossen ist, werden mehrere Meldungen angezeigt. Möglicherweise gibt es einige Warnmeldungen, aber keine Fehler.
    Setup abgeschlossen
    Setup abgeschlossen

    Beachten Sie, dass der Name des Plugins lautet videojs-demo.

Zeigen Sie die Quelldateien an

In diesem Abschnitt werden die Quelldateien überprüft, die vom videojs-Generator erstellt wurden.

  1. Öffnen Sie in einem Editor den obersten Ordner, in dem Sie Ihr Plugin-Projekt ablegen. Öffne das src Mappe. Hier finden Sie Folgendes:

    • EIN plugin.js Datei. Diese Datei enthält den Code für Ihr Plugin.
    • EIN plugin.css Datei, wenn Sie ausgewählt haben Ja zur CSS-Tooling-Option.
  2. (If you did not select Yes to the CSS tooling option, you can skip this step.) Öffne das src> plugin.css Datei.

    Ihr Code sollte wie folgt aussehen:

    /* Note: all vars must be defined here, there are no "local" vars */
  :root {
    --main-color: red;
    --base-font-size: 9;
    --font-size: 7;
  }

  .video-js {

    &.vjs-demo {
      /* This class is added to the video.js element by the plugin by default. */
      display: block;

      & .remove-me, & .remove-me-too, &.finally-remove-me {
        /* examples of postcss syntax, you probably want to remove this */

        color: var(--main-color);

        /**
         * Note that you have to use calc and multiply by a value with a unit
         * prepending the unit like `var(--base-font-size)px` or
         * `calc(10 * var(--base-font-size)em` will NOT work!
         */
        font-size: calc(var(--font-size) * 8 * var(--base-font-size) * 1px);

      }
    }
  }
  3. Öffne das src> plugin.js Datei.

    Ihr Code sollte wie folgt aussehen:

    • Zeilen 25-27: Rufen Sie die onPlayerReady() Funktion, wenn der Player bereit ist. Hier können Sie Variablen mit dem in Ihr Plugin übergeben options Objekt.
    • Zeile 26: fügt die hinzu vjs-demo Klasse zu Ihrem Spieler. Standardmäßig ist dies das einzige, was der Skelettcode tut. Hier können Sie Ihrem Plugin Funktionen hinzufügen.
    • Zeile 48: Registriert Ihr Plugin bei video.js.
    • Zeile 51: Fügt Ihrem Plugin einen Versionsparameter hinzu. Wenn Sie die ausführen npm Version Skript aktualisiert diese Variable auf die Version, auf der Sie sich befinden.
    import videojs from 'video.js';
import {version as VERSION} from '../package.json';

// Default options for the plugin.
const defaults = {};

// Cross-compatibility for Video.js 5 and 6.
const registerPlugin = videojs.registerPlugin || videojs.plugin;
// const dom = videojs.dom || videojs;

/**
 * Function to invoke when the player is ready.
 *
 * This is a great place for your plugin to initialize itself. When this
 * function is called, the player will have its DOM and child components
 * in place.
 *
 * @function onPlayerReady
 * @param    {Player} player
 *           A Video.js player object.
 *
 * @param    {Object} [options={}]
 *           A plain object containing options for the plugin.
 */
const onPlayerReady = (player, options) => {
  player.addClass('vjs-demo');
};

/**
 * A video.js plugin.
 *
 * In the plugin function, the value of `this` is a video.js `Player`
 * instance. You cannot rely on the player being in a "ready" state here,
 * depending on how the plugin is invoked. This may or may not be important
 * to you; if not, remove the wait for "ready"!
 *
 * @function demo
 * @param    {Object} [options={}]
 *           An object of options left to the plugin author to define.
 */
const demo = function(options) {
  this.ready(() => {
    onPlayerReady(this, videojs.mergeOptions(defaults, options));
  });
};

// Register the plugin with video.js.
registerPlugin('demo', demo);

// Include the version number.
demo.VERSION = VERSION;

export default demo;

Testen Sie Ihr Plugin

Der Plugin-Generator erleichtert das Entwickeln und Testen Ihres Plugins in einer lokalen Testumgebung. Befolgen Sie diese Schritte, um Ihr Plugin zu testen:

  1. Geben Sie im Terminal den folgenden Befehl ein, um den Entwicklungsserver zu starten:

    $ npm start
  2. Geben Sie in einem Browser Folgendes ein, um den Entwicklungsserver zu öffnen: 
    http://localhost:9999/

    Sie sollten den Player mit einem Testvideo sehen. Der Generator bietet Ihnen einen Demo-Player, der auf der Seite ausgeführt wird. Öffnen Sie in den Browser-Entwicklertools die Elemente Registerkarte, um den HTML-Code für den Player anzuzeigen.

    Browsertests
    Browsertests
  3. Überprüfen Sie die Elemente dieser Webseite. Sie sollten sehen, dass die vjs-demo Klasse wurde dem Spieler hinzugefügt. Denken Sie daran, dass wir diese Klasse dem Player im Plugin-Code hinzugefügt haben.
    vjs-demo klasse
    vjs-demo klasse
  4. Versuchen wir nun, dem Plugin Code hinzuzufügen, um die Wiedergabe des Videos automatisch zu starten, wenn der Player geladen wird. Gehe zurück zum src> plugin.js Datei in Ihrem Editor.
  5. In dem onPlayerReady() Methode, fügen Sie Code hinzu, um die Wiedergabe des Videos zu starten. 
    const onPlayerReady = (player, options) => {
  player.addClass('vjs-demo');
  player.play();
};
  6. Speichern Sie die plugin.js Datei in Ihrem Editor. Wenn Sie Ihren Browser aktualisieren, sollten Sie sehen, dass das Video in der Testumgebung abgespielt wird.

    Während Sie Ihr Plugin in der entwickeln plugin.js Änderungen speichern und speichern, das Tool erstellt den Player automatisch neu und lädt ihn im Browser neu. Dies macht es einfach, Ihr Plugin zu entwickeln und zu testen.

  7. Entfernen Sie die Codezeile, um das Video abzuspielen.

    player.play();

Bearbeiten Sie die JavaScript-Datei

In diesem Abschnitt fügen Sie der JavaScript-Quelldatei Code hinzu, um dem Player ein Absatzelement mit benutzerdefiniertem Text hinzuzufügen.

  1. Kehren Sie in Ihrem Editor zum src> plugin.js Datei.
  2. In dem onPlayerReady() Funktion, Code hinzufügen, um a hinzuzufügen <p> Element mit benutzerdefiniertem Text an den Player. 
    const onPlayerReady = (player, options) => {
  player.addClass('vjs-demo');
  var textDisplay = document.createElement('p');
  textDisplay.className = 'vjs-text';
  textDisplay.innerHTML = "Becoming a plugin developer";
  player.el().appendChild(textDisplay);
};
  3. Speichern Sie die Datei. Denken Sie daran, dass Ihre Änderungen im Testbrowser automatisch aktualisiert werden.
  4. Kehren Sie zum Testbrowser zurück. Sie werden sehen, dass sich im Player nichts geändert hat. Das Problem ist, dass der Text vorhanden ist, aber nicht sichtbar ist. Wir werden das als nächstes beheben.

    Verwenden Sie die Entwicklungstools im Browser, um zu überprüfen, ob das Textelement zum Player hinzugefügt wurde. In dem Elemente Abschnitt, erweitern Sie den Player <div> Element. Sie sollten das neu hinzugefügte Absatz-Tag sehen.

    Absatz-Tag hinzugefügt
    Absatz-Tag hinzugefügt

    Wir werden den Text im nächsten Abschnitt mithilfe von CSS sichtbar machen.

Bearbeiten Sie die CSS-Datei

In diesem Abschnitt fügen Sie der CSS-Quelldatei Code hinzu, um Text über dem Player anzuzeigen.

  1. Kehren Sie in Ihrem Editor zu zurück src> plugin.css Datei.
  2. Ergänzen Sie die .vjs-text Auswahl mit Stilen, um den benutzerdefinierten Text im Player anzuzeigen. 
    /* Note: all vars must be defined here, there are no "local" vars */
  :root {
    --main-color: red;
    --base-font-size: 9;
    --font-size: 7;
  }

  .vjs-text {
    background-color: #333333;
    color: white;
    position: absolute;
    font-size: 2em;
    text-align: center;
    width: 100%;
    margin-top: 10%;
  }
  3. Speichern Sie die Datei. Denken Sie daran, dass Ihre Änderungen im Testbrowser automatisch aktualisiert werden.
  4. Kehren Sie zum Testbrowser zurück. Sie sollten nun den benutzerdefinierten Text sehen, der über dem Player angezeigt wird.
    Über dem Player angezeigter Text
    Über dem Player angezeigter Text
  5. Stoppen Sie den Entwicklungsserver durch Drücken von STRG-C in der Terminal-App.

    Jetzt können Sie Ihr Plugin für die Verteilung vorbereiten. Das machen wir als nächstes.

Erstellen Sie Ihr Plugin

In diesem Abschnitt erstellen Sie Ihr Plugin. Dies nimmt Ihren Quellcode und erstellt verteilbare CSS- und JavaScript-Dateien.

  1. Führen Sie im Terminal den folgenden Befehl aus:

    $ npm run build

    Der Build verwendet Ihren ES6-Quellcode und konvertiert ihn in ES5-JavaScript-Code.

  2. Erweitern Sie in Ihrem Projektordner die dist Mappe. Hier finden Sie eine verteilbare Version Ihres Plugins. Hier sollten Sie die folgenden Dateien finden (vorausgesetzt, Sie haben ausgewählt Ja für CSS-Tools):

    • videojs-demo.css
    • videojs-demo.js
    • videojs-demo.min.js
     

    Sie finden auch diese weniger häufig verwendeten Dateien:

    • videojs-demo.cjs.js
      • Das ist ein CommonJS Modul, das verwendet wird, wenn Ihr Projekt in Node benötigt wird oder wenn Sie Browserify zum Bündeln von JavaScript verwenden.
    • videojs-demo.es.js
      • Das ist ein ES6 Modul für moderne Projekte, die WebPack oder Rollup verwenden, um ihre Abhängigkeiten zu bündeln.
  3. In dem dist Ordner, öffnen Sie die videojs-demo.js Datei.
    Verteilungsdateien
    Verteilungsdateien

    Einige Dinge, die Sie zu dieser Verteilungsdatei beachten sollten:

    • Oben in der Datei wurde ein Lizenzbanner hinzugefügt.
    • Ihr Plugin wurde in a verpackt browserify Namespace. Dies bedeutet, dass es keine globalen Variablen gibt, die mit Ihrem Seitencode in Konflikt stehen könnten.
    • Das Plugin registriert sich intern bei videojs. Dies bedeutet, dass Sie für einen Player mehrere Plugins erstellen können, die jeweils unabhängig voneinander funktionieren.

Übergeben Sie Daten an Ihr Plugin

Dieser Abschnitt ist optional. Sie können diesen Abschnitt überspringen, es sei denn, Sie möchten lernen, wie Sie Daten an Ihr Plugin übergeben.

  1. Wir werden das benutzen options Eigenschaft, um Daten von unserer HTML-Seite an das Plugin zu übergeben. Einzelheiten zur Verwendung dieser Eigenschaft finden Sie in der Übergeben Sie Daten an das Plugin Dokument.

  2. Kehren Sie in Ihrem Editor zum src> plugin.js Datei.

  3. In dem onPlayerReady() Funktion, fügen Sie Code hinzu, um den Textwert in der zu verwenden options Eigenschaft, falls vorhanden, andernfalls verwenden Sie einen Standardtextwert.

    • Zeile 4: Erstellt ein Absatzelement
    • Zeile 5: Weist den Textklassentyp zu
    • Zeile 6: prüft ob die displayText Objekt existiert in der options Eigentum
    • Zeile 7: verwendet die displayText Wert zum Auffüllen der Textanzeige
    • Zeile 9: Verwendet den Standardwert für die Textanzeige
    • Zeile 13: Fügt das Anzeigetextelement zum DOM hinzu
    const onPlayerReady = (player, options) => {
  player.addClass('vjs-demo');

  var textDisplay = document.createElement('p');
  textDisplay.className = 'vjs-text';

  if ('displayText' in options) {
    textDisplay.innerHTML = options.displayText;
  } else {
    textDisplay.innerHTML = "Becoming a plugin developer";
  }

  player.el().appendChild(textDisplay);
};
  4. Speichern Sie die Datei und kehren Sie zum Testbrowser zurück. Sie sollten keine Änderung an der Textanzeige sehen.
  5. Wenn Sie dies noch nicht getan haben, fügen Sie das CSS für das hinzu .vjs-text Selektor aus dem Bearbeiten Sie die CSS-Datei Sektion.
  6. Erstellen Sie Ihr Plugin. Wir werden die Dateien in der verwenden dist Ordner in einer Testwebseite.
  7. Erstellen Sie auf Ihrem lokalen Testserver wie MAMP einen Ordner mit dem Namen Plugin-Generator.
  8. Kopieren Sie in diesen Ordner die videojs-demo.css und videojs-demo.js Dateien aus dem dist Ordner und fügen Sie sie in Ihren Testserver-Ordner ein, Plugin-Generator.
  9. Erstellen Sie als Nächstes in diesem Ordner eine HTML-Datei mit einem Player, der unsere aufruft demo Plugin und übergibt einen Wert für den Anzeigetext. Wir werden diese Datei benennen testing.html.
    • Zeile 8: Enthält unsere Plugin-Stile.
    • Zeilen 13-22: Fügen Sie unserer Webseite einen Brightcove-Player hinzu.
    • Zeile 24: Enthält unsere Plugin-JavaScript-Datei.
    • Zeilen 26-32: Führen Sie ein benutzerdefiniertes Seitenskript aus.
    • Zeile 27: Wartet, bis der Spieler bereit ist.
    • Zeile 28: erhält einen Verweis auf den Spieler.
    • Zeile 29: definiert die options Objekt.
    • Zeile 30: ruft unsere demo Plugin und übergibt die options Objekt. Beachten Sie, dass der Name des Plugins lautet demo , während die Namen der Plugin-Dateien sind videojs-demo.
    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Passing data to the plugin</title>

  <link href="videojs-demo.css" rel="stylesheet">
</head>

<body>

  <video-js id="myPlayerID"
    data-video-id="5977793284001"
    data-account="1752604059001"
    data-player="default"
    data-embed="default"
    data-application-id=""
    width="640px" height="360px"
    controls=""></video-js>
  <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script type="text/javascript" src="videojs-demo.js"></script>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
      options = {"displayText": "This data supplied at initialization"};
      myPlayer.demo(options);
  });
</script>

</body>
</html>
  10. Führen Sie in einem Browser die aus testing.html Datei. Sie sollten sehen, dass der Anzeigetextwert aus dem Seitencode anstelle des Plugins stammt.
    Daten an das Plugin übergeben
    Daten an das Plugin übergeben

Empfehlungen

Es wird empfohlen, diesen Generator für alle Plugins zu verwenden, auch für die einfachen. Auf diese Weise haben Sie immer das gleiche Setup für alle Ihre Plugins. Es befreit Sie auch von der Aufgabe, Skripte erstellen zu müssen, um bestimmte Funktionen wie Flusen oder Minimieren auszuführen.

Mit diesem Generator können Sie sich auf die Entwicklung und das Testen Ihres Plugins konzentrieren, ohne sich um die zugrunde liegenden Tools kümmern zu müssen.

Sie können Ihr Plugin lokal halten oder auf Ihrem privaten GitHub-Repo ablegen. Das Erstellen eines Videojs-Plugins bedeutet, dass es mit dem Brightcove-Player funktioniert.

Ressourcen

Hier finden Sie eine Zusammenfassung der Ressourcen, die Sie beim Durcharbeiten dieses Schnellstarts verwenden werden. Diese Links werden auch in den folgenden Schritten bereitgestellt: