Überblick: Komponenten

Produkt (e)
Brightcove-Player
Video Cloud
Rolle (n)
Spieler Entwickler
Thema (n)
Architektur

Der Brightcove-Player baut auf einer einfachen, benutzerdefinierten UI-Komponentenarchitektur auf. Dieses Thema gibt einen kurzen Einblick in die Komponenten und deren Struktur.

Dies ist ein Übersichtsdokument. Informationen zum Ändern der Komponenten finden Sie in der Spieler Aussehen anpassen Dokument.

Komponenten beschriftet

Es folgen Screenshots des Players, beim Laden des Players und bei der Wiedergabe eines Videos mit den beschrifteten Komponenten.

Beim Laden und Bewegen des Spielers

Komponenten bei Belastung

Während der Wiedergabe

Wiedergabe von Komponenten

Informationen zu CSS-Selektoren für diese Komponenten finden Sie in der Spieler Aussehen anpassen Unterlagen Komponentenauswahl Abschnitt.

Hierarchische Struktur

 

Die standardmäßige hierarchische Komponentenstruktur des Players ist wie folgt:

Spieler Spieler PosterImage TextTrackDisplay DockText DockTitle DockDescription DockShelf LoadingSpinner BigPlayButton ControlBar PlayToggle VolumePanelHorizontal MuteToggle Volume VolumeBar Volume CurrentTimeDisplay TimeDivider DurationDisplay ProgressControl ProgressHolder SeekBar LoadProgressBar PlayProgressBar SeekHandle Livecontrol RemainingTimeDisplay Spacer PlaybackRate ChaptersButton DescriptionsButton SubtitlesCaptionsButton AudioTrackButton FullscreenToggle ErrorDisplayModal ModalDialog InfoModal

Sie können die Struktur der Komponenten auch in der Ansicht anzeigen Elements Registerkarte der Dev Tools eines Browsers. Sie sehen die Elemente im Screenshot unten. Beispielsweise sind die untergeordneten Elemente der ControlBar gelb hervorgehoben.

Elemente in Entwicklungswerkzeugen

Begriffsbestimmungen

Definitionen für Schlüsselkomponenten finden Sie in der folgenden Tabelle:

Komponente Beschreibung
PosterBild Das Bild wird angezeigt, bis das Video abgespielt wird
TextTrackDisplay Text, der als separate Spur für Untertitel und Untertitel angezeigt wird (im WebVTT-Format)
LadeSpinner Das animierte Drehfeld, das angezeigt wird, bis das Video geladen ist
BigPlayButton Die Wiedergabetaste wird im Bereich der Schaltfläche zur Ladezeit angezeigt
Kontrollleiste Der Container für alle Haupt-Player-Steuerelemente
PlayToggle Die Wiedergabetaste, die zwischen Wiedergabe und Pause wechselt
MuteToggle Die Taste zum Umschalten zwischen Audio stummgeschaltet und nicht
Lautstärkeregelung Schieberegler zum Steuern der Lautstärke
VolumeLevel Zeigt die aktuelle Lautstärke an, wenn Sie den Mauszeiger über die Lautstärkeleiste bewegen
VolumenHandle Zeigt die aktuelle Position des Lautstärkepegels an und kann zum Anpassen des Lautstärkepegels gezogen werden
AktuellesTimeDisplay Die aktuelle Dauer des wiedergegebenen Videos wird in mm angezeigt: ss
Zeitteiler Der Schrägstrich '/' trennt die aktuelle Dauer und die Dauer des Videos
DurationDisplay Die Gesamtdauer des Videos
ProgressControl Die Komponente, die die Such-, Ladefortschritts- und Fortschrittsbalken enthält
Suchleiste Medienleiste, die beim Empfang des Ereignisses, dass Medien abgerufen wurden, aktiv wird
LoadProgressBar Zeigt den Fortschritt des abgerufenen Videos an
PlayProgressBar Zeigt den Fortschritt des abgespielten Videos an
SeekHandle Zeigt die aktuelle Position des Abspielkopfs während der Wiedergabe an und kann zum Anpassen des Abspielkopfs gezogen werden
LiveControl Zeigt das Wort an LIVE wenn Sie einen Live-Feed streamen
RemainingTimeDisplay Zeigt die Dauer des noch zu spielenden Videos an
Abstandshalter Element, das speziell zum Hinzufügen von Symbolen in die ControlBar eingefügt wird
Wiedergabegeschwindigkeit Zeigt die Wiedergaberate an
KapitelButton Schaltfläche zum Anzeigen von Kapiteln
Bildunterschriften Umschalten, um das Formular für die Untertiteleinstellungen anzuzeigen
FullScreenToggle Schaltfläche zum Umschalten der Vollbildanzeige
CaptionsSettings Formular zum Anzeigen und Ändern der Beschriftungseinstellungen
DockText Container für den Titel und die Beschreibung
DockTitel Titel des Videos
Dock Beschreibung Kurzbeschreibung des Videos
DockShelf Verwendet vom Social Media Plugin

Klasseninformationen

Die Player-Klasse und alle Steuerelementklassen erben von der Component-Klasse oder einer Unterklasse von Component.

videojs.Control = videojs.Component.extend (); videojs.Button = videojs.Control.extend (); videojs.PlayToggle = videojs.Button.extend ();

Die UI-Komponentenarchitektur erleichtert das Hinzufügen von untergeordneten Komponenten zu einer übergeordneten Komponente und den Aufbau einer vollständigen Benutzeroberfläche, z. B. der Steuerelemente für den Video.js-Player. Wenn Sie eine untergeordnete Komponente hinzufügen, fügt sie das Element dieses untergeordneten Elements in das Element des übergeordneten Elements ein und ermöglicht es Ihnen, das Element nach Bedarf zu bearbeiten, wie hier gezeigt:

myButton = myPlayer.controlBar.addChild ('Button'); myButton.addClass ('bc-download-button'); myButton.on ('Klicken', Funktion () {...})