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:

.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob

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

The following CSS class selector controls the knob:

.s7videoviewer .s7videoscrubber .s7knob

CSS properties of the knob

The following CSS class selector controls the time played bubble:

.s7videoviewer .s7videoscrubber .s7videotime

CSS properties of the time played bubble

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. The scrubber must be ten pixels tall, and positioned ten 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

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

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

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

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

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

Example - To set up video chapter description using a dark gray, 11 pixel Verdana font, with a light gray background. And finally, uses five pixel line height, 12 pixel horizontal padding, 12 pixel top padding, and nine 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

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