HTML5 Viewer SDK API Documentation 

Namespaces


Class Index

Classes in s7sdk.video

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:

ModifierSyntaxDescriptionDefault
showchaptertitle0|1Enables or disables the title bar of the chapter label. The chapter start time is not displayed when the title bar is disabled.1
showchaptertime0|1Enables or disables the chapter time in the title bar of the chapter label.1
chaptertimepattern[h:]m|mm:s|ssSets 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
showtime0|1Enables or disables the time played bubble when adjusting the knob position.1
timepattern[h:]m|mm:s|ssSets 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 ClassAttribute SelectorDescription
.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.
.s7navigationstate=[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.

SymbolDescription
VideoScrubber.TOOLTIPDefines 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.
 
Dispose is used to remove itself and all sub-elements from the DOM
 
Returns the duration in milliseconds that will correspond to the scrubber's end position (100%).
 
Returns the current inner height of the component.
 
Returns the video loaded time indicator, in milliseconds.
 
Returns the video elapsed time indicator, in milliseconds.
 
Returns the position of the slider knob, as a percentage from 0 to 1.
 
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
 
Sets the duration in milliseconds that will correspond to the scrubber's end position (100%).
 
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.
 
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:

  1. The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
  2. CSS Styles are defined in the document head to control the appearance of the SDK components.
  3. The s7sdk.Util.init() method is called to initialize the SDK.
  4. A ParameterManager object is created to handle component modifiers for the viewer.
  5. 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.).
  6. Handler functions are defined to respond to the component event listeners added in the initViewer() function.
  7. 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.
  8. 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:

    To navigate to the beginning of a chapter, you can

    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.

    Documentation generated by JsDoc Toolkit 2.4.0 on Thu Jan 30 2020 16:40:37 GMT+0200 (EET)