Videobauktor video-scrubber

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:

.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob

CSS-Eigenschaften des Video-Scrubbers

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

.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .s7videoscrubber .s7trackplayed

CSS-Eigenschaften des track

Der folgende CSS-Klassenselektor steuert den Knoten:

.s7videoviewer .s7videoscrubber .s7knob

CSS-Eigenschaften des Knotens

Der folgende CSS-Klassenselektor steuert die Wiedergabedauer:

.s7videoviewer .s7videoscrubber .s7videotime

CSS-Eigenschaften der Wiedergabedauer

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

Beispiel - Um einen Video-Viewer mit einem Video-Scrubber mit benutzerdefinierten Track-Farben einzurichten. Der Scrubber muss zehn Pixel groß sein und zehn Pixel und 35 Pixel von den oberen und linken Kanten der Steuerleiste positioniert werden.

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

Wenn die Videokapzeichnung mit dem Parameter navigation aktiviert ist, werden Kapitelspeicherorte als Markierungen auf der Video-Scrubber-Spur angezeigt.

Die Videokapitelmarke wird durch den folgenden CSS-Klassenselektor gesteuert:

 .s7videoviewer .s7videoscrubber .s7navigation

CSS-Eigenschaften der Videokapitelmarke

Beispiel - Um eine Videokapitelmarke einzurichten, die 5 x 8 Pixel groß ist und unterschiedliche Grafiken für den Status "Standard"und "Over"verwendet.

.s7videoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7videoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7videoviewer .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:

.s7videoviewer .s7videoscrubber .s7chapter

CSS-Eigenschaften des Videokapitels blase

Beispiel - Um eine Videokapitelblase einzurichten, die 235 Pixel breit ist und 8 Pixel nach oben vom unteren Rand der Videokassettenspur entfernt ist.

.s7videoviewer .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:

.s7videoviewer .s7videoscrubber .s7chapter .s7header

CSS-Eigenschaften des Kapitelblasen-Headers des Videos

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

.s7videoviewer .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:

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

CSS-Eigenschaften der Videokapitelstartzeit

Beispiel - Zum Einrichten der Kapitelstartzeit mit grauen zehn Pixel Verdana-Schriftart und mit einem Abstand von zehn Pixeln auf der rechten Seite.

.s7videoviewer .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:

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title

CSS-Eigenschaften des Videokapiteltitels

Beispiel - Um einen Videokapiteltitel einzurichten, der eine weiße, fette, zehn Pixel große Verdana-Schriftart verwendet.

.s7videoviewer .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:

 .s7videoviewer .s7videoscrubber .s7chapter .s7description

CSS-Eigenschaften der Videokapitelbeschreibung

Beispiel - Zum Einrichten einer Videokapitelbeschreibung mit einer dunkelgrauen, 11 Pixel großen Verdana-Schriftart mit hellgrauem Hintergrund. Und schließlich verwendet fünf Pixelzeilenhöhe, 12-Pixel-horizontaler Abstand, 12-Pixel-Top-Abstand und neun Pixel-Bodenabstände.

.s7videoviewer .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:

 .s7videoviewer .s7videoscrubber .s7chapter .s7tail

CSS-Eigenschaften des Keil-Connectors

Beispiel - Um einen grauen, sechs Pixel großen Keil-Connector einzurichten:

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