Der Videoplayer ist der rechteckige Bereich, in dem der Videoinhalt im Viewer angezeigt wird.
Wenn die Abmessungen des abgespielten Videos nicht mit den Abmessungen des Videoplayers übereinstimmen, wird der Videoinhalt innerhalb des Anzeigebereichs für das Rechteck des Videoplayers zentriert.
Der folgende CSS-Klassenselektor steuert das Erscheinungsbild des Videoplayers:
.s7videoviewer .s7videoplayer
CSS-Eigenschaften des Videoplayers
background-color |
Hintergrundfarbe der Hauptansicht. |
Die Fehlermeldung, die angezeigt wird, wenn das System das Video nicht wiedergeben kann, kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Zum Einrichten eines Video-Viewers mit einer Videoplayergröße von 512 x 288 Pixel.
.s7videoviewer .s7videoplayer{
background-color: transparent;
}
Geschlossene Untertitel werden in einen internen Container im Videoplayer eingefügt. Die Position dieses Containers wird durch unterstützte WebVTT-Positionierungsoperatoren gesteuert. Der Beschriftungstext selbst befindet sich in diesem Container und sein Stil wird mit der folgenden CSS-Klassenauswahl gesteuert:
. s7videoviewer .s7 videoplayer .s7caption
CSS-Eigenschaften von verdeckten Untertiteln
background-color |
Geschlossener Beschriftungstexthintergrund. |
color |
Textfarbe für Beschriftung schließen. |
Schriftstärke |
Schriftstärke der verdeckten Beschriftung. |
Schriftgröße |
Schriftgröße der verdeckten Beschriftung. |
Schriftfamilie |
Geschlossene Beschriftungsschrift. |
Beispiel - So richten Sie den Text für geschlossene Beschriftungen auf einem halbtransparenten schwarzen Hintergrund auf 14 Pixel, hellgrau, Arial® ein:
.s7videoviewer .s7videoplayer .s7caption {
background-color: rgba(0,0,0,0.75);
color: #e6e6e6;
font-weight: normal;
font-size: 14px;
font-family: Arial,Helvetica,sans-serif;
}
Das Erscheinungsbild der Pufferanimation wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7videoplayer .s7waiticon
CSS-Eigenschaften des Wartezeichens
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Breite des Animationssymbols |
height |
Höhe des Animationssymbols |
margin-left |
Animationssymbol am linken Rand, normalerweise minus der Hälfte der Breite des Symbols. |
margin-top |
Der obere Rand des Animationssymbols, normalerweise minus der Hälfte der Höhe des Symbols. |
background-image |
Knob-Grafik. |
Beispiel: Zum Einrichten einer Pufferanimation, die 101 Pixel breit und 29 Pixel hoch ist:
.s7videoviewer .s7videoplayer .s7waiticon {
width: 101px;
height: 29px;
margin-left: -50px;
margin-top: -15px;
background-image: url(images/sdk/busyicon.gif);
}