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 CSS.

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

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

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

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

.s7interactivevideoviewer .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 and with custom track colors that are ten pixels tall. Position it ten pixels and 35 pixels from the top and left edges of the control bar.

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

When video chapter marker 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:

.s7interactivevideoviewer .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 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.

.s7interactivevideoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7interactivevideoviewer .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:

.s7interactivevideoviewer .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.

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

.s7interactivevideoviewer .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.

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

.s7interactivevideoviewer .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.

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

.s7interactivevideoviewer .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.

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

.s7interactivevideoviewer .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. A five pixel line height, 12 pixel horizontal padding, 12 pixel top padding, and nine pixel bottom padding.

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

CSS properties of the wedge connector

border-color

Wedge connector color.

Defined as <color> 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 border-width .

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8