Videoscrubber video-scrubber

De videoscrubber is de horizontale schuifregelaar waarmee een gebruiker dynamisch naar een willekeurige tijdpositie in de video kan zoeken die momenteel wordt afgespeeld.

De scrubber 'knob' beweegt zich ook terwijl de video speelt om op de huidige tijdpositie van de video tijdens playback te wijzen. De videoscrubber neemt altijd de volledige breedte van de controlebar. Het is mogelijk om de videoscrubber van een skin te voorzien. Verander de hoogte en de verticale positie met CSS.

De algemene weergave van de videoscrubber wordt beheerd met de volgende CSS-klassenkiezer:

.s7video360viewer .s7videoscrubber
.s7video360viewer .s7videoscrubber .s7videotime
.s7video360viewer .s7videoscrubber .s7knob

CSS eigenschappen van de videoscrubber

De volgende CSS-klassekiezers volgen de indicatoren voor achtergrond, afspelen en laden:

.s7video360viewer .s7videoscrubber .s7track
.s7video360viewer .s7videoscrubber .s7trackloaded
.s7video360viewer .s7videoscrubber .s7trackplayed

CSS eigenschappen van het spoor

De volgende CSS-klassenkiezer bestuurt de knop:

.s7video360viewer .s7videoscrubber .s7knob

CSS eigenschappen van de knoop

De volgende CSS-klassenkiezer bestuurt de zeepbel waarin de tijd wordt afgespeeld:

.s7video360viewer .s7videoscrubber .s7videotime

CSS eigenschappen van de tijd speelde bel

De knopinfo voor het gereedschap Video scrubber kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld - aan opstelling een videokijker met een videoscrubber met de kleuren van het douanespoor die tien pixel hoog zijn. En plaats het op tien pixels en 35 pixels van de boven- en linkerrand van de besturingsbalk.

.s7video360viewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7video360viewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7video360viewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7video360viewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}