Schritt für Schritt: Anpassung der Spieler

In diesem Thema werden praktische Schritte bereitgestellt, mit denen das Erscheinungsbild des Brightcove-Players angepasst wird. Um das Erscheinungsbild des Brightcove-Players anzupassen, müssen Sie Cascading Style Sheets (CSS) verwenden. In diesem Dokument werden das Erscheinungsbild und die Position der Wiedergabetaste geändert, mit der das Video anfänglich überlagert wird.

Überblick

Dieses Dokument enthält mehrere Abschnitte, die CSS mit der In-Page-Einbettung verwenden, und die Iframe-Implementierungen des Players sind sehr unterschiedlich.

Der Inhalt in diesem Dokument verwendet die Entwicklungstools von Chrome, aber alle modernen Browser verfügen über eine gleichwertige Funktionalität. Eine kurze Einführung in die Verwendung von Entwicklungstools in verschiedenen Browsern finden Sie im Debugging-Grundlagen dokumentieren.

Bestimmen Sie die Spielerauswahl

Mit CSS-Selektoren können Sie HTML-Elemente auf einer Seite auswählen und bearbeiten. CSS-Selektoren werden verwendet, um HTML-Elemente basierend auf ihrer ID, Klasse, ihrem Typ, ihrem Attribut und mehr zu „suchen“ (oder auszuwählen). Das erste, was Sie tun müssen, wenn Sie versuchen, das Aussehen eines Elements auf einer HTML-Seite zu ändern, ist, den Selektor zu bestimmen, der zum Ansprechen des Elements verwendet werden soll. Die folgenden Schritte zeigen, wie Sie den Selektor für den Spieler finden und dann die Größe des Spielers ändern.

  1. Öffnen Sie in Video Cloud Studio das Medien Modul und wählen Sie ein Video aus, das veröffentlicht werden soll.
  2. Wählen Sie Veröffentlichen und einbetten ... → Im Web veröffentlichen, dann wählen Sie den Player, mit dem Sie das Video abspielen möchten. Der Brightcove-Standardplayer ist in Ordnung.
  3. Stellen Sie die Dimensionierung , Seitenverhältnis und Spielergröße.
  4. Kopiere das Fortgeschrittene Code veröffentlichen.
  5. Erstellen Sie mit Ihrem HTML-Editor eine neue HTML-Seite.
  6. Fügen Sie den Veröffentlichungscode in den Hauptteil Ihrer HTML-Seite ein.
  7. Durchsuchen Sie die neu erstellte Seite.
  8. Öffnen Sie die Entwicklungstools Ihres Browsers, überprüfen Sie den HTML-Code und gehen Sie in den HTML-Code ein, um die <video-js> Schild. Sie werden das sehen <video-js> Tag hat eine Klasse, die auch benannt ist video-js. Das <video-js> Tag wird immer eine Klasse von haben video-js. Sie werden die nutzen video-js Klasse häufig beim Stylen des Players.
  9. Sehen Sie sich den Screenshot unten an, um die rot hervorgehobene Klasse zu sehen. Grün hervorgehoben ist das <video-js> Tag, das ist natürlich Brightcove Player.
    Spielerauswahl

Button-Selektor abspielen

Ein anderer Ansatz wird verwendet, um den Selektor für den Play-Button zu finden. Die folgenden Schritte zeigen Ihnen, wie Sie den richtigen Selektor für den Play-Button finden und dann dessen Aussehen ändern.

  1. Durchsuchen Sie Ihre HTML-Seite.
  2. Klicken Sie mit der rechten Maustaste auf die Wiedergabeschaltfläche, die den Player überlagert (Sie müssen zweimal mit der rechten Maustaste klicken, da der erste Rechtsklick die Brightcove-Player-Informationen anzeigt) und wählen Sie Prüfen.
  3. Notiere dass der <div> Das markierte Tag stellt die Wiedergabetaste dar und hat eine Klasse von vjs-big-play-button.
    große Wiedergabetaste div
  4. Ändern Sie Ihre Stile so, dass sie CSS enthalten, das die Farbe und Deckkraft der Wiedergabetaste ändert. 
    <style>
  .vjs-big-play-button {
    background-color: red;
    opacity: .3;
  }
</style>
  5. Durchsuchen Sie Ihre Seite und Sie werden sehen, dass nicht alle Stile verwendet wurden. Der Knopf ist nicht rot.
    Taste nicht rot
  6. Schauen Sie rechts von Ihren Entwicklertools nach und Sie sehen eine Zusammenfassung Ihrer Stile. Sie können nach unten schauen und sehen, dass das Ändern des Hintergrunds in Rot überschrieben wird und dadurch dargestellt wird, dass er durchgestrichen wird.
    Stile Hintergrund überschrieben

    Was passiert ist, ist, dass zahlreiche Änderungen an der Hintergrundfarbe vorgenommen werden. Der von Ihnen festgelegte Stil wurde im „kaskadierenden“ Teil von CSS überschrieben. Sie können dies ändern, indem Sie die Funktionalität von CSS verwenden, die als Spezifität bezeichnet wird. Die Spezifität bestimmt, welche CSS-Regel von Browsern angewendet wird und ist eine Art von Gewichtung, die sich darauf auswirkt, wie Ihre Cascading Stylesheet-Regeln (CSS) angezeigt werden. Mit Spezifität können Sie Ihren Stil wichtiger machen als andere und zwingen, ihn zu verwenden. Es gibt eine kurze Einführung in die CSS-Spezifität in der Passen Sie das Erscheinungsbild des Spielers an doc und zahlreiche Referenzen in jeder Suche.

  7. In diesem Fall verwenden Sie die video-js Klasse "erhöht" Ihre Stile, um Vorrang zu haben. Ändern Sie Ihre Stile, um den neuen Kombinationsselektor zu verwenden. Beachten Sie, dass vor der letzten Klasse ein Leerzeichen steht (Einzelheiten dazu finden Sie in den Regeln für die Spezifität). 
    <style>
  .video-js .vjs-big-play-button {
    background-color: #ff0000;
    opacity: .3;
  }
</style>
  8. Durchsuchen Sie Ihre Seite und sehen Sie, dass alle Stile jetzt angewendet werden.
    Stile Hintergrund arbeiten
  9. Schauen Sie erneut rechts von Ihren Entwicklertools nach und Sie sehen eine Zusammenfassung Ihrer Stile. Jetzt sehen Sie, dass Ihre Hintergrundfarbe nicht überschrieben wird.
    Stile Hintergrund NICHT überschrieben

Erweiterte Code-Implementierung

Bei der Arbeit mit den oben genannten Selektoren und Stilen wurden die Ergebnisse mit der erweiterten Code-Implementierung des Players verwendet, wie hier gezeigt:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js .vjs-big-play-button {
      background-color: red;
      opacity: .3;
    }
  </style>
</head>

<body>

  <video-js data-account="1507807800001"
    data-player="default"
    data-embed="default"
    controls=""
    data-video-id="6065136830001"
    data-playlist-id=""
    data-application-id=""
    width="640" height="360">

  </video-js><script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>

</body>

</html>

Dies ist eine sehr gebräuchliche Methode, CSS mit einer HTML-Seite zu verwenden. Sie sehen das <style> Block ist auf der Seite mit dem <video-js> Etikett.

Hinweis: Abhängig von Ihrer CSS-Erfahrung fragen Sie sich möglicherweise, warum der obige Code keine zugewiesen hat id Attribut auf die <video-js> Etikett. Sie könnten dann einen Selektor wie verwenden #myPlayer .vjs-big-play-button. In der Tat hättest du es tun können und es hätte funktioniert. Das Problem ist, dass das mit ID-Selektoren erstellte CSS bei Verwendung der Iframe-Player-Implementierung nicht funktioniert, sodass nur vorhandene Klassennamen verwendet wurden. Indem Sie keine verwenden id -Attributs sind die Stile direkt auf Iframe-Player-Implementierungen anwendbar.

Standard-Code-Implementierung

Die Standard- oder Iframe-Code-Implementierung platziert den Brightcove Player nicht überraschend in einem Iframe, den Sie dann auf einer HTML-Seite platzieren. Sie können den eigentlichen Iframe selbst stylen, beispielsweise seine Größe ändern, indem Sie Stile auf der Seite verwenden, die den Iframe enthält, aber Stile auf der Seite des Iframes kaskadieren NICHT in den Iframe selbst. Der Iframe zieht buchstäblich eine separate HTML-Seite ein, daher müssen die gewünschten Stile für den Inhalt des Iframe mit der HTML-Seite im Iframe verknüpft sein.

Wenn Sie die iframe-Implementierung des Brightcove Players verwenden, lauten die Schritte zum Anwenden von CSS:

  • Platzieren Sie Stile in einer Datei für das Internet zugänglich
  • Verknüpfen Sie das Stylesheet mit dem Player (erledigt mit Studio oder der Player Management API)

Hinweis: Die folgenden Schritte gehen davon aus, dass Sie mit dem HTML-Code arbeiten, den Sie in den vorherigen Schritten ausgeführt und im obigen Codeausschnitt angezeigt haben. Wenn Sie das als funktionierendes Beispiel behalten möchten, kopieren Sie einfach den Code in eine andere Datei und starten Sie die folgenden Schritte in der neuen Datei.

  1. Veröffentlichen Sie in Studio ein Video und kopieren Sie den Code für eine Iframe-Implementierung des Players.
  2. Ersetzen Sie auf Ihrer HTML-Seite den In-Page-Einbettungscode durch den Iframe-Code.
  3. Vergewissern Sie sich, dass Ihre HTML-Seite wie folgt aussieht: 
    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js .vjs-big-play-button {
      background-color: red;
      opacity: .3;
    }
  </style>
</head>

<body>

<iframe src="https://players.brightcove.net/1507807800001/default_default/index.html?videoId=6065136830001"
  allowfullscreen=""
  allow="encrypted-media"
  width="640" height="360"></iframe>

</body>

</html>
  4. Durchsuchen Sie die Seite und Sie werden sehen, dass die Stile für die Schaltfläche NICHT verwendet werden.
  5. Erstellen Sie eine Datei mit dem Namen customize-qs.css und speichern Sie sie an einem auf das Internet zugänglichen Speicherort.
  6. Schneiden Sie die Stile für die Schaltfläche aus und fügen Sie sie in die Datei ein und speichern Sie sie. Schneiden Sie nur die Stile für die Schaltfläche aus, Sie können die nicht einschließen <style> Stichworte. Die Datei sollte nur diesen Inhalt enthalten: 
    .video-js .vjs-big-play-button {
  background-color: red;
  opacity: .3;
}
  7. Vergewissern Sie sich, dass Ihre HTML-Seite wie folgt aussieht: 
    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
</head>

<body>

<iframe src="https://players.brightcove.net/1507807800001/default_default/index.html?videoId=6065136830001"
  allowfullscreen=""
  allow="encrypted-media"
  width="640" height="360"></iframe>

</body>

</html>
  8. Wechseln Sie in Studio in das Player-Modul und bearbeiten Sie den Player, den Sie für diesen Schnellstart verwenden.
  9. Klicken Plugins im linken Navigationsmenü.
  10. Klicken Stylesheets , dann ist die Fügen Sie ein Stylesheet hinzu Klicken Sie auf die Schaltfläche und geben Sie Ihren Pfad ein:
    Studio betreten CSS
  11. Klicken Sie auf Speichern, um Ihre Änderungen zu speichern. Der Vorschau-Player auf der rechten Seite wird aktualisiert, um die auf die Schaltfläche angewendeten CSS-Stile anzuzeigen.
  12. Um den Player zu veröffentlichen, klicken Sie auf Veröffentlichen & Einbetten > Änderungen veröffentlichen.
  13. Um das Dialogfeld „Öffnen“ zu schließen, klicken Sie auf Schließen.
  14. Kehren Sie zu Ihrem Browser zurück und aktualisieren Sie die Seite. Sobald die veröffentlichten Änderungen aktiv sind, sehen Sie, dass Ihre Stile auf den Iframe-Player angewendet werden. Es kann einige Minuten dauern, bis die veröffentlichten Änderungen sichtbar sind.

Stile erkunden

In diesem Abschnitt wird ein CodePen verwendet, mit dem Sie Stile erkunden und mehr Anpassungen an der großen Wiedergabetaste vornehmen können als oben gezeigt. Sobald Sie einen Look erhalten haben, können Sie das generierte CSS einfach kopieren und wie oben gezeigt mit beiden Player-Implementierungen verwenden.

Ein Problem, das verwirrend erscheinen mag, ist, dass der eigentliche Pfeil in der Schaltfläche kein Bild, sondern Teil einer Schriftfamilie ist. Aus diesem Grund steuern Sie seine Größe mit font-size und verwenden ems sie als Einheiten.

Siehe den Stift 5.x Big Play-Button-Anpassung von Matt Boles (@mboles ) An CodePen.