HTML5 Viewer SDK API Documentation 

Namespaces

Class Index

Classes in s7sdk.video

Class s7sdk.video.MutableVolume

The MutableVolume is a composite user interface component that combines the vertical volume control with a mute button. The two components are typically wired up for use as a single audio control.

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

Currently this component does not support any modifiers.

Defining Appearance using CSS

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

The styling of the sub-elements using class selectors, like .s7mutebutton 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 .s7mutablevolume .s7mutebutton. For more information on component styling see the HTML5 Viewer SDK User Guide and the default styles section.

CSS ClassAttribute SelectorDescription
.s7mutablevolume(None)Define appearance of MutableVolume container.
.s7mutebuttonselected=[true|false] state=[up|over|down|disabled]Define appearance of MutableVolume button for each state and selection.
.s7verticalvolume(None)Define appearance of MutableVolume vertical volume part of control.
.s7track(None)Define appearance of MutableVolume track line of vertical volume part of control.
.s7filledtrack(None)Define appearance of MutableVolume filled track line of vertical volume part of control.
.s7knob(None)Define appearance of MutableVolume knob of vertical volume part of control..
.s7tooltip(None)A global class selector that defines appearance for the tooltips. To disable tooltips set the display style to none.

Localizable Symbols

MutableVolume also has a 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
MutableVolume.TOOLTIP_SELECTEDDefines a localized tooltip for the selected state of MutableVolume component.
MutableVolume.TOOLTIP_UNSELECTEDDefines a localized tooltip for the unselected state of MutableVolume component.
MutableVolume.TOOLTIP_VOLUMEDefines a localized symbol to volume scrubber knob MutableVolume component.

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.video.MutableVolume(container, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
activate()
Enables the MutableVolume.
 
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the MutableVolume component.
 
blur()
Removes focus from component.
 
deactivate()
Disables the MutableVolume.
 
dispose()
Dispose is used to remove itself and all sub-elements from the DOM
 
focus()
Puts focus on component if it is currently active.
 
getHeight()
Returns the current inner height of the component.
 
getPosition()
Returns the position of the associated volume control, as a percentage from 0 to 1.
 
getWidth()
Returns the current inner width of the component.
 
isSelected()
Returns true if the MutableVolume is selected.
 
resize(w, h)
Resize the MutableVolume.
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
 
setModifier(modObj)
Sets 1-N # of modifiers for the component.
 
setPosition(value)
Sets position of the associated volume control.
 
setSelected(value)
Sets button selected state.
Class Detail
s7sdk.video.MutableVolume(container, settings, compId) 
Example Code

This example demonstrates how to use the MutableVolume component in a simple video viewer. In this example a Container object,
a VideoPlayer object, and a MutableVolume object are created. Rolling over the mute button reveals a volume slider. Clicking the
mute button mutes or unmutes the VideoPlayer audio. Sliding the knob of the volume slider or clicking anywhere else changes 
the VideoPlayer volume.

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. A CSS Style is defined in the document head to control the appearance of the MutableVolume component.
    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>MutableVolume 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">
            .s7mutablevolume {
                position: absolute;
                top: 3px;
                left: 50%;
            }
            .s7videotoolbar {
                display:block;
                position: absolute;	
                top: 288px;
                width: 512px;
                height: 32px;
                z-index: 5000;
                padding: 0px;
                background-color: #ccc;
            }

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

            // 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", "GeoRetail/AdobeRIA-AVS");
                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 the VideoPlayer component object with native controls
                videoPlayer = new  s7sdk.video.VideoPlayer( container, params, "myVideoPlayer");

                // Create the MutableVolume component object with native controls
                mutableVolume = new s7sdk.video.MutableVolume("s7toolbar", params, "mutableVolume");

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

                // 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, false);
                mutableVolume.addEventListener(s7sdk.event.SliderEvent.NOTF_SLIDER_MOVE, onVolumeSlide, false);
                mutableVolume.addEventListener(s7sdk.event.SliderEvent.NOTF_SLIDER_UP, onVolumeSlide, 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 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);
            }

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

.s7mutablevolume {
	position:absolute;
	width:25px;
	height:25px;
	-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);
 }
.s7mutablevolume .s7mutebutton {
	position:absolute;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
 }
.s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
	background-image:url(images/sdk/muteon_up.png);
 }
.s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
	background-image:url(images/sdk/muteon_over.png);
 }
.s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
	background-image:url(images/sdk/muteon_down.png);
 }
.s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
	background-image:url(images/sdk/muteon_disabled.png);
 }
.s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
	background-image:url(images/sdk/muteoff_up.png);
 }
.s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
	background-image:url(images/sdk/muteoff_over.png);
 }
.s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
	background-image:url(images/sdk/muteoff_down.png);
 }
.s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
	background-image:url(images/sdk/muteoff_disabled.png);
 }
.s7mutablevolume .s7verticalvolume {
	position:absolute;
	width:25px;
	height:80px;
	left:0px;
	background-color:#ccc;
 }
.s7mutablevolume .s7verticalvolume .s7track {
	position:absolute;
	top:12px;
	left:10px;
	width:5px;
	height:55px;
	background-color:#737373;
 }
.s7mutablevolume .s7verticalvolume .s7filledtrack {
	position:absolute;
	left:0px;
	width:5px;
	background-color:#ffffff;
 }
.s7mutablevolume .s7verticalvolume .s7knob {
	position:absolute;
	width:13px;
	height:13px;
	top:6px;
	left:6px;
	background-image:url(images/sdk/volume_knob.png);
 }
.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.ParameterManager
s7sdk.video.VideoPlayer
Method Detail
activate()
Enables the MutableVolume. After this call the MutableVolume will be in one of the following states: up, down, over. Depending on user interaction the appropriate styling attribute state will apply: up|down|over.
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the MutableVolume 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 a drag gesture on the knob is started with vertical volume knob or a tap happened anywhere else. s7sdk.event.SliderEvent
  • s7sdk.event.SliderEvent.NOTF_SLIDER_MOVE - Dispatched when a drag gesture on the knob is in progress and the vertical volume knob position is changed or a tap happened anywhere else. s7sdk.event.SliderEvent
  • s7sdk.event.SliderEvent.NOTF_SLIDER_UP - Dispatched when a drag gesture on the knob is finished or a tap happened anywhere else. 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
    blur()
    Removes focus from component.
    deactivate()
    Disables the MutableVolume. After this call the MutableVolume will be in the disabled state. The styling for state=disabled will apply.
    dispose()
    Dispose is used to remove itself and all sub-elements from the DOM
    focus()
    Puts focus on component if it is currently active.
    {Number} getHeight()
    Returns the current inner height of the component.
    Returns:
    {Number} the inner height of the component, in pixels.
    {Number} getPosition()
    Returns the position of the associated volume control, as a percentage from 0 to 1.
    Returns:
    knob position in the volume slider
    {Number} getWidth()
    Returns the current inner width of the component.
    Returns:
    {Number} the inner width of the component, in pixels.
    {Boolean} isSelected()
    Returns true if the MutableVolume is selected.
    Returns:
    current selection state
    resize(w, h)
    Resize the MutableVolume.
    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. .s7mutablevolume
    {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
    setPosition(value)
    Sets position of the associated volume control.
    Parameters:
    {Number} value
    the position as a percentage from 0 to 1.
    setSelected(value)
    Sets button selected state.
    Parameters:
    {Boolean} value
    use true to set the icon to mute (selected) and false for not muted (not selected)
    Documentation generated by JsDoc Toolkit 2.4.0 on Thu Oct 15 2020 11:59:14 GMT-0000 (UTC)