Videoplayer

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 Rechteckanzeigebereichs des Videoplayers zentriert.

Die folgende CSS-Klassenauswahl steuert das Erscheinungsbild des Videoplayers:

.s7interactivevideoviewer .s7videoplayer

CSS-Eigenschaften des Videoplayers

background-color

Hintergrundfarbe der Haupt-Ansicht.

Sie können die Fehlermeldung lokalisieren, die angezeigt wird, wenn das System das Video nicht abspielen kann.

Siehe Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Zum Einrichten eines Video-Viewers mit einer Videoplayer-Größe von 512 x 288 Pixel.

.s7interactivevideoviewer .s7videoplayer{ 
background-color: transparent; 
}

Untertitel werden in einen internen Container im Videoplayer eingefügt. Die Position dieses Containers wird von unterstützten WebVTT-Positionierungsoperatoren gesteuert. Der Beschriftungstext selbst befindet sich in diesem Container und sein Stil wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7videoplayer .s7caption

CSS-Eigenschaften von Untertiteln

background-color

Hintergrund für Bildunterschrift

color

Untertitel-Textfarbe schließen

font-Gewichtung

Gewichtung der Bildunterschrift

font-size

Schriftgröße der Bildunterschrift.

font-family

Geschlossene Beschriftungsschrift.

Beispiel

So richten Sie den Bildunterschriften-Text auf einem halbtransparenten schwarzen Hintergrund auf 14 Pixel (hellgrau, Arial) ein:

.s7interactivevideoviewer .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 der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7videoplayer .s7waiticon

CSS-Eigenschaften des Wartezeichens

CSS-Eigenschaft

Beschreibung

width

Breite des Animationssymbols

height

Höhe des Animationssymbols

margin-left

Animationssymbol links, normalerweise minus die Hälfte der Breite des Symbols.

margin-top

Animationssymbole am oberen Rand, normalerweise minus der Hälfte der Höhe des Symbols.

background-image

Knob-Grafik.

Beispiel: Um eine Pufferung mit einer Breite von 101 Pixeln und einer Höhe von 29 Pixeln einzurichten, müssen Sie eine Animation mit Pufferung einrichten:

.s7interactivevideoviewer .s7videoplayer .s7waiticon { 
 width: 101px; 
 height: 29px; 
 margin-left: -50px; 
 margin-top: -15px; 
 background-image: url(images/sdk/busyicon.gif); 
}

Auf dieser Seite