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

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

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

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

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

.s7videoviewer .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 10 pixels tall, and positioned 10 pixels and 35 pixels from the top and left edges of the control bar.

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

When video chaptering is enabled with the navigation parameter, chapter locations are displayed as markers on top of the video scrubber track.

The video chapter marker is controlled by the following CSS class selector:

 .s7videoviewer .s7videoscrubber .s7navigation

CSS properties of the video chapter marker

width

Video chapter marker width.

height

Video chapter marker height.

background-image

Video chapter marker artwork.

background-position

Position inside artwork sprite, if CSS sprites are used.

See CSS Sprites .

NOTE

This button supports both the state attribute selector, which you can use to apply different skins to different button states. In particular, selected='default' corresponds to the default video chapter marker state and selected='over' is used when the video chapter marker is activated by a mouse over or touch gesture.

Example - To set up a video chapter marker that is 5 x 8 pixels and uses different art for the “default” and “over” state.

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

Video chapter bubble is positioned on top of the video chapter marker and shows the title, start time, and description for a given chapter. It is possible to control the maximum bubble width and vertical offset relative to the video scrubber track. The rest is calculated automatically by the component.

The video chapter bubble is controlled by the following CSS class selector:

.s7videoviewer .s7videoscrubber .s7chapter

CSS properties of the video chapter bubble

max-width

Maximum width of the video chapter bubble.

bottom

Vertical offset from the video scrubber track.

Example - To set up a video chapter bubble that is 235 pixels wide and is eight pixels up from the bottom of the video scrubber track.

.s7videoviewer .s7videoscrubber .s7chapter { 
max-width:235px; 
bottom:8px; 
}

The video chapter bubble consists of an optional header and content. The header has the optional chapter start time and chapter title.

The header is controlled by the following CSS class selector:

.s7videoviewer .s7videoscrubber .s7chapter .s7header

CSS properties of the video chapter bubble header

height

Video chapter bubble header height.

padding

Inner padding for video chapter bubble header text.

background-color

Video chapter bubble header background color.

line-height

Video chapter bubble header text line height.

Example - To set up a video chapter bubble header that is 22 pixels high, a 22 pixel line height, a 12 pixel horizontal margin, and a gray background.

.s7videoviewer .s7videoscrubber .s7chapter .s7header { 
height:22px; 
padding:0 12px; 
line-height:22px; 
background-color: rgba(51, 51, 51, 0.8); 
}

The start time of the video chapter is controlled by the following CSS class selector:

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

CSS properties of the video chapter start time

color

Text color.

font-weight

Font weight.

font-size

Font size.

font-family

Font family.

padding-right

Padding between the start time and chapter title.

Example - To set up chapter start time using gray ten pixels Verdana font and has ten pixels padding to the right.

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

The video chapter title is controlled by the following CSS class selector:

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title

CSS properties of the video chapter title

color

Video chapter title text color.

font-weight

Video chapter title font weight.

font-size

Video chapter title font size.

font-family

Video chapter title font family.

Example - To set up a video chapter title that uses a white, bold, ten pixel Verdana font.

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title { 
color: #ffffff; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
font-weight: bold; 
}

The video chapter description is controlled by the following CSS class selector:

 .s7videoviewer .s7videoscrubber .s7chapter .s7description

CSS properties of the video chapter description

color

Video chapter description text color.

background-color

Video chapter description background color.

font-weight

Video chapter description font weight.

font-size

Video chapter description font size.

font-family

Video chapter description font family.

line-height

Video chapter description line height.

padding

Video chapter description inner padding.

Example - To set up video chapter description using a dark gray, 11 pixel Verdana font, with a light gray background; 5 pixel line height, 12 pixel horizontal padding, 12 pixel top padding, and 9 pixel bottom padding.

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

The wedge connector within the bottom of the chapter bubble is controlled by the following CSS class selector:

 .s7videoviewer .s7videoscrubber .s7chapter .s7tail

CSS properties of the wedge connector

border-color

Wedge connector color.

Defined as <color> transparent transparent so that only the top border color is defined and the remaining borders are left transparent.

border-width

Wedge connector width.

Defined as <width> <width> 0 so that the same width is defined for the top and horizontal borders only and the bottom border width is 0 .

margin

Defines a negative bottom margin only. It should have the same value as that of border-width .

Example - To set up a gray, six pixel wedge connector:

.s7videoviewer .s7videoscrubber .s7chapter .s7tail { 
border-color: rgba(221, 221, 221, 0.9) transparent transparent; 
border-width: 6px 6px 0; 
margin: 0 0 0 -6px; 
}

On this page