Video-Player video-player

Der Video-Player ist der rechteckige Bereich, in dem der Videoinhalt im Viewer angezeigt wird.

Wenn die Abmessungen des wiedergegebenen Videos nicht den Abmessungen des Video-Players entsprechen, wird der Videoinhalt im rechteckigen Anzeigebereich des Video-Players zentriert.

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild des Video-Players:

.s7videoviewer .s7videoplayer

CSS-Eigenschaften des Video-Players

Die Fehlermeldung, die angezeigt wird, wenn das System das Video nicht abspielen kann, kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: So richten Sie einen Video-Viewer ein, wobei die Größe des Video-Players auf 512 x 288 Pixel eingestellt ist.

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

Untertitel werden in einen internen Container im Video-Player 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 dem folgenden CSS-Klassenselektor gesteuert:

. s7videoviewer .s7 videoplayer .s7caption

CSS-Eigenschaften von Untertiteln

Beispiel: So legen Sie für Text für Untertitel einen Wert von 14 Pixeln (hellgrau, Arial®) auf einem halbtransparenten schwarzen Hintergrund fest:

.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 Wartesymbols

Beispiel: Eine Puffer-Animation soll 101 Pixel breit und 29 Pixel hoch sein:

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