Anpassen des Spielerauftritts

Dieses Thema ist eine Einführung in das Anpassen des Erscheinungsbilds von Brightcove Player. Der Inhalt 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 in der Debugging-Grundlagen Dokument.

Eigenes Skin erstellen

Wenn Sie den Standard-Skin nicht verwenden und Ihren eigenen erstellen möchten, ist dies mit der Player Management API möglich. Der Player-Konfigurationshandbuch enthält die notwendigen Informationen.

Spieler

Sie können das Aussehen des Spielers ändern, müssen aber zuerst eine Möglichkeit haben, es anzugehen. Durchsuchen Sie dazu eine HTML-Seite, in die der erweiterte Code (In-Page-Einbettung) eingefügt ist. In dem Elements Im Abschnitt der Entwicklungstools finden Sie die <video-js> Tag und Sie werden sehen, dass es eine Klasse mit dem Wert hat video-js zugewiesen, unter vielen anderen.

Sobald Sie dies wissen, können Sie Stile verwenden, um den Spieler selbst zu ändern. Um beispielsweise einen Rahmen um den Player einzuschließen, können Sie diesen Stil verwenden:

<style>
  .video-js {
    border-style: double;
    border-width: thick;
    border-color: red;
  }
</style>

iframe-Spieler

Wenn Sie die Standardimplementierung (iframe) des Players verwenden, ist die Situation anders. Sie sehen immer noch den Spieler mit dem video-js Klasse, aber es wird natürlich innerhalb des Iframes und innerhalb der video-js Etikett.

Die von Ihnen erstellten Stile funktionieren weiterhin mit dem Player im Iframe, aber eine CSS-Datei muss erstellt und mit dem Player verknüpft werden, der Studio verwendet. Sie tun dies, indem Sie zum gehen Spieler Klicken Sie dann auf den Player, dem Sie das CSS zuordnen möchten, und klicken Sie dann auf Plugins> Stylesheets Abschnitt fügen Sie den Pfad Ihrer CSS-Datei hinzu.

Wenn Sie den Iframe selbst anpassen möchten, können Sie dies mithilfe einer Elementauswahl tun. Verwenden Sie dann ein <style> Tag, um nach Belieben zu ändern. Im folgenden Beispiel wird ein Rahmen um den Player hinzugefügt.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      border-style: double;
      border-width: thick;
      border-color: red;
    }
  </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>

Schaltfläche „Spielen“

Wenn Sie das Erscheinungsbild des Play-Buttons ändern möchten, müssen Sie zuerst wissen, wie Sie ihn ansprechen können. Klicken Sie in Chrome mit der rechten Maustaste auf die Schaltfläche. Wählen Sie aus der angezeigten Auswahl Inspect. Wenn Sie auswählen Inspect , Chrome Entwicklungswerkzeuge wird Öffnen.

In dem Elements Im Abschnitt der Entwicklungstools sehen Sie den HTML-Code, der dem Schaltflächenelement entspricht.

Aus dem oben hervorgehobenen Code sehen Sie die Klasse, die der Schaltfläche zugewiesen ist vjs-big-play-button. Die Farbe des Play-Buttons (passend zum Tiger) und die Deckkraft werden mit diesen Stilen geändert:

.vjs-big-play-button {
  background-color: #B37D5B;
  opacity: .6;
}

Man würde denken, dass dieser Ansatz funktionieren würde, aber das tut er nicht. Wenn Sie mit CSS arbeiten, müssen Sie sich der Eigenschaftsspezifität bewusst sein. Dies bezieht sich darauf, wie der Browser anhand ihrer Relevanz bestimmt, welche Eigenschaftswerte auf ein Element angewendet werden.

Eine Möglichkeit, die Schaltflächenänderungen anzuwenden, besteht darin, dem Selektor eine weitere Klasse hinzuzufügen. Zum Beispiel können Sie die verwenden .video-js Klasse, um die Spezifität des Selektors zu erhöhen. Weitere Einzelheiten finden Sie in der CSS-Spezifität Sektion

Referenzieren Sie dann den großen Play-Button des Spielers im CSS wie folgt:

.video-js .vjs-big-play-button {
  background-color: #B37D5B;
  opacity: .6;
}

Hier ist das Ergebnis, dass die Schaltfläche von dunkelgrau auf orange geändert wird:

Play-Button ausblenden

Sie können die Wiedergabetaste vollständig ausblenden, indem Sie den folgenden Stil verwenden:

display: none;

Experiment

Der folgende CodePen ermöglicht es Ihnen, mit dem Play-Button zu experimentieren. Beachten Sie, dass das Dreieck in der Wiedergabetaste tatsächlich eine Schriftart ist und seine Größe mit einem font-size Stil gesteuert wird.

Sehen Sie sich den Pen Big Play Button Customization von Brightcove Learning Services (@rcrooks1969) auf CodePen an.

Ändern Sie den Schwebetext

Wenn Sie den Text ändern möchten, der angezeigt wird, wenn Sie mit der Maus über die große Wiedergabetaste fahren Video abspielen Standardmäßig können Sie dies tun, um etwas Spezifischeres für Ihre Videos zu tun. Fügen Sie das folgende JavaScript hinzu, indem Sie die gewünschte Sprache als Argument für das verwenden controlText Methode.

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  myPlayer.getChild('bigPlayButton').controlText('Play Audio');
});

Steuert Sichtbarkeit

Sie können steuern, ob die Steuerleiste und die darin enthaltenen Steuerelemente sichtbar sein sollen oder nicht. Wenn Sie die Steuerleiste vor Beginn der Spielerstellung ausblenden möchten, können Sie diesen Stil verwenden:

.video-js .vjs-control-bar {
  display: none;
}

Wenn Sie dies basierend auf einem Ereignis dynamisch ausführen möchten, können Sie das verwenden controlBar.hide()/show() Methoden. Das folgende Codefragment zeigt die Verwendung der Methoden (dies setzt voraus, dass Sie eine haben id mit einem Wert von myPlayer auf dem Video):

<video-js id="myPlayerID"
  data-account="1507807800001"
  data-player="default"
  data-embed="default"
  controls=""
  data-video-id="5781068653001"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>

<p><button onclick="hideBtn()">hide controls</button></p>
<p><button onclick="showBtn()">show controls</button></p>

<script>
  var myPlayer;
	videojs.getPlayer('myPlayerID').ready(function() {
		myPlayer = this;
	});

	function hideBtn() {
		myPlayer.controlBar.hide();
	}

	function showBtn() {
		myPlayer.controlBar.show();
	}
</script>

Steuerelemente verstecken sich nie

Sie können es auch so gestalten, dass die Steuerelemente niemals ausgeblendet werden. Verwenden Sie dazu die transform.none Stil. Der Selektor ist sehr lang, da sechs Klassen für die Spezifität von Transformationen verwendet werden.

.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.vjs-has-started.vjs-paused.vjs-ad-playing.vjs-user-inactive .vjs-control-bar,
.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible){
  transform: none;
  -webkit-transform: none;
  -ms-transform: none;
}

Obwohl dies als ein bisschen Hack angesehen wird, können Sie die Klasse der Steuerleiste einfach achtmal wiederholen, um ihre Spezifität so zu gestalten, dass sie dem obigen Selektor entspricht:

.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar {
  transform: none;
  -webkit-transform: none;
  -ms-transform: none;
}

Fortschrittsanzeige

Jetzt sehen Sie, wie Sie die Farbe der Fortschrittsanzeige ändern. Die Standardfarbe für den Indikator ist Fuchsia, wie hier gezeigt:

Die Herausforderung besteht darin, die Klassennamen für die Elemente zu finden. Klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie es aus Inspect Wenn Sie dann einen Drilldown durchführen, sehen Sie die vjs-play-progress Klasse.

Das background-color Ändert die Farbe des Elements und muss gestylt werden. Der benötigte Stil wird hier gezeigt:

.video-js .vjs-play-progress {
  background-color: green;
}

Beachten Sie, dass die .video-js Klasse in den Selektor hinzugefügt wurde. Dies geschieht, um die CSS-Spezifität des Selektors zu erhöhen.

Die Ergebnisse sehen wie folgt aus und zeigen einen jetzt grünen Fortschrittsbalken:

Lautstärkeregler

Sie können die Lautstärkeregelung mithilfe von CSS oder durch Übergabe von anpassen options Objekt während der Spielerstellung.

Update mit CSS

Jetzt sehen Sie, wie Sie die Farbe der Lautstärkeregler ändern. Hier wird das Standard-Aussehen angezeigt, eine weiße Lautstärketaste mit einer Fuchsia-Lautstärkeleiste:

Verwenden Sie die hier gezeigte Auswahl, um die Farbe der Lautstärketaste und die Stummschalttaste zu ändern, wenn Sie darauf klicken:

.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal {
  color: yellow;
}

Um die Farbe der Lautstärkeleiste zu ändern, klicken Sie auf background-color des Elements muss gestylt werden. Der benötigte Stil wird hier gezeigt:

.video-js .vjs-volume-level{
  background-color: yellow;
}

Beachten Sie, dass die .video-js Klasse in den Selektor hinzugefügt wurde. Dies geschieht, um die CSS-Spezifität des Selektors zu erhöhen.

Die Ergebnisse der Gestaltung der Schaltfläche und der Lautstärkeleiste werden hier angezeigt:

Aktualisieren Sie mit dem Optionsobjekt

Um das Layout des Lautstärkereglers zu ändern, können Sie die übergeben options Objekt in die bc () Methode wie folgt:

Verzögern Sie die Erstellung des Players, indem Sie die folgenden Attribute aus dem entfernen video Etikett:
- data-account
- data-player
- data-video-id

Definiere das options Objekt, so dass die volumePanel ist vertikal und nicht inline mit der Steuerleiste.

var options = {
  controlBar: {
    volumePanel: {
      inline: false,
      vertical: true
    }
  }
};

Fügen Sie die Spielerattribute hinzu, die ursprünglich entfernt wurden.
Erstellen Sie den Player, indem Sie die bc () Methode mit dem options Objekt.
```
bc("myPlayerID", options);
```
Einzelheiten finden Sie in der Vertikale Lautstärkeregelung Spielerprobe.

Schriftarten

Der Titel und die Beschreibung werden angezeigt, wenn der Player zum ersten Mal geladen wird und wenn der Benutzer mit der Maus über den Player fährt. Sie können den Stil für die Schriftarten für Titel und Beschreibung entweder zusammen oder separat ändern. Der HTML-Code für die Dock wird wie im folgenden Screenshot gezeigt angezeigt. Beachten Sie, dass es eine gibt <div> Element mit einer Klasse von vjs-dock-text das enthält zwei andere <div> Elemente, die die enthalten Titel und Beschreibung.

Sie können sowohl den Titel als auch die Beschreibung beeinflussen, indem Sie einen Stil auf dem festlegen vjs-dock-text Klasse. Beachten Sie, dass Stile auf dem eingestellt sind .vjs-dock-title und .vjs-dock-description wird natürlich nicht vollständig durch den auf einer höheren Ebene festgelegten Stil überschrieben. Einige Stile werden vererbt, wie der folgende Stil und sein Ergebnis im Text zeigen:

.video-js .vjs-dock-text {
  color: yellow;
  font-size: .7em;
}

Sie können den einzelnen Titel und die Beschreibung direkt formatieren. Das Folgende zeigt Stile, die auf dem eingestellt sind .vjs-dock-title und .vjs-dock-description Klassenselektoren, wobei der resultierende Text die Stile anzeigt:

.video-js .vjs-dock-title {
  color: red;
  font-size: 1.5em;
}
.video-js .vjs-dock-description {
  color: yellow;
  font-size: 1.0em;
}

Manipulation des Symbols in der Steuerleiste

Die Reihenfolge der Steuerleisten-Symbole wird durch die Reihenfolge des HTML-Codes bestimmt <div>s in der übergeordneten Steuerleiste <div>. Hier sehen Sie die Steuerleiste <div> mit all seinen Kindern.

Im Allgemeinen ist dies der folgende Ansatz, wenn Sie ein Symbol in der Steuerleiste einfügen:

Erstellen Sie dynamisch das Element, das Sie in die Steuerleiste einfügen möchten.
Rufen Sie einen Verweis auf das Steuerleistenelement ab.
Holen Sie sich einen Verweis auf das Element, vor dem Sie Ihr neues Element einfügen möchten, in die Steuerleiste.
Verwenden Sie das JavaScript insertBefore() Methode zum Platzieren des Symbols.

Die Syntax für insertBefore() ist:

parent.insertBefore(newElement,insertBeforeElement)

Dies bedeutet, dass Sie im detaillierten Code unten JavaScript sehen, um einen Verweis auf die Steuerleiste (übergeordnet) zu erhalten, eine neue <div> mit einem Symbol zum Einfügen in die Steuerleiste und zuletzt einem Verweis auf das Element, in das das neue Symbol eingefügt wird.

Insbesondere wird der folgende Code verwendet, um ein Download-Videosymbol vor dem Volume-Symbol einzufügen:

Zeilen 280-285: Stil für den Download-Button.
Zeilen 291-295: Weisen Sie Variablen zu und erstellen Sie HTML-Elemente für:
- Das <div> welches das Symbol für das Download-Symbol enthält.
- Das Ankertag, mit dem das Symbol angeklickt werden kann.
- Das Symbolbild selbst.
Zeilen 297-2980: Weisen Sie dem neuen Element eine ID- und eine CSS-Klasse zu.
Zeile 300: Weisen Sie dem Bild eine Quelle zu.
Zeile 301: Weisen Sie eine zu href zum Link.
Zeile 302: Hängen Sie das Bild an den Link an.
Zeile 303: Hängen Sie den Link an das dynamisch erstellte an <div>.
Zeile 306: Holen Sie sich einen Verweis auf die Steuerleiste, mit der Sie arbeiten möchten insertBefore().
Zeile 308: Holen Sie sich einen Verweis auf das Element, vor dem das neue Symbol eingefügt wird, um es zu verwenden insertBefore().
Zeile 310: Fügen Sie das dynamisch erstellte Element ein.

<!-- styles for page -->
  /* Style the download icon */
  #downloadButton {
      width: 34px;
      height: 33px;
      margin-top: 6px;
  }
</style>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    // Create variables and new div, anchor and image for download icon
    var myPlayer = this,
      controlBar,
      newElement = document.createElement('div'),
      newLink = document.createElement('a'),
      newImage = document.createElement('img');
    // Assign id and classes to div for icon
    newElement.id = 'downloadButton';
    newElement.className = 'downloadStyle vjs-control';
    // Assign properties to elements and assign to parents
    newImage.setAttribute('src','http://solutions.brightcove.com/bcls/brightcove-player/download-video/file-download.png');
    newLink.setAttribute('href','http://www.brightcove.com');
    newLink.appendChild(newImage);
    newElement.appendChild(newLink);
    // Get controlbar and insert before elements
    // Remember that getElementsByClassName() returns an array
    controlBar = document.getElementsByClassName('vjs-control-bar')[0];
    // Change the class name here to move the icon in the controlBar
    insertBeforeNode = document.getElementsByClassName('vjs-volume-menu-button')[0];
    // Insert the icon div in proper location
    controlBar.insertBefore(newElement,insertBeforeNode);
  });

Hier sehen Sie das Ergebnis des Codes, wobei das neu eingefügte Symbol gelb hervorgehoben ist:

Wenn Sie das Symbol an einer anderen Stelle haben möchten, müssen Sie nur den Code ändern, vor dem das Element eingefügt werden soll. Verwenden Sie beispielsweise Folgendes, um das neue Symbol vor die Vollbildschaltfläche zu verschieben:

insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];

Das Ergebnis würde wie folgt aussehen:

Symbol ganz rechts

Wenn Sie möchten, dass das Symbol ganz rechts in der Steuerleiste angezeigt wird, ersetzen Sie das insertBefore() mit dem appendChild() Methode, wie hier gezeigt:

controlBar.appendChild(newElement);

Ein Beispiel für das Hinzufügen eines Symbols (zum Herunterladen einer Datei in diesem Fall) wird im Brightcove Player Sample gezeigt: Laden Sie das Video Plugin Dokument herunter.

Verwenden Sie den Abstandshalter

Obwohl die oben genannten Techniken zum Platzieren von Symbolen in der Steuerleiste funktionieren, sind sie möglicherweise nicht mit anderem Code kompatibel, der die Steuerleiste manipuliert. Außerdem möchten Sie den Code höchstwahrscheinlich nicht zur allgemeinen Wiederverwendung in ein Plugin abstrahieren.

Schwachstellen im vorherigen Absatz können mit dem Special behoben werden Abstandshalter Element, das speziell zum Hinzufügen von Symbolen in die Steuerleiste eingefügt wurde. Der Nachteil des Abstandshalters besteht darin, dass Sie nicht die vollständige Kontrolle darüber haben, wo das Symbol platziert werden kann, während Sie die zuvor in diesem Abschnitt gezeigten Techniken verwenden.

Das Abstandselement befindet sich in der Steuerleiste zwischen den Zeitinformationen links und dem Vollbildsymbol rechts, wie im folgenden Screenshot gezeigt (hervorgehoben im grünen Oval). Beachten Sie in der Elemente Im Abschnitt der Dev Tools wird das Element als HTML definiert <div>.

Um ein Symbol im Spacer-Element zu platzieren, verwenden Sie den folgenden Code, der dem zuvor in diesem Abschnitt gezeigten Code sehr ähnlich ist. Das Ergebnis des Codes wird im Screenshot angezeigt, der dem Code-Snippet folgt.

// Get the spacer element
spacer = document.getElementsByClassName('vjs-spacer')[0];
// Place the new element in the spacer
spacer.appendChild(newElement);

Wenn Sie das Symbol auf der rechten Seite des Abstandshalters platzieren möchten, muss eine andere Codezeile verwendet werden. Das Spacer-Layout wird von einer HTML-Flexbox gesteuert. Wenn Sie also einen Flexbox-Stil hinzufügen, können Sie das hinzugefügte Symbol nach rechts verschieben. Das Ergebnis des Codes wird im Screenshot angezeigt, der dem Code-Snippet folgt.

// Set the content of the spacer to be right justified
spacer.setAttribute("style", "justify-content: flex-end;");

/playback/ios-and-brightcove-player.html/playback/ios-and-brightcove-player.html

Entfernen Sie die Vollbild-Schaltfläche

Es kann zu Problemen kommen, wenn Sie die Vollbildanzeige von Videos unter iOS zulassen iOS und Brightcove Player Dokument. Wenn Sie die Vollbild-Schaltfläche aus der Steuerleiste entfernen möchten, können Sie dies mit folgendem Code tun:

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
      fullScreenElement = document.getElementsByClassName("vjs-fullscreen-control")[0];
    if (videojs.browser.IS_IOS ) {
      fullScreenElement.parentNode.removeChild(fullScreenElement);
    }
  });
</script>

Beachten Sie das if Anweisung, so dass die Schaltfläche nur auf iOS-Geräten entfernt wird.

Kontrollleisten-Symbol "leuchten"

Sie können den Textschatten (manchmal auch als "Glühen" bezeichnet) der Symbole in der Steuerleiste ändern. Beispielsweise möchten Sie möglicherweise die Farbe ändern oder das Leuchten erhöhen, um das Symbol stärker zu fokussieren. Der folgende Screenshot zeigt den Textschatten in Rot.

Der angezeigte Effekt wird durch Ändern des CSS erzielt text-shadow. Der Selektor bestimmt, dass die Änderung nur erfolgt, wenn das Symbol Fokus- oder Schwebezustände hat.

.video-js .vjs-control:hover:before, .video-js .vjs-control:focus:before {
  text-shadow: 0 0 1em #f00,0 0 1em #f00,0 0 1em #f00;
}

Weitere Informationen zum ziemlich komplexen text-shadow Stil, siehe MDNs Textschatten Dokument.

Schwebegradient

Wenn der Player zum ersten Mal geladen wird und wenn Sie mit der Maus über den Player fahren, wird der Videotitel sowie ein schwarzer bis transparenter Farbverlauf über dem oberen Bereich des Players angezeigt. In diesem Abschnitt erfahren Sie, wie Sie den Verlauf ändern.

Der tatsächliche Gradient wird vom CSS gesteuert linear-gradient Funktion in der vjs-dock-text HTML <div>. Die Größe des Verlaufs kann durch die Höhe des Verlaufs gesteuert werden vjs-dock-text HTML <div>. Hier ist dieses Element und seine Kinder vom Spieler:

<div class="vjs-dock-text">
  <h1 class="vjs-dock-title">Tiger</h1>
  <h2 class="vjs-dock-description"></h2>
</div>

Die Standardwerte für den Verlauf verwenden die rgba() (Rot-Grün-Blau-Alpha) -Funktion, wie hier gezeigt:

linear-gradient(180deg,rgba(0,0,0,.8) 25%,transparent 100%);

Diese Werte bewirken, dass der Gradient horizontal von Schwarz mit einem Alpha von verblasst .8 zu transparent. Der Wert von 25% ist ein Grenzwert, dh der in der rgba Die Funktion wird für die ersten 25% des Raums verwendet, bevor das Überblenden in transparent beginnt.

Zu Unterrichtszwecken erstellt der folgende Stil den Verlauf im Screenshot, da Sie diesen Verlauf in der Produktion nicht verwenden würden.

.video-js .vjs-dock-text {
  background: linear-gradient(45deg, rgba(0,0,255,.8) 35%, transparent);
  height: 80%;
}

In diesem Beispiel wird ein blauer Farbverlauf mit einem Alpha von 0,8 in einem Gefälle von 45 Grad angewendet. Die im linearen Verlauf eingestellte Farbe / Alpha wird für die ersten 35% des Verlaufs verwendet, bevor er zu verblassen beginnt. Außerdem werden 80% der Elementhöhe verwendet.

Mit dem folgenden CodePen können Sie mit Werten experimentieren. Starten Sie das Video und die Maus, um den standardmäßig verwendeten subtilen Farbverlauf anzuzeigen.

Siehe den Stift Hover Gradient Luna Skin von Brightcove Learning Services (@bcls ) auf CodePen.

Beschriftungslistenelemente

Wenn Sie die Listenelemente im Untertitelmenü formatieren / steuern möchten, werden die Selektoren hier angezeigt:

Sie können alle Elemente mit der Auswahl formatieren:

.vjs-subs-caps-button .vjs-menu .vjs-menu-content .vjs-menu-item.

CSS-Spezifität

Die CSS-Spezifität bezieht sich auf die Art und Weise, wie Browser bestimmen, welche Eigenschaftswerte basierend auf ihrer Relevanz auf ein Element angewendet werden. Einzelheiten zu diesem Konzept finden Sie im Besonderheit Artikel.

Überprüfen Sie in Chrome die große Wiedergabetaste. Beachten Sie, dass die background Eigenschaft mit mehreren Klassen festgelegt wird. Dies bedeutet, dass wir nicht nur die eine .vjs-big-play-button Klasse verwenden können, um diese Eigenschaft zu überschreiben.

Hier sind drei Ansätze, um den großen Play-Button anzupassen:

Verweise auf eine dem Spieler zugewiesene ID.
Verwenden Sie mehrere Klassen, um die Relevanz der Eigenschaften zu erhöhen.
Verwenden Sie JavaScript, um das id-Attribut für den Player festzulegen und dann im CSS darauf zu verweisen.

Verweisen auf eine ID

Da ein id Attribut eine hohe Relevanz für die CSS-Spezifität aufweist, überschreibt das Hinzufügen eines id zum CSS-Selektor background-color eigentum.

Falls noch nicht geschehen, fügen Sie ein . hinzu id dem zuschreiben video Elemente wie folgt:

<video-js id="video_1"
  data-account="1752604059001"
  data-player="68f30408-8fb4-431d-accb-8c5baa8c4790"
  data-embed="default"
  controls=""></video-js>

Fügen Sie im CSS den ID-Wert zum .vjs-big-play-button Klassenselektor hinzu. Überschreiben Sie die Hintergrundfarbe und die Deckkraft wie folgt:

<style>
  #video_1 .vjs-big-play-button {
      background-color: #B37D5B;
      opacity: .6;
    }
    .video-js {
      width: 640px;
      height: 360px;
    }
</style>

Du solltest sehen, dass der große Play-Button jetzt orange ist.

Verwenden mehrerer Klassen

Seit der background Die Eigenschaft für die große Wiedergabetaste wird mit zwei Klassen festgelegt. Sie benötigen mindestens zwei Klassen im CSS-Selektor, um diese Eigenschaft zu überschreiben.

Fügen Sie die .video-js Klasse zum .vjs-big-play-button Klassenselektor hinzu. Denken Sie daran, dass die .video-js Klasse auf dem Videocontainer festgelegt ist.

Mit diesen Werten sagen wir, wählen Sie alle Elemente mit dem Klassennamen von aus vjs-big-play-button Das sind Nachkommen von Elementen mit dem Klassennamen .video-js.

<style>
  .video-js .vjs-big-play-button {
    background-color: #B37D5B;
    opacity: .6;
  }
  .video-js {
    width: 640px;
    height: 360px;
  }
</style>

Du solltest sehen, dass der große Play-Button jetzt orange ist. Das Arbeiten mit mehreren Klassen kann schwierig sein und sich auf mehrere Elemente auswirken, während eine ID für ein Element spezifisch ist.

Verwenden von JavaScript

Sie können JavaScript auch verwenden, um dem großen Play-Button dynamisch eine ID hinzuzufügen. Dann können Sie diese ID aus dem CSS referenzieren.

Fügen Sie Code hinzu, um dem Element „Big Play Button“ eine ID hinzuzufügen.

Linie 173: Ruft einen Verweis auf das erste Element ab, das eine Klasse von hat vjs-big-play-button.
Linie 174: Fügt dem großen Play-Button ein id Attribut hinzu.

  <script type="text/JavaScript">

    var playButton = document.getElementsByClassName("vjs-big-play-button")[0];
    playButton.setAttribute("id", "myPlayButton");

  </script>

Ändern Sie im CSS den Selektor, um den myPlayButton ID-Namen zu verwenden.

<style>
    #myPlayButton {
      background-color: #B37D5B;
      opacity: .6;
    }
    .video-js {
      width: 640px;
      height: 360px;
    }
  </style>

Du solltest sehen, dass der große Play-Button jetzt orange ist.

Komponentenselektoren

Diese Screenshots und die folgende Tabelle zeigen die Komponenten und die CSS-Selektoren, die zum Bearbeiten dieser Komponente erforderlich sind. Weitere Informationen zu den Komponenten selbst finden Sie in der Komponentenübersicht doc.

Beim Laden und Schweben des Spielers

Während der Wiedergabe

Zusammenfassung der Komponentenselektoren

Komponente	Selektor
bigPlayButton	`.video-js.vjs-mouse .vjs-big-play-button`
ControlBar	`.video-js .vjs-control-bar` (Inherited by icons in the ControlBar, but NOT the ProgressControl)
PlayToggle	`.video-js .vjs-play-control`
MuteToggle	`.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal`
VolumeBar	`.vjs-volume-bar.vjs-slider-bar.vjs-slider.vjs-slider-horizontal`
VolumElevel	`.video-js .vjs-volume-level`
currentTimeDisplay	`.video-js .vjs-current-time`
TimediVider	`.video-js .vjs-time-divider`
DurationDisplay	`.video-js .vjs-duration`
SeekBar	`.video-js .vjs-progress-control.vjs-control`
LoadProgressBar	`.video-js .vjs-load-progress`
PlayProgressBar	`.video-js .vjs-play-progress.vjs-slider-bar`
AudioTrack	`.video-js .vjs-control-bar .vjs-audio-button`
ChaptersButton	`.video-js .vjs-chapters-button.vjs-menu-button`
Untertitel-Button	`.video-js .vjs-captions-button.vjs-menu-button`
Qualitätswähler	`.vjs-quality-menu-wrapper.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-quality-menu-button-use-resolution`
FullScreenToggle	`.video-js .vjs-fullscreen-control.vjs-control`
DockText	`.vjs-dock-text` (Inherited by both DockTitle and DockDescription)
DockTitle	`.vjs-dock-title`
DockDescription	`.vjs-dock-description`

Wenn der von Ihnen gesuchte Selektor nicht in der Tabelle enthalten ist, teilen Sie uns dies bitte per E-Mail mit mit Wissensteam und wir werden es in den Tisch bekommen.

{PLAYER_CLASS}

Das {PLAYER_CLASS} ist ein Selektor und wird durch den eigentlichen klassenspezifischen Selektor für den Spieler ersetzt, zum Beispiel:

.bc-player-oH9IdGudo_default

{PLAYER_CLASS} helps you make your CSS specific enough to overwrite the built-in styles without having to make CSS for each player individually or use something like:

.video-js.video-js

Angenommen, Sie möchten den Ladespinner überschreiben, können Sie Folgendes verwenden:

.video-js.video-js .vjs-loading-spinner {...}

Das ist spezifisch genug, um die Standardeinstellung zu überschreiben, aber wenn Sie zufällig einen zweiten Spieler auf der Seite haben. Die Verwendung der folgenden Optionen wirkt sich NICHT auf andere Spieler auf der Seite aus:

.video-js{PLAYER_CLASS} .vjs-loading-spinner {...}

Notiere dass der {PLAYER_CLASS} Der Selektor kann nur in CSS-Dateien verwendet werden, die einem Array mit Player-Konfigurationsstylesheets hinzugefügt werden (z. B. über Studio oder die Player-Verwaltungs-API) und direkt in den Player integriert sind. Dieser Selektor funktioniert nicht mit dem erweiterten Implementierungscode CSS, der separat über enthalten ist <style></style> oder <link></link> Stichworte.