Adobe Experience Viewers HTML5 SDK API Documentation 

Namespaces

Class Index

Classes in s7sdk.common

Class s7sdk.common.ControlBar

The ControlBar is a convenience component which acts as container to a set of UI elements like buttons and such. ControlBar supports fade in/out animation which hides control bar and all managed components on user idle. In particular ControlBar can be used to group video controls (PlayPauseButton, VideoScrubber, VideoTime, MutableVolume and FullScreenButton) in video player application.

The component is added to a ControlBar simply by using ControlBar's DOM element as a container or by calling attach() method. The area where ControlBar should track user events is specified using attachView() method.

The ControlBar supports optional scrolling in case its elements do not fit into available ControlBar width. In order to activate this scrolling feature developer needs to set CSS position property to absolute for .s7controlbar .s7innercontrolbarcontainer element (the default setting is static). Also, developer needs to make sure that inner components and DOM elements added to the ControlBar are not using absolute or fixed positioning.
When the scrolling is activated the ControlBar renders a left/right scroll button in the right-hand side. Activating this button moves ControlBar elements all the way to the right; activating it yet again returns inner elements to their original position.
The left/right scroll button appearance is controlled by the .s7controlbar .s7scrollleftrightbutton selector.

Customizing Behavior Using Modifiers

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

The following modifiers are supported:

ModifierSyntaxDescriptionDefault
transitionnone|fade[,delaytohide[, duration]Specifies the effect type that is used to show or hide the ControlBar and its content. Set none for instant show or hide. Set fade to provide a gradual fade in and fade out effect. Not supported on Internet Explorer 7 and 8. Set delaytohide to specify the time in seconds between the last mouse or touch event as registered by the component and the time control bar hides. If this argument is set to -1 the component never triggers its auto-hide effect and it is always visible on the screen. Set duration to set the number of seconds duration of the fade in and fade out animation.fade,2,0.5

Defining the Appearance using CSS

You can define the appearance of the ControlBar component using CSS rules. All Adobe Experience Viewers HTML5 SDK components use class selectors for styling. You can style the body of the ControlBar component by using the .s7controlbar class selector. The styles that are associated with this class selector are applied to all instances of the ControlBar component. You can style particular instances by prefixing the class rule with the instance #id. For example, styling rules for #myComp.s7controlbar are applied only to the particular ControlBar instance.

CSS ClassAttribute SelectorDescription
.s7controlbar(None)Represents the main body of the ControlBar component.
.s7controlbar .s7innercontrolbarcontainer(None)Represents the inner ControlBar container components and DOM elements are added to. Author may need to adjust its position CSS property in order to activate optional scrolling feature as described in component's documentation.
.s7controlbar .s7scrollleftrightbuttonstate=[up|over|down]Represents the left/right scroll button used for scrolling ControlBar content.

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.common.ControlBar(container, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
attach(component)
Attaches an SDK component or arbitrary DOM object to the ControlBar.
 
attachView(view, keepVisible)
Attaches an SDK component or arbitrary DOM object (view) to the ControlBar, the control bar will listen to mouse/touch events within the area of that view and show/hide control bar appropriately using animation configured with transition modifier.
 
detach(component)
Detaches DOM object or SDK component previously registered using attach() method from the ControlBar.
 
detachAll()
Detaches all DOM objects or SDK components previously registered using attachView() method from the ControlBar.
 
detachView(view)
Detaches DOM object or SDK component previously registered using attachView() method from the ControlBar.
 
dispose()
Dispose is used to remove itself and all sub-elements from the DOM
 
getComponent()
Gets the reference to the component since the constructor function returns a dynamic wrapper not the component itself.
 
getHeight()
Returns the current inner height of the component.
 
getWidth()
Returns the current inner width of the component.
 
resize(w, h)
Resize the ControlBar.
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
 
setModifier(modObj)
Sets 1-N # of modifiers for the component.
Class Detail
s7sdk.common.ControlBar(container, settings, compId) 
Example Code

This example demonstrates how to use the ControlBar component in a video viewer. In this example a Container object,
a VideoPlayer object, a VideoControlBar object, a PlayPauseButton object, a VideoScrubber object, a VideoTime object,
a MutableVolume object, and a FullScreenButton object are created. Together these components create a fully functional
video player with all the standard controls and features most users expect when watching video on the Web.

The code below does the following:

    

  1. The Adobe Experience Viewers 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. Notice that after the ControlBar component object is
created the attachView() method is called with the VideoPlayer object as a parameter. The initViewer() function also adds
multiple 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 Adobe Experience Viewers HTML5 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" />
        <!-- removed height=device-height, -->
        <meta name="viewport" content="user-scalable=no, height=device-height,
            width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <!-- Hiding the Safari on iPhone OS UI components -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="apple-touch-fullscreen" content="YES" />
        <!-- Specifying a per-page Home screen icon -->
        <link rel="apple-touch-icon" href=""/>
        <link rel="apple-touch-startup-image" href="" />

        <title>ControlBar 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.common.Button');
            s7sdk.Util.lib.include('s7sdk.video.VideoPlayer');
            s7sdk.Util.lib.include('s7sdk.common.ControlBar');
            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;
            }
            .s7controlbar {
                position: absolute;
                bottom: 30px;
                left: 46px;
            }
            #mutableVolume {
                top: 2px;
                right: 30px;
            }
            #videoTime {
                top:4px;
                right: 60px;
            }
            #playpauseBtn {
                top: 2px;
                left: 2px;
            }
            #videoScrubber{
                top: 2px;
                left: 36px;
            }
            #fullscreenBtn{
                top: 2px;
                right: 2px;
            }
        </style>        

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

        <script language="JavaScript" type="text/javascript">
            var params, container, videoPlayer, controlBar, playPauseButton,
                fullScreenButton, videoTime, videoScrubber, mutableVolume;

            // 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", "https://s7d1.scene7.com/is/image/");
                params.push("videoserverurl", "https://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.Container(null, params, "s7container");

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

                // Create the ControlBar component object
                controlBar = new s7sdk.common.ControlBar(container, params, "s7vtoolbar");

                // Attach the VideoPlayer object to the ControlBar
                controlBar.attachView(videoPlayer, false);

                // Create the PlayPauseButton component object
                playPauseButton = new s7sdk.common.PlayPauseButton("s7vtoolbar", params, "playpauseBtn");

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

                // Create the VideoTime component object
                videoTime = new s7sdk.video.VideoTime("s7vtoolbar", params, "videoTime");

                // Create the  MutableVolume component object
                mutableVolume = new s7sdk.video.MutableVolume("s7vtoolbar", params, "mutableVolume");

                // Create the FullScreenButton component object
                fullScreenButton = new s7sdk.common.FullScreenButton("s7vtoolbar", params, "fullscreenBtn");

                // Add event listeners for Container resize events and fullscreen events
                container.addEventListener(s7sdk.ResizeEvent.COMPONENT_RESIZE, onContainerResize,false);
                container.addEventListener(s7sdk.event.ResizeEvent.FULLSCREEN_RESIZE, onContainerFullScreen, false);

                // Add an event listener for VideoPlayer state change events
                videoPlayer.addEventListener(s7sdk.event.CapabilityStateEvent.NOTF_VIDEO_CAPABILITY_STATE, onNotifyVideoState, 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 an event listener for PlayPauseButton click events
                playPauseButton.addEventListener("click", onPlayPauseButtonClick);

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

                // Add an event listener for MutableVolume click events
                mutableVolume.addEventListener("click", onClickMute);

                // Add event listeners for MutableVolume slider events
                mutableVolume.addEventListener(s7sdk.event.SliderEvent.NOTF_SLIDER_DOWN, onVolumeSlide);
                mutableVolume.addEventListener(s7sdk.event.SliderEvent.NOTF_SLIDER_MOVE, onVolumeSlide);
                mutableVolume.addEventListener(s7sdk.event.SliderEvent.NOTF_SLIDER_UP, onVolumeSlide);

                // Add an event listener for FullScreenButton click events
                fullScreenButton.addEventListener("click", onClickFullScreen);
            }

            // 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 resize the VideoPlayer and update the fullscreen button
            // when the container enters/exits fullscreen display mode
            function onContainerFullScreen(event) {
                videoPlayer.resize(event.s7event.w, event.s7event.h );
                fullScreenButton.setSelected(container.isFullScreen());
            }

            // Define an event handler function to update the button if the video starts/stops on for a reason
            // other than button click (for example, reaching the end of the video).
            function onNotifyVideoState(event){
                playPauseButton.setSelected(event.s7event.state.hasCapability(s7sdk.VideoCapabilityState.PLAY));
            }

            // 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);
                    videoTime.setPlayedTime(event.s7event.data);
                }else if(event.s7event.type == s7sdk.event.VideoEvent.NOTF_DURATION){
                    videoScrubber.setDuration(event.s7event.data);
                    videoTime.setDuration(event.s7event.data);
                }else if(event.s7event.type == s7sdk.event.VideoEvent.NOTF_LOAD_PROGRESS){
                    videoScrubber.setLoadedPosition(event.s7event.data);
                }
            }

            // Define an event handler function to pause/resume the VideoPlayer when the PlayPauseButton is clicked
            function onPlayPauseButtonClick(event){
                if(playPauseButton.isSelected()){
                    videoPlayer.pause();
                }else{
                    videoPlayer.play();
                }
            }

            // Define an event handler function to update the VideoPlayer object for VideoScrubber slider interactions
            function onNotifyScrubberEvent(event){
                videoPlayer.seek(event.s7event.position * videoPlayer.getDuration());
            }

            // Define an event handler function to update the VideoPlayer mute state when the mute button is clicked
            function onClickMute(event){
                if(mutableVolume.isSelected()){
                    videoPlayer.mute();
                }else{
                    videoPlayer.unmute();
                }
            }

            // Define an event handler function to update the VideoPlayer volume when the volume slider changes
            function onVolumeSlide(event) {
                videoPlayer.setVolume(event.s7event.position);
            }

            // Define an event handler function to toggle the Container's fullscreen state when the button is clicked
            function onClickFullScreen(event){
                if(container.isFullScreen()){
                    container.cancelFullScreen();
                }else{
                    container.requestFullScreen();
                }
            }

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

.s7controlbar {
	background-color:#a6a6a6;
	position:relative;
	width:420px;
	height:30px;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	text-align:left;
 }
.s7controlbar .s7innercontrolbarcontainer {
	position:static;
	white-space:nowrap;
	height:100%;
 }
.s7controlbar .s7scrollbuttoncontainer {
	display:none;
	position:absolute;
	width:25px;
	height:100%;
	right:0px;
	background-color:inherit;
 }
.s7controlbar .s7scrollleftrightbutton {
	position:absolute;
	width:25px;
	height:25px;
 }
Parameters:
{String|Container} container
The reference to Container 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.PlayPauseButton
s7sdk.video.VideoTime
s7sdk.video.VideoScrubber
s7sdk.video.MutableVolume
s7sdk.FullScreenButton
Method Detail
attach(component)
Attaches an SDK component or arbitrary DOM object to the ControlBar. The component must not be a child of ControlBar. When component is attached to a ControlBar, the ControlBar will change component's opacity during fade in/out animation.
Parameters:
{SDK component or DOM object} component
attached object.
attachView(view, keepVisible)
Attaches an SDK component or arbitrary DOM object (view) to the ControlBar, the control bar will listen to mouse/touch events within the area of that view and show/hide control bar appropriately using animation configured with transition modifier. Once a mouse/touch event is registered in view, control bar shows. The auto-hide always happens when mouse leaves the ControlBar area and the area of all view objects registered with it. Also, depending on the value of keepVisible argument, the auto-hide may trigger if mouse does not move for certain time (see transition modifier) but stays within the area of this particular view object.
Parameters:
{SDK component or DOM object} view
the view to track mouse/touch events on.
{Boolean} keepVisible
if true, the ControlBar will not auto-hide while the mouse is idle but stays within the area of this view object. Otherwise, the ControlBar will auto-hide while the mouse is idle but is within the area of this view object.
detach(component)
Detaches DOM object or SDK component previously registered using attach() method from the ControlBar.
Parameters:
{SDK component or DOM object} component
detached object.
detachAll()
Detaches all DOM objects or SDK components previously registered using attachView() method from the ControlBar.
detachView(view)
Detaches DOM object or SDK component previously registered using attachView() method from the ControlBar.
Parameters:
{SDK component or DOM object} view
detached object.
dispose()
Dispose is used to remove itself and all sub-elements from the DOM
{s7sdk.common.ControlBar} getComponent()
Gets the reference to the component since the constructor function returns a dynamic wrapper not the component itself. You should NEVER store a reference returned by this API call since the component might have been rebuilt since your last call.
Returns:
{s7sdk.common.ControlBar} The reference to the core component the caller is a proxy for.
{Number} getHeight()
Returns the current inner height of the component.
Returns:
{Number} the inner height of the component.
{Number} getWidth()
Returns the current inner width of the component.
Returns:
{Number} the inner width of the component.
resize(w, h)
Resize the ControlBar.
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. .s7controlbar
{String} property
The CSS property that is being set. i.e. background-color
{String} value
The CSS property value being set. i.e. #FF0000
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
Documentation generated by JsDoc Toolkit 2.4.0 on Wed May 15 2024 09:55:06 GMT-0000 (UTC)