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 per CSS zu belichten, seine Höhe und vertikale Position zu ändern.
Das allgemeine Erscheinungsbild des Video-Scrubbers wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .s7videoscrubber
.s7smartcropvideoviewer .s7videoscrubber .s7videotime
.s7smartcropvideoviewer .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:
.s7smartcropvideoviewer .s7videoscrubber .s7track
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded
.s7smartcropvideoviewer .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:
.s7smartcropvideoviewer .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:
.s7smartcropvideoviewer .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. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel - Um einen Video-Viewer mit einem Video-Scrubber mit benutzerdefinierten Tracking-Farben einzurichten, die zehn Pixel groß sind. Und schließlich, lassen Sie es 10 Pixel und 35 Pixel von der oberen und linken Kante der Steuerleiste positioniert.
.s7smartcropvideoviewer .s7videoscrubber {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7smartcropvideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7smartcropvideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}