HTML5 Viewer SDK API Documentation 

Namespaces

Class Index

Classes in s7sdk.video

Class s7sdk.video.VideoTime

The VideoTime component can be associated with a VideoPlayer component to display the duration and elapsed time in a video.

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

Customizing Behavior Using Modifiers

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

The following modifiers are supported:

ModifierSyntaxDescriptionDefault
showduration0|1If set to 1, both the played time and the total time--or duration-- is displayed. To show only the currently played time, set to 0.1
timepattern[h:]m|mm:s|ssSets the pattern for the time to displays in the timecode area. 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 VideoTime component using CSS rules. All HTML5 Viewer SDK components use class selectors for styling. You can style the VideoTime component by using the .s7videotime class selector. The styles that are associated with this class selector are applied to all instances of the VideoTime component. You can style particular instances by prefixing the class rule with the instance #id. For example, styling rules for #myComp.s7videotime are applied only to the particular VideoTime instance. For more information on component styling see the HTML5 Viewer SDK User Guide and the examples in this document.

CSS ClassAttribute SelectorDescription
.s7videotime(None)Defines the appearance of the VideoTime component.
.s7tooltip(None)A global class selector that defines appearance for the tooltips. To disable tooltips set the display style to none.

Localizable Symbols

VideoTime also has s 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
VideoTime.TOOLTIPDefines a localized tooltip for the VideoTime component.

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.video.VideoTime(container, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
autoSize()
Sets the natural component size based on the inner text content, without truncation or wrapping.
 
dispose()
Dispose is used to remove itself and all sub-elements from the DOM
 
getDuration()
Returns the time displayed as the video duration, in milliseconds.
 
getHeight()
Returns the current inner height of the component.
 
getPlayedTime()
Returns the time displayed as the video elapsed time, in milliseconds.
 
getWidth()
Returns the current inner width of the component.
 
resize(w, h)
Resizes the VideoTime component to the specified width and height.
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
 
setDuration(ms)
Sets the time displayed as the video duration
 
setModifier(modObj)
Sets 1-N # of modifiers for the component.
 
setPlayedTime(ms)
Sets the time displayed as the video elapsed time, in milliseconds
Class Detail
s7sdk.video.VideoTime(container, settings, compId) 
Example Code

This example demonstrates how to use the VideoTime component in a simple video viewer. In this example a Container object,
a VideoPlayer object, and a VideoTime object are created. Every time a user clicks the VideoPlayer, video playback starts or
pauses. The VideoTime object updates to display the current video time and video duration as the video 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. 

  2. CSS Styles are defined in the document head to control the appearance of the SDK components.
    3. 

  3. The s7sdk.Util.init() method is called to initialize the SDK.
    4. 

  4. A ParameterManager object is created to handle component modifiers for the viewer.
    5. 

  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. 

  6. Handler functions are defined to respond to the component event listeners added in the initViewer() function.
    7. 

  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. 

  8. Finally, the init() method is called on the ParameterManager object to start the viewer.
    9. 


<!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>VideoTime 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;
            }
            .s7videotime {
                position: absolute;
                background-color: #ffffff;
                top: 20px;
                left: 220px;
            }
        </style>

    </head>
    <body style="margin: 0 0;overflow:hidden;">	

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

            // 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("asset", "Viewers/Glacier_Preview_Baseline");
                params.push("size", "512,288");
                params.push("autoplay", "1");
                params.push("autoload", "1");
                params.push("playback", "auto");
                params.push("singleclick", "playPause");

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

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

                // Create VideoTime component object with native controls
                videoTime = new s7sdk.video.VideoTime(container, params, "videoTime");

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

            // 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 VideoTime object for VideoPlayer time or duration changes
            function onNotifyVideoTime(event){
                if(event.s7event.type == s7sdk.event.VideoEvent.NOTF_CURRENT_TIME){
                    videoTime.setPlayedTime(event.s7event.data);
                }else if(event.s7event.type == s7sdk.event.VideoEvent.NOTF_DURATION){
                    videoTime.setDuration(event.s7event.data);
                }
            }

            // 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 VideoTime:

.s7videotime {
	position:absolute;
	width:57px;
	height:15px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:4px;
 }
.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
autoSize()
Sets the natural component size based on the inner text content, without truncation or wrapping.
dispose()
Dispose is used to remove itself and all sub-elements from the DOM
{Number} getDuration()
Returns the time displayed as the video duration, in milliseconds.
Returns:
video duration
{Number} getHeight()
Returns the current inner height of the component.
Returns:
{Number} the inner height of the component, in pixels.
{Number} getPlayedTime()
Returns the time displayed as the video elapsed time, in milliseconds.
Returns:
current played time
{Number} getWidth()
Returns the current inner width of the component.
Returns:
{Number} the inner width of the component, in pixels.
resize(w, h)
Resizes the VideoTime component to the specified width and height.
Parameters:
{Number} w
The width of the component, in pixels.
{Number} h
The height of the component, 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. .s7videotime
{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 time displayed as the video duration
Parameters:
{Number} ms
video duration, 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
setPlayedTime(ms)
Sets the time displayed as the video elapsed time, in milliseconds
Parameters:
{Number} ms
video playback time, in milliseconds.
Documentation generated by JsDoc Toolkit 2.4.0 on Thu Oct 15 2020 11:59:14 GMT-0000 (UTC)