Grundlagen für Spielerentwickler: Benutzerdefiniertes Plugin - Code konvertieren

In diesem Thema erfahren Sie, wie Sie Code, der den Brightcove Player steuert, in ein benutzerdefiniertes Plugin konvertieren.

Schritte

Bei diesen Schritten wird davon ausgegangen, dass Sie den Code zur Verbesserung des Brightcove-Players auf einer einzelnen HTML-Seite geschrieben haben.

Erstellen Sie leere Dateien für JavaScript und CSS. Als bewährte Methode sollten die Dateinamen die Funktionalität des Plugins widerspiegeln. In dem Video Back-Forward-Buttons.js und Back-Forward-Buttons.css werden verwendet.
Kopieren Sie das CSS von der HTML-Seite, abzüglich der <style> Tags, und fügen Sie es in die entsprechende CSS-Datei ein.
Kopieren Sie das JavaScript von der HTML-Seite, abzüglich der <script> Tags, und fügen Sie es in die dedizierte JavaScript-Datei ein.
Suchen Sie in der JavaScript-Datei den Code, der ähnelt
```
videojs.getPlayer('myPlayerID').ready(function () {
```
und ersetzen Sie es durch das Folgende, indem Sie einen Namen für das Plugin auswählen, der seine Funktionalität widerspiegelt:
```
videojs.registerPlugin('backForwardButtons', function() {
```
Beachten Sie, dass die Dateinamen für CSS und JavaScript Bindestriche verwenden, während der Name des Plugins camelCase ist. Dies ist einfach eine Konvention, die vom Autor des Codes verwendet wird, und Sie können Entitäten nach Belieben benennen.
Entfernen Sie von der ursprünglichen HTML-Seite die <style> blockieren und durch einen Link zur CSS-Datei ersetzen:
```
<link href="back-forward-buttons.css" rel="stylesheet">
```
Von der ursprünglichen HTML-Seite und direkt unter dem <script> Tag, der auf den des Spielers verweist index.min.js Datei, fügen Sie eine Sekunde hinzu <script> Tag, um auf das JavaScript des Plugins zu verlinken:
```
<script src="back-forward-buttons.js"></script>
```
Entfernen Sie von der ursprünglichen HTML-Seite den Inhalt der <script> blockieren und ersetzen Sie den Code, der Folgendes ausführt:
- Holen Sie sich einen Verweis auf den Spieler mit dem getPlayer() und ready() Methoden, die eine verwandte anonyme Ereignishandlerfunktion haben.
- Weisen Sie in der Ereignishandlerfunktion eine Variable mit dem Namen zu myPlayer das this Schlüsselwort, das den Spieler in diesem Kontext darstellt.
- Rufen Sie das Plugin auf.
```
<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.backForwardButtons();
  });
</script>
```

Vollständiger Code

Haupt-HTML-Seite

  <!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>

JavaScript des benutzerdefinierten Plugins

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

CSS des benutzerdefinierten Plugins

  #backButton img{
    margin-top: -7px;
    height: 45px;
    width: 45px;
    cursor: pointer;
  }
  #forwardButton img{
    margin-top: -7px;
    height: 45px;
    width: 45px;
    cursor: pointer;
  }