Video-Scrubber video-scrubber

Der Video-Scrubber ist der horizontale Schieberegler, mit dem Benutzende dynamisch nach einer beliebigen Position innerhalb des aktuell wiedergegebenen Videos suchen können.

Der Scrubber-Regler bewegt sich während der Videowiedergabe auch, um die aktuelle Zeitposition des Videos während der Wiedergabe anzuzeigen. Der Video-Scrubber nimmt immer die gesamte Breite der Steuerleiste ein. Es ist möglich, den Video-Scrubber mit Haut zu versehen und seine Höhe und vertikale Position mithilfe von CSS zu ändern.

Das allgemeine Erscheinungsbild des Video-Scrubbers wird mit dem folgenden CSS-Klassenselektor 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 der Spur

Der folgende CSS-Klassenselektor steuert den Regler:

.s7videoviewer .s7videoscrubber .s7knob

CSS-Eigenschaften des Reglers

Der folgende CSS-Klassenselektor steuert die wiedergegebene Zeitblase:

.s7videoviewer .s7videoscrubber .s7videotime

CSS-Eigenschaften der wiedergegebenen Zeitblase

Die QuickInfo des Video-Scrubbers kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel - Zum Einrichten eines Video-Viewers mit einem Video-Scrubber mit benutzerdefinierten Spurfarben. Der Scrubber muss zehn Pixel hoch sein und zehn Pixel und 35 Pixel vom oberen und linken Rand der Steuerleiste entfernt positioniert sein.

.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 Videokapitelung mit dem Parameter "navigation" aktiviert ist, werden Kapitelpositionen als Markierungen über der Video-Scrubber-Spur angezeigt.

Die Videokapitelmarkierung wird durch den folgenden CSS-Klassenselektor gesteuert:

 .s7videoviewer .s7videoscrubber .s7navigation

CSS-Eigenschaften der Videokapitelmarkierung

Beispiel - Zum Einrichten einer Videokapitelmarkierung, die 5 x 8 Pixel groß ist und unterschiedliche Grafiken für den Status „Standard“ und „Über“ 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 Videokapitelblase wird über der Videokapitelmarkierung 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 zur Video-Scrubber-Spur zu steuern. Der Rest wird automatisch von der Komponente berechnet.

Die Videokapitelblase wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7videoscrubber .s7chapter

CSS-Eigenschaften der Videokapitelblase

Beispiel - Zum Einrichten einer Videokapitelblase, die 235 Pixel breit ist und acht Pixel vom unteren Rand der Video-Scrubber-Spur nach oben zeigt.

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

Die Videokapitelblase besteht aus einer optionalen Kopfzeile und einem optionalen Inhalt. Die Kopfzeile hat die optionale Kapitelstartzeit und den Kapiteltitel.

Der Header wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7videoscrubber .s7chapter .s7header

CSS-Eigenschaften der Bubble-Kopfzeile des Videokapitels

Beispiel - Zum Einrichten einer Videokapitel-Bubble-Kopfzeile, die 22 Pixel hoch ist, eine Zeilenhöhe von 22 Pixel, einen horizontalen Rand von 12 Pixel 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 den folgenden CSS-Klassenselektor gesteuert:

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

CSS-Eigenschaften der Startzeit des Videokapitels

Beispiel - Zum Einrichten der Kapitelstartzeit mit der Schriftart Verdana (grau, zehn Pixel) und dem 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

Beispiel - Zum Einrichten eines Videokapiteltitels, 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 und einem hellgrauen Hintergrund. Und schließlich verwendet fünf Pixel Zeilenhöhe, 12 Pixel horizontaler Abstand, 12 Pixel oberer Abstand und neun Pixel unterer Abstand.

.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 im unteren Bereich der Kapitelblase wird von der folgenden CSS-Klassenauswahl gesteuert:

 .s7videoviewer .s7videoscrubber .s7chapter .s7tail

CSS-Eigenschaften des Keil-Connectors

Beispiel - So richten Sie einen grauen, sechs Pixel großen Keilverbinder 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;
}