Videobauber

Der Video-Scrubber ist das horizontale Regler-Steuerelement, mit dem ein Benutzer dynamisch an eine beliebige Zeitposition innerhalb des derzeit wiedergegebenen Videos suchen kann.

Der Scrubber-Knopf bewegt sich auch, während das Video abgespielt wird, um die aktuelle Zeitposition des Videos während der Wiedergabe anzugeben. Der Video-Scrubber nimmt immer die gesamte Breite der Steuerleiste ein. Es ist möglich, den Video-Scrubber zu entlüften und seine Höhe und vertikale Position durch CSS zu ändern.

Das allgemeine Erscheinungsbild des Video-Scrubbers wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7videoscrubber 
.s7interactivevideoviewer .s7videoscrubber .s7videotime 
.s7interactivevideoviewer .s7videoscrubber .s7knob

CSS-Eigenschaften des Video-Scrubbers

Anfang

Position vom oberen Rand, einschließlich Abstand.

unten

Position vom unteren Rand, einschließlich Abstand.

height

Höhe des Video-Scrubbers.

background-color

Die Farbe des Video-Scrubbers.

Die folgenden CSS-Klassenselektoren verfolgen Hintergrund-, Wiedergabe- und Lastindikatoren:

.s7interactivevideoviewer .s7videoscrubber .s7track 
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded 
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed

CSS-Eigenschaften des Tracks

height

Höhe der entsprechenden Strecke.

background-color

Die Farbe der entsprechenden Strecke.

Der folgende CSS-Klassenselektor steuert den Knoten:

.s7interactivevideoviewer .s7videoscrubber .s7knob

CSS-Eigenschaften des Knotens

Anfang

Vertikaler Drehversatz.

width

Breite des Knopfes.

height

Höhe des Knotens.

background-image

Knob-Grafik.

background-position

Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

Der folgende CSS-Klassenselektor steuert die Wiedergabedauer:

.s7interactivevideoviewer .s7videoscrubber .s7videotime

CSS-Eigenschaften der wiedergegebenen Blase

Schriftfamilie

Die Schriftfamilie, die für die Zeitanzeige verwendet werden soll.

Schriftgröße

Die Schriftgröße, die für die Zeitanzeige verwendet werden soll.

color

Die Schriftfarbe für die Zeitanzeige.

width

Blasenbereichbreite.

height

Blasenbereichshöhe.

Padding

Blasenflächen-Umrandung.

background-image

Blasengrafik.

background-position

Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

text-align

Ausrichtung des Texts am Blasenbereich

Die QuickInfo für Video-Scrubber kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

Beispiel : Zum Einrichten eines Video-Viewers mit einem Video-Scrubber und benutzerdefinierten Track-Farben, die zehn Pixel groß sind. Positionieren Sie sie zehn Pixel und 35 Pixel von den oberen und linken Kanten der Steuerleiste.

.s7interactivevideoviewer .s7videoscrubber  { 
top:10px; 
left:35px; 
height:10px; 
background-color:#AAAAAA; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7track { 
height:10px; 
background-color:#444444; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded { 
height:10px; 
background-color:#666666; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed { 
height:10px; 
background-color:#888888; 
}

Wenn die Videokapitelmarke mit dem Parameter navigation aktiviert ist, werden Kapitelspeicherorte als Markierungen auf der Videokassettenspur angezeigt.

Die Videokapitelmarke wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7interactivevideoviewer .s7videoscrubber .s7navigation

CSS-Eigenschaften der Videokapitelmarke

width

Breite der Videokapitelmarke.

height

Höhe der Videokapitelmarke.

background-image

Grafik zur Videokapitelmarkierung.

background-position

Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der Sie verschiedene Skins auf verschiedene Schaltflächenzustände anwenden können. Insbesondere entspricht selected='default' dem standardmäßigen Videokapitelmarkierungsstatus und selected='over' wird verwendet, wenn die Videokapitelmarke durch eine Maus- oder Berührungsgeste aktiviert wird.

Beispiel - Zum Einrichten einer Videokapitelmarke mit einer Größe von 5 x 8 Pixel und verwendet unterschiedliche Grafiken für den Status "Standard"und "über".

.s7interactivevideoviewer .s7videoscrubber .s7navigation { 
width:5px; 
height:8px; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] { 
background-image: url("images/v2/VideoScrubberDiamond.png"); 
} 
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] { 
background-image: url("images/v2/VideoScrubberDiamond_over.png"); 
}

Die Kapitelblase für Videos wird über der Videokapitelmarke positioniert und zeigt den Titel, die Startzeit und die Beschreibung für ein bestimmtes Kapitel an. Es ist möglich, die maximale Blasenbreite und den vertikalen Versatz relativ zum Video-Scrubber-Track zu steuern. Der Rest wird automatisch von der Komponente berechnet.

Die Kapitelblase für Videos wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7interactivevideoviewer .s7videoscrubber .s7chapter

CSS-Eigenschaften der Videokapitelblase

max-width

Maximale Breite der Videokapitelblase.

unten

Vertikaler Versatz der Video-Scrubber-Spur.

Beispiel : Zum Einrichten einer Videokapitelblase, die 235 Pixel breit und 8 Pixel nach oben vom unteren Rand der Videokassettenspur entfernt ist.

.s7interactivevideoviewer .s7videoscrubber .s7chapter { 
max-width:235px; 
bottom:8px; 
}

Die Kapitelblase für Videos besteht aus einer optionalen Kopfzeile und einem optionalen Inhalt. Die Kopfzeile verfügt über die optionale Kapitelstartzeit und den Kapiteltitel.

Die Kopfzeile wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

CSS-Eigenschaften des Kapitelblasen-Headers des Videos

height

Höhe der Kopfzeile des Videokapitels.

Padding

Innerer Abstand für Kopfzeilentext von Videokapiteln.

background-color

Hintergrundfarbe der Videokapitelblase mit Kopfzeile.

line-height

Höhe der Textlinie der Videokapitelblase in der Kopfzeile.

Beispiel : Zum Einrichten eines Kapitelblasen-Headers für Videos, der 22 Pixel hoch ist, einer 22 Pixel langen Zeilenhöhe, einem horizontalen Rand von 12 Pixel und einem grauen Hintergrund.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header { 
height:22px; 
padding:0 12px; 
line-height:22px; 
background-color: rgba(51, 51, 51, 0.8); 
}

Die Startzeit des Videokapitels wird durch die folgende CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

CSS-Eigenschaften der Videokapitelstartzeit

color

Textfarbe.

Schriftstärke

Schriftstärke.

Schriftgröße

Schriftgröße.

Schriftfamilie

Schriftfamilie.

padding-right

Abstand zwischen der Startzeit und dem Kapiteltitel.

Beispiel - Zum Einrichten der Kapitelstartzeit mit der grauen 10 Pixel Verdana-Schriftart und dem Abstand von 10 Pixel auf der rechten Seite.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime { 
color: #dddddd; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
padding-right: 10px; 
}

Der Videokapiteltitel wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title

CSS-Eigenschaften des Videokapiteltitels

color

Textfarbe für Videokapiteltitel.

Schriftstärke

Schriftgröße für Videokapiteltitel

Schriftgröße

Schriftgröße für Videokapiteltitel.

Schriftfamilie

Schriftfamilie der Videokapiteltitel.

Beispiel - Zum Einrichten eines Videokapiteltitels mit einer weißen, fett gedruckten Verdana-Schriftart mit zehn Pixel.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title { 
color: #ffffff; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
font-weight: bold; 
}

Die Beschreibung des Videokapitels wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

CSS-Eigenschaften der Videokapitelbeschreibung

color

Textfarbe der Videokapitelbeschreibung.

background-color

Hintergrundfarbe der Videokapitelbeschreibung.

Schriftstärke

Schriftstärke der Videokapitelbeschreibung.

Schriftgröße

Schriftgröße der Videokapitelbeschreibung.

Schriftfamilie

Schriftfamilie der Videokapitelbeschreibung.

line-height

Zeilenhöhe der Videokapitelbeschreibung

Padding

Beschreibung des Videokapitels - innerer Abstand.

Beispiel : Um eine Videokapitelbeschreibung mit einer dunkelgrauen, 11 Pixel großen Verdana-Schriftart mit hellgrauem Hintergrund einzurichten. Eine 5-Pixel-Zeilenhöhe, ein horizontaler Abstand von 12 Pixeln, ein Top-Abstand von 12 Pixel und ein Abstand von neun Pixel am Boden.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description { 
color: #333333; 
background-color: rgba(221, 221, 221, 0.9); 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 11px; 
line-height: 15px; 
padding: 12px 12px 9px; 
}

Der Keil-Connector am unteren Rand der Kapitelblase wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

CSS-Eigenschaften des Keil-Connectors

border-color

Farbe des Wedge-Connectors.

Definiert als <color> transparent , sodass nur die Farbe des oberen Rands definiert und die verbleibenden Ränder transparent bleiben.

border-width

Breite des Wedge-Connectors.

Definiert als <width> <width> 0 , sodass dieselbe Breite nur für die oberen und horizontalen Ränder und die untere Rahmenbreite 0 definiert ist.

margin

Definiert nur eine negative untere Marge. Sie sollte denselben Wert wie border-width haben.

Beispiel : So richten Sie einen grauen, sechs Pixel großen Keil-Connector ein:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail { 
border-color: rgba(221, 221, 221, 0.9) transparent transparent; 
border-width: 6px 6px 0; 
margin: 0 0 0 -6px; 
}

Auf dieser Seite