Videoskrubber video-scrubber

Videonavigeringen är den vågräta skjutreglaget som gör att en användare dynamiskt kan söka till valfri tidsposition i den video som spelas upp.

Rubbens 'knob' rör sig också när videon spelas upp för att ange videons aktuella tidsposition under uppspelningen. Videonavigeringslisten har alltid hela kontrollfältets bredd. Det går att skapa skal för videospolaren, ändra dess höjd och lodräta position med CSS.

Videonavigeringens allmänna utseende styrs med följande CSS-klassväljare:

.s7smartcropvideoviewer .s7videoscrubber
.s7smartcropvideoviewer .s7videoscrubber .s7videotime
.s7smartcropvideoviewer .s7videoscrubber .s7knob

CSS-egenskaper för videonavigeringslisten

Följande CSS-klassväljare spårar indikatorerna för bakgrund, uppspelning och inläsning:

.s7smartcropvideoviewer .s7videoscrubber .s7track
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded
.s7smartcropvideoviewer .s7videoscrubber .s7trackplayed

Spårets CSS-egenskaper

Följande CSS-klassväljare styr ratten:

.s7smartcropvideoviewer .s7videoscrubber .s7knob

CSS-egenskaper för ratten

Följande CSS-klassväljare styr den tid som spelas upp:

.s7smartcropvideoviewer .s7videoscrubber .s7videotime

CSS-egenskaper för den tid som spelas upp

Verktygstipset för videospolning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.

Exempel - Om du vill ställa in ett videovisningsprogram med en videonavigeringsruta med anpassade spårfärger som är tio pixlar höga. Och slutligen, ha den placerad 10 och 35 pixlar från kontrollfältets övre och vänstra kant.

.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;
}