Video scrubber video-scrubber

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, and change its height and vertical position, by using CSS.

The general appearance of the video scrubber is controlled with the following CSS class selector:

.s7mixedmediaviewer .s7videoscrubber
.s7mixedmediaviewer .s7videoscrubber .s7videotime
.s7mixedmediaviewer .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:

.s7mixedmediaviewer .s7videoscrubber .s7track
.s7mixedmediaviewer .s7videoscrubber .s7trackloaded
.s7mixedmediaviewer .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:

.s7mixedmediaviewer .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:

.s7mixedmediaviewer .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 section-e8caea0a303c425a8a637c2a47c06355

Set up a mixed media viewer with a video scrubber with custom track colors that is 10 pixels tall, and positioned 10 pixels and 35 pixels from the top and left edges of the control bar.

.s7mixedmediaviewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7mixedmediaviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7mixedmediaviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7mixedmediaviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8