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
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:
.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .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:
.s7videoviewer .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:
.s7videoviewer .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 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 der Funktion navigation
-Parameter 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
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 . |
Diese Schaltfläche unterstützt beide state
-Attributauswahl, mit der Sie verschiedene Skins auf unterschiedliche Schaltflächenzustände anwenden können. Insbesondere selected='default'
entspricht dem standardmäßigen Videokapitelmarkierungsstatus und selected='over'
wird verwendet, wenn die Videokapitelmarke von einer Maus- oder Berührungsgeste aktiviert wird.
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 der Videokapitelblase
max-width |
Maximale Breite der Videokapitelblase. |
unten |
Vertikaler Versatz der Video-Scrubber-Spur. |
Beispiel - Um eine Kapitelblase für Videos einzurichten, die 235 Pixel breit und 8 Pixel nach oben vom unteren Rand des Video-Scrubber-Spur 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
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 - So richten Sie einen Video-Kapitelblasen-Header ein, der 22 Pixel hoch ist, eine 22-Pixel-Zeilenhöhe, einen 12-Pixel-horizontalen Rand und einen 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
color |
Textfarbe. |
Schriftstärke |
Schriftstärke. |
Schriftgröße |
Schriftgröße. |
Schriftfamilie |
Schriftfamilie. |
padding-right |
Abstand zwischen der Startzeit und dem Kapiteltitel. |
Beispiel - Um die Startzeit des Kapitels mit grauen zehn Pixel Verdana-Schriftart einzurichten und hat zehn Pixel Abstand 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
color |
Textfarbe für Videokapiteltitel. |
Schriftstärke |
Schriftgröße für Videokapiteltitel |
Schriftgröße |
Schriftgröße für Videokapiteltitel. |
Schriftfamilie |
Schriftfamilie der Videokapiteltitel. |
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
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. 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
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 definiert ist 0 . |
margin |
Definiert nur eine negative untere Marge. Sie sollte denselben Wert haben wie border-width . |
Beispiel - So richten Sie einen grauen, sechs Pixel großen Keil-Connector ein:
.s7videoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}