Video-Scrubber

Der Video-Scrubber ist der horizontale Regler, mit dem ein Benutzer dynamisch nach einer beliebigen Zeitposition innerhalb des derzeit wiedergegebenen Videos suchen kann.

Der Navigationsleisten-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 in die Haut zu stecken. ihre Höhe und ihre vertikale Position durch CSS ä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 Videobildschirms

Anfang

Position vom oberen Rand, einschließlich Auffüllung.

unten

Position vom unteren Rand, einschließlich Auffüllung.

height

Höhe des Videobildschirms.

background-color

Die Farbe des Videobildschirms.

Die folgenden CSS-Klassenselektoren verfolgen Hintergrund-, Wiedergabe- und Load-Indikatoren:

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

CSS-Eigenschaften der Verfolgung

height

Höhe der entsprechenden Spur.

background-color

Die Farbe der entsprechenden Spur.

Der folgende CSS-Klassenselektor steuert den Knoten:

.s7videoviewer .s7videoscrubber .s7knob

CSS-Eigenschaften des Knotens

Anfang

Vertikaler Knopfversatz.

width

Breite des Knopfes.

height

Höhe des Knopfes.

background-image

Knob-Grafik.

background-position

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

Siehe CSS-Sprites .

Mit dem folgenden CSS-Klassenselektor wird die Wiedergabedauer gesteuert:

.s7videoviewer .s7videoscrubber .s7videotime

CSS-Eigenschaften der Wiedergabepause

font-family

Die Schriftfamilie, die für die Zeitanzeige verwendet wird.

font-size

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

color

Die Schriftfarbe, die für die Zeitanzeige verwendet wird.

width

Punktflächenbreite.

height

Punktflächenhöhe.

Padding

Punktflächenfüllung.

background-image

Blasengrafik.

background-position

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

Siehe CSS-Sprites .

text-align

Ausrichtung des Textes am Blasenbereich

Die QuickInfo zum Video-Scrubber kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel : Zum Einrichten eines Video-Viewers mit einem Video-Scrubber mit benutzerdefinierten Trackfarben, die 10 Pixel hoch und 10 Pixel und 35 Pixel von der oberen und linken Kante der Steuerungsleiste entfernt sind.

.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 Videokapplung mit dem Parameter navigation aktiviert ist, werden die Kapitelpositionen als Markierungen über der Videobildspur angezeigt.

Die Videokapitelmarke wird von der folgenden CSS-Klassenauswahl gesteuert:

 .s7videoviewer .s7videoscrubber .s7navigation

CSS-Eigenschaften der Videokapitelmarke

width

Breite der Videokapitelmarke.

height

Höhe der Videokapitelmarke.

background-image

Grafik zur Videokapitelmarke.

background-position

Position innerhalb des Bildausschnitt, 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 : Um eine Kapitelmarke für Videos mit 5 x 8 Pixeln einzurichten, die für den Status "Standard"und "Over"eine andere Grafik 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 platziert und zeigt den Beginn, die Uhrzeit und die Beschreibung für ein bestimmtes Kapitel an. Es ist möglich, die maximale Blasenbreite und den vertikalen Versatz relativ zur Videobildspur 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 des Videokapitels.

unten

Vertikaler Versatz zur Videobildspur.

Beispiel : Um eine Videokapitelblase einzurichten, die 235 Pixel breit und acht Pixel hoch 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 Kapitelzeit und den Beginn des Kapitels.

Die Kopfzeile wird von der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7videoscrubber .s7chapter .s7header

CSS-Eigenschaften der Kopfzeile des Videokapitels

height

Höhe der Kopfzeile des Videokapitels.

Padding

Innenabstand für Videokapitelblasen-Kopfzeilentext.

background-color

Hintergrundfarbe für Videokapitelblase-Kopfzeile.

line-height

Höhe der Kopfzeile des Videokapitels

Beispiel : Zum Einrichten eines Videokapitelblasen-Headers mit einer Höhe von 22 Pixel, einer Zeilenhöhe von 22 Pixel, einem horizontalen Rand von 12 Pixel 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 Beginn-Zeit des Videokapitels wird durch die folgende CSS-Klassenauswahl gesteuert:

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

CSS-Eigenschaften der Videokapitel-Beginn-Zeit

color

Textfarbe.

font-Gewichtung

Schriftart-Gewichtung.

font-size

Schriftgröße.

font-family

Schriftfamilie.

padding-right

Auffüllung zwischen der Beginn- und Kapitelzeit.

Beispiel : Zum Einrichten der Kapitelzeit mit einer grauen 10 Pixel hohen Verdana-Schrift und einer 10 Pixel langen Auffüllung rechts.

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

Der Titel des Videokapitels wird von der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title

CSS-Eigenschaften des Videokapiteltitels

color

Textfarbe des Videokapitels

font-Gewichtung

Gewichtung der Videokapitelschrift

font-size

Schriftgröße des Videokapitels

font-family

Schriftfamilie des Videokapitels

Beispiel : Zum Einrichten eines Videokapiteltitels mit einer weißen, fett gedruckten Verdana-Schrift mit zehn Pixeln.

.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 von der folgenden CSS-Klassenauswahl gesteuert:

 .s7videoviewer .s7videoscrubber .s7chapter .s7description

CSS-Eigenschaften der Videokapitelbeschreibung

color

Textfarbe der Videokapitelbeschreibung.

background-color

Hintergrundfarbe der Videokapitelbeschreibung.

font-Gewichtung

Gewichtung der Videokapitelbeschreibung

font-size

Schriftgröße der Videokapitelbeschreibung.

font-family

Schriftfamilie der Videokapitelbeschreibung.

line-height

Zeilenhöhe der Videokapitelbeschreibung.

Padding

Beschreibung des Videokapitels nach innen.

Beispiel : Um eine Videokapitelbeschreibung mit einer dunkelgrauen, 11 Pixel großen Verdana-Schrift und einem hellgrauen Hintergrund einzurichten, 5 Pixel Zeilenhöhe, 12 Pixel horizontale Auffüllung, 12 Pixel obere Auffüllung und 9 Pixel untere Auffüllung.

.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-Anschluss 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 Randes definiert und die verbleibenden Ränder transparent bleiben.

border-width

Breite des Wedge-Anschlusses.

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

margin

Definiert nur einen negativen unteren Rand. Es sollte denselben Wert haben wie der von border-width .

Beispiel : So richten Sie einen grauen, sechs Pixel langen Keil-Anschluss 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; 
}

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now