Class s7sdk.video.VideoScrubber

The VideoScrubber is a component that is used to display the current playback time of a video or audio file relative to its duration, and to allow a user to "scrub" a video or audio file to commence playback at any time position he chooses. The component has a knob, the position of which can be adjusted either by dragging it or by explicitly calling the setPosition() method. Every time the position of the knob changes a notification event s7sdk.event.SliderEvent.NOTF_SLIDER_MOVE is dispatched. Typically, the event handler assigned to handle this event will set the played time of a VideoPlayer component to the new time specified by the user (by calling VideoPlayer.seek() API).

The component can be added to ControlBar and grouped with other video UI components.

Customizing Behavior Using Modifiers

Modifiers change VideoScrubber default behavior. They are passed to the component by the ParameterManager instance specified in the constructor.

The following modifiers are supported:

Modifier	Syntax	Description	Default
showchaptertitle	0\|1	Enables or disables the title bar of the chapter label. The chapter start time is not displayed when the title bar is disabled.	1
showchaptertime	0\|1	Enables or disables the chapter time in the title bar of the chapter label.	1
chaptertimepattern	[h:]m\|mm:s\|ss	Sets the pattern for the time that is displayed in the title bar of the chapter label. Setting `h` represents hours, `m` represents minutes, and `s` represents seconds. The number of letters used for each time unit determines the number of digits to display for the unit. If the number cannot fit into the given digits, the equivalent value is displayed in the subsequent unit. For example, if the current movie time is 67 minutes and 5 seconds, the time pattern of `m:ss` displays as 67:05. The same time appears as 1:07:5 when the given time pattern is `h:mm:s`.	m:ss
showtime	0\|1	Enables or disables the time played bubble when adjusting the knob position.	1
timepattern	[h:]m\|mm:s\|ss	Sets the pattern for the time to display in the time bubble. Setting `h` represents hours, `m` represents minutes, and `s` represents seconds. The number of letters used for each time unit determines the number of digits to display for the unit. If the number cannot fit into the given digits, the equivalent value is displayed in the subsequent unit. For example, if the current movie time is 67 minutes and 5 seconds, the time pattern `m:ss` displays as 67:05. The same time appears as 1:07:5 when the given time pattern is `h:mm:s`.	m:ss

Defining the Appearance using CSS

You can define the appearance of the VideoScrubber component using CSS rules. All HTML5 Viewer SDK components use class selectors for styling. You can style the body of the VideoScrubber component by using the .s7videoscrubber class selector. The styles that are associated with this class selector are applied to all instances of the VideoScrubber component. You can style particular instances by prefixing the class rule with the instance #id. For example, styling rules for #myComp.s7videoscrubber are applied only to the particular VideoScrubber instance. For more information on component styling see the HTML5 Viewer SDK User Guide and the examples in this document.

The styling of the sub-elements using class selectors like .s7knob for example, must be specified in the form of the descendant class selectors. That is, they must follow the main class selector separated by a space, such as .s7videoscrubber .s7knob. For more information on component styling see the HTML5 Viewer SDK User Guide and the default styles section.

CSS Class	Attribute Selector	Description
`.s7videoscrubber`	(None)	Represents the main body of the `VideoScrubber` component.
`.s7videotime`	(None)	Defines the appearance of the time played bubble.
`.s7track`	(None)	Defines the appearance of the video scrubber line before video loading or playback has begun.
`.s7trackloaded`	(None)	Defines the appearance of the video scrubber line which appears to the right of the scrubber knob to indicate video buffering progress.
`.s7trackplayed`	(None)	Defines the appearance of the video scrubber line which appears to the left of the scrubber knob to indicate video playback progress.
`.s7knob`	(None)	Defines the appearance of the video scrubber knob. The background-image property defines a url to a bitmap image that will represent the video scrubber knob.
`.s7navigation`	`state=[default\|over]`	Defines the appearance of the video scrubber marker for chapter navigation. The background-image property defines a url to a bitmap image that will represent a chapter marker.
`.s7chapter`	(None)	Defines the appearance of the video scrubber chapter summary bubble.
`.s7header`	(None)	Defines the appearance of the title bar of the video scrubber chapter summary bubble.
`.s7starttime`	(None)	Defines the appearance of the timecode in the title bar of the video scrubber chapter summary bubble.
`.s7title`	(None)	Defines the appearance of the title in the title bar of the video scrubber chapter summary bubble.
`.s7description`	(None)	Defines the appearance of the description of the video scrubber chapter summary bubble.
`.s7tail`	(None)	Defines the appearance of the wedge connector between the body of the video scrubber chapter summary bubble and the active chapter navigation marker.
`.s7tooltip`	(None)	A global class selector that defines appearance for the tooltips. To disable tooltips set the `display` style to `none`.

Localizable Symbols

VideoScrubber also has text symbol that you can localize either in a preset or in the viewer page though the mechanisms provided by the ParameterManager. For more information on localization consult the ParameterManager API documentation and HTML5 Viewers SDK User Guide.

Symbol	Description
`VideoScrubber.TOOLTIP`	Defines a localized tooltip for the `VideoScrubber` component.

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.video.VideoScrubber(container, settings, compId)

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `VideoScrubber` component.
	cleanUp() Dispose is used to remove itself and all sub-elements from the DOM
	getDuration() Returns the duration in milliseconds that will correspond to the scrubber's end position (100%).
	getHeight() Returns the current inner height of the component.
	getLoadedPosition() Returns the video loaded time indicator, in milliseconds.
	getPlayedTime() Returns the video elapsed time indicator, in milliseconds.
	getPosition() Returns the position of the slider knob, as a percentage from 0 to 1.
	getWidth() Returns the current inner width of the component.
	handleChapter(event, state) Handle the mouse click on the chapter label to navigate to the beginning of the corresponding chapter.
	resize(w, h) Resize the VideoScrubber.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setDuration(ms) Sets the duration in milliseconds that will correspond to the scrubber's end position (100%).
	setLoadedPosition(ms) Sets the video loaded time indicator in milliseconds.
	setModifier(modObj) Sets 1-N # of modifiers for the component.
	setNavigation(navigation) Sets the video navigation markers on the track.
	setPlayedTime(ms) Sets the video elapsed time indicator in milliseconds.
	setPosition(value) Sets the position of the slider knob within the bar

Class Detail

s7sdk.video.VideoScrubber(container, settings, compId)

Example Code
This example demonstrates how to use the VideoScrubber component in a simple video viewer. In this example a Container object,
a VideoPlayer object, and a VideoScrubber object are created. Every time a user clicks the VideoPlayer, video playback starts or
pauses. The VideoScrubber object updates to display the current video load and playback progress as the video loads and plays.

The code below does the following:

The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
CSS Styles are defined in the document head to control the appearance of the SDK components.
The s7sdk.Util.init() method is called to initialize the SDK.
A ParameterManager object is created to handle component modifiers for the viewer.
An initViewer() function is defined. This function initializes a number of modifiers (hard coded for example purposes),
then creates the component objects required for this simple example. The initViewer() function also adds event listeners
that designate functions to handle relevant component events (which might be dispatched by the components as a result of
user interactions, changes in a component's state, etc.).
Handler functions are defined to respond to the component event listeners added in the initViewer() function.
An event listener is added to the ParameterManager object that designates the initViewer() function as the handler
to call when the Scene7 SDK is loaded and ready.
Finally, the init() method is called on the ParameterManager object to start the viewer.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="user-scalable=no,
            height=device-height, width=device-width, initial-scale=1.0,
            maximum-scale=1.0"/>
        <title>VideoScrubber Example</title>

        <script language="javascript" type="text/javascript" 
                src="../js/s7sdk/utils/Utils.js"></script>

        <script language="javascript" type="text/javascript">
            s7sdk.Util.lib.include('s7sdk.common.Container');
            s7sdk.Util.lib.include('s7sdk.video.VideoPlayer');
            s7sdk.Util.lib.include('s7sdk.video.VideoControls');
        </script>

        <style type="text/css" media="screen">
            .s7container {
                position: absolute;
                width: 512px;
                height: 315px;
            }
            .s7videoplayer {
                position: absolute;
                width: 512px;
                height: 288px;
            }
            .s7videoscrubber{
                top: 2px;	
                width: 512px;
            }
            .s7videoscrubber .s7track {
                left: 5px
                width: 502px;
            }
            .s7videotoolbar {
                display:block;
                position: absolute;	
                top: 282px;
                width: 512px;
                height: 32px;
                z-index: 5000;
                padding: 0px;
                background-color: #333;
            }
        </style>
    </head>
    <div id="s7toolbar" class="s7videotoolbar"></div> 
    <body style="margin: 0 0;overflow:hidden;">	

        <script language="JavaScript" type="text/javascript">
            var params, container, videoPlayer, videoScrubber;

            // Initialize the SDK
            s7sdk.Util.init();

            // Create ParameterManager instance to handles modifiers		
            params = new s7sdk.ParameterManager();

            // Define the function that initializes the viewer
            function initViewer(){
                // Set hardcoded modifiers (not required when values are specified on the url)
                params.push("serverurl", "http://s7d1.scene7.com/is/image/");
                params.push("videoserverurl", "http://s7d1.scene7.com/is/content/");
                params.push("contenturl", "http://s7d1.scene7.com/is/content/");
                params.push("asset", "Scene7SharedAssets/Adobe_QBP-AVS");
                params.push("size", "512,288");
                params.push("autoplay", "1");
                params.push("playback", "auto");
                params.push("singleclick", "playPause");
                params.push("navigation", "Scene7SharedAssets/adobe_qbc_final_nc");							

                // Create the Container component object
                container = new s7sdk.common.Container(null, params, "s7container");

                // Create the VideoPlayer component object with native controls
                videoPlayer = new s7sdk.video.VideoPlayer( container, params, "myVideoPlayer");

                // Create the VideoScrubber component object
                videoScrubber = new s7sdk.video.VideoScrubber("s7toolbar", params, "videoScrubber");

                // Add an event listener for Container resize events
                container.addEventListener(s7sdk.event.ResizeEvent.COMPONENT_RESIZE, onContainerResize, false);

                // Add an event listener for VideoPlayer time change events
                videoPlayer.addEventListener(s7sdk.event.VideoEvent.NOTF_CURRENT_TIME, onNotifyVideoTime, false);

                // Add an event listener for the VideoPlayer duration change event
                videoPlayer.addEventListener(s7sdk.event.VideoEvent.NOTF_DURATION, onNotifyVideoTime, false);

                // Add an event listener for the VideoPlayer load progress events
                videoPlayer.addEventListener(s7sdk.event.VideoEvent.NOTF_LOAD_PROGRESS, onNotifyVideoTime, false);
				
                // Add navigation event listener
                videoPlayer.addEventListener(s7sdk.event.VideoEvent.NOTF_NAVIGATION, onVideoNavigation, false);

                // Add event listeners for the VideoScrubber slider interaction events
                videoScrubber.addEventListener(s7sdk.event.SliderEvent.NOTF_SLIDER_DOWN, onNotifyScrubberEvent);
                videoScrubber.addEventListener(s7sdk.event.SliderEvent.NOTF_SLIDER_MOVE, onNotifyScrubberEvent);
                videoScrubber.addEventListener(s7sdk.event.SliderEvent.NOTF_SLIDER_UP, onNotifyScrubberEvent);
            }

            // Define an event handler function to resize the VideoPlayer when the container changes size
            function onContainerResize(event){
                videoPlayer.resize(event.s7event.w, event.s7event.h);
            }

            // Define an event handler function to update the VideoScrubber object for VideoPlayer changes
            function onNotifyVideoTime(event){
                if(event.s7event.type == s7sdk.event.VideoEvent.NOTF_CURRENT_TIME){
                    videoScrubber.setPlayedTime(event.s7event.data);
                }else if(event.s7event.type == s7sdk.event.VideoEvent.NOTF_DURATION){
                    videoScrubber.setDuration(event.s7event.data);
                }else if(event.s7event.type == s7sdk.event.VideoEvent.NOTF_LOAD_PROGRESS){
                    videoScrubber.setLoadedPosition(event.s7event.data);
                }
            }

            // Add Video Navigation feature
            function onVideoNavigation(event) {			
                // notify VideoScrubber of navigation data
                videoScrubber.setNavigation(event.s7event.data);				
            }
			
            // Define an event handler function to update the VideoPlayer object for VideoScrubber slider interactions
            function onNotifyScrubberEvent(event){
                videoPlayer.seek(event.s7event.position * videoPlayer.getDuration());
            }

            // The ParameterManager will dispatch SDK_READY when all modifiers have been processed
            // and it is safe to initialize the viewer		
            params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false);

            // Now it is safe to process the modifiers, the callbacks have been defined
            // this will trigger the SDK_READY event
            params.init();
        </script>

    </body>
</html>

Default styles for VideoScrubber:

.s7videoscrubber {
	position:absolute;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:235px;
	height:26px;
 }
.s7videoscrubber .s7videotime {
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	left:4px;
	width:46px;
	height:24px;
	padding:8px;
	background-image:url(images/sdk/scrub_time.png);
	align:center;
	text-align:center;
	vertical-align:middle;
	color:#000000;
 }
.s7videoscrubber .s7track, .s7trackloaded, .s7trackplayed {
	position:absolute;
	left:8px;
	right:8px;
	top:35%;
	height:31%;
 }
.s7videoscrubber .s7track {
	background-color:#555555;
 }
.s7videoscrubber .s7trackloaded {
	z-index:100;
	background-color:#666666;
 }
.s7videoscrubber .s7trackplayed {
	z-index:200;
	background-color:#999999;
 }
.s7videoscrubber .s7knob {
	position:absolute;
	width:9px;
	top:23%;
	height:54%;
	background-image:none;
	background-color:#ffffff;
	z-index:1000;
 }
.s7videoscrubber .s7navigation {
	position:absolute;
	width:5px;
	top:35%;
	height:31%;
	background-repeat:no-repeat;
	background-color:transparent;
	z-index:990;
 }
.s7videoscrubber .s7navigation[state='default'] {
	background-image:url(images/sdk/scrub_diamond.png);						
 }
.s7videoscrubber .s7navigation[state='over'] {
	background-image:url(images/sdk/scrub_diamond_over.png);						
 }
.s7videoscrubber .s7chapter {
	position:absolute;
	white-space:nowrap;
	max-width:235px;
	padding: 0px;
	height:auto;
	bottom:18px;
	visibility:hidden;
	background-color:transparent;
	z-index:10100;
 }
.s7videoscrubber .s7chapter .s7header {	
	position:relative;
	visibility:inherit;
	width:auto;
	height:22px;
	line-height:22px;
	background-color:rgba(51,51,51,0.8);
	padding: 0 12px 0 12px;
	vertical-align:middle;
	z-index:10101;
 }
.s7videoscrubber .s7chapter .s7header .s7starttime {
	position:relative;
	width:auto;
	visibility:inherit;
	display:inline;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#dddddd;
	background-color:transparent;
	padding-right:10px;
	z-index:10102;
 }
.s7videoscrubber .s7chapter .s7header .s7title {
	position:relative;
	width:auto;
	visibility:inherit;
	display:inline;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
	color:#ffffff;
	background-color:transparent;
	z-index:10102;
 }
.s7videoscrubber .s7chapter .s7description {
	position:relative;
	width:auto;
	height:auto;
	visibility:inherit;
	padding:12px 12px 9px 12px;
	line-height:100%;
	text-align:left;
	word-wrap:normal;
	white-space:normal;
	background-color:rgba(221,221,221,0.9);
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	z-index:10103;
 }
.s7videoscrubber .s7chapter .s7tail {
	position:relative;
	content:"";
	display:block;
	border-style:solid;
	border-color:rgba(221,221,221,0.9) transparent transparent transparent;
	border-width: 6px 6px 0px 6px;
	width:0px;				
	margin: 0px 0px 0px -6px;
	z-index: 10103;
 }
.s7tooltip {
	position:absolute;
	padding:5px;
	line-height:100%;
	text-align:center;
	background-color:rgb(224, 224, 224);
	color:rgb(26,26,26);
	font-family:Helvetica, sans-serif;
	font-size:11px;
	z-index:10000;
	border:1px solid rgb(191,191,191);
 }

Parameters:
{String|Container} container: The reference to Container instance, ControlBar instance or the ID of the parent DOM element to which the component is added as a child
{s7sdk.ParameterManager} settings: A parameter manager instance that represents the desired configuration.
{String} compId: An optional parameter that specifies the ID of the component DOM element.

See:: s7sdk.common.ControlBar; s7sdk.video.VideoPlayer; s7sdk.ParameterManager

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the VideoScrubber component. The handler function receives a DOM event object of type Event. The object contains a property s7event, which references the associated custom event object, for example s7sdk.event.SliderEvent.

The events supported by the component are:

s7sdk.event.SliderEvent.NOTF_SLIDER_DOWN - Dispatched when drag gesture has started with slider knob. s7sdk.event.SliderEvent

s7sdk.event.SliderEvent.NOTF_SLIDER_MOVE - Dispatched when drag gesture is in progress and knob position has changed. s7sdk.event.SliderEvent

s7sdk.event.SliderEvent.NOTF_SLIDER_UP - Dispatched when drag gesture has ended or click (tap) was made on VideoScrubber's track. s7sdk.event.SliderEvent

Parameters:
{String} type: Event name, for example s7sdk.event.SliderEvent.NOTF_SLIDER_MOVE.
{Function} handler: Function to be called when the event gets dispatched.
{Boolean} useCapture: Register capture phase.

See:: s7sdk.event.SliderEvent

cleanUp()

Dispose is used to remove itself and all sub-elements from the DOM

{Number} getDuration()

Returns the duration in milliseconds that will correspond to the scrubber's end position (100%).

Returns:: video duration

{Number} getHeight()

Returns the current inner height of the component.

Returns:: {Number} the inner height of the component, in pixels.

{Number} getLoadedPosition()

Returns the video loaded time indicator, in milliseconds.

Returns:: amount of loaded video data

{Number} getPlayedTime()

Returns the video elapsed time indicator, in milliseconds.

Returns:: current played time

{Number} getPosition()

Returns the position of the slider knob, as a percentage from 0 to 1.

Returns:: knob position

{Number} getWidth()

Returns the current inner width of the component.

Returns:: {Number} the inner width of the component, in pixels.

handleChapter(event, state)

Handle the mouse click on the chapter label to navigate to the beginning of the corresponding chapter.

Parameters:
event
state

resize(w, h)

Resize the VideoScrubber.

Parameters:
{Number} w: Width in pixels.
{Number} h: Height in pixels.

setCSS(classname, property, value)

Sets a particular CSS class and property on a component

Parameters:
{String} classname: The CSS classname to use for this style. i.e. .s7videoscrubber
{String} property: The CSS property that is being set. i.e. background-color
{String} value: The CSS property value being set. i.e. #FF0000

setDuration(ms)

Sets the duration in milliseconds that will correspond to the scrubber's end position (100%).

Parameters:
{Number} ms: video duration, in milliseconds.

setLoadedPosition(ms)

Sets the video loaded time indicator in milliseconds.

Parameters:
{Number} ms: amount of video that has been loaded, in milliseconds.

setModifier(modObj)

Sets 1-N # of modifiers for the component.

Parameters:
{Object} modObj: A simple JSON object with name:value pairs of valid modifiers for a particular component

setNavigation(navigation)

Sets the video navigation markers on the track.

Typically, the navigation data is parsed by VideoPlayer and set by the navigation modifier.

A chapter summary bubble will display the information when a navigation marker is activated:

by rolling the mouse over the marker on a desktop system or
by touching the marker on a mobile device.

To navigate to the beginning of a chapter, you can

click on the marker on a desktop system or
conveniently tap on the chapter summary bubble on a mobile device.

Parameters:
{s7sdk.common.WebVtt} navigation: WebVtt object containing navigation cues

See:: s7sdk.video.VideoPlayer; s7sdk.common.WebVtt

setPlayedTime(ms)

Sets the video elapsed time indicator in milliseconds.

Parameters:
{Number} ms: amount of the video that has been played, in milliseconds.

setPosition(value)

Sets the position of the slider knob within the bar

Parameters:
{Number} value: position of the slider knob, as a percentage from 0 to 1.

Namespaces

Classes in s7sdk.video

Class s7sdk.video.VideoScrubber