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
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. 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
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 . |
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. 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
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:
.s7videoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}