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
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
The following CSS class selector controls the knob:
.s7interactivevideoviewer .s7videoscrubber .s7knob
CSS properties of the knob
The following CSS class selector controls the time played bubble:
.s7interactivevideoviewer .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 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
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
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
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
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
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
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
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;
}