The video scrubber is the horizontal slider control that lets a user dynamically seek to any time position within the currently playing video.
The scrubber ‘knob’ also moves as the video plays to indicate the current time position of the video during playback. The video scrubber always takes the whole width of the control bar. It is possible to skin the video scrubber. Change its height and vertical position, by CSS.
The general appearance of the video scrubber is controlled with the following CSS class selector:
.s7video360viewer .s7videoscrubber
.s7video360viewer .s7videoscrubber .s7videotime
.s7video360viewer .s7videoscrubber .s7knob
CSS properties of the video scrubber
top |
Position from the top border, including padding. |
bottom |
Position from the bottom border, including padding. |
height |
Height of the video scrubber. |
background-color |
The color of the video scrubber. |
The following CSS class selectors track background, play, and load indicators:
.s7video360viewer .s7videoscrubber .s7track
.s7video360viewer .s7videoscrubber .s7trackloaded
.s7video360viewer .s7videoscrubber .s7trackplayed
CSS properties of the track
height |
Height of the corresponding track. |
background-color |
The color of the corresponding track. |
The following CSS class selector controls the knob:
.s7video360viewer .s7videoscrubber .s7knob
CSS properties of the knob
top |
Vertical knob offset. |
width |
Width of knob. |
height |
Height of knob. |
background-image |
Knob artwork. |
background-position |
Position inside artwork sprite, if CSS sprites are used. See CSS Sprites . |
The following CSS class selector controls the time played bubble:
.s7video360viewer .s7videoscrubber .s7videotime
CSS properties of the time played bubble
font-family |
The font family to use for the time display text. |
font-size |
The font size to use for the time display text. |
color |
The font color to use for the time display text. |
width |
Bubble area width. |
height |
Bubble area height. |
padding |
Bubble area padding. |
background-image |
Bubble artwork. |
background-position |
Position inside artwork sprite, if CSS sprites are used. See CSS Sprites . |
text-align |
Alignment of text with the bubble area. |
The video scrubber tool tip can be localized. See Localization of user interface elements for more information.
Example - To set up a video viewer with a video scrubber with custom track colors that is ten pixels tall. And, position it ten pixels and 35 pixels from the top and left edges of the control bar.
.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;
}