Class s7sdk.common.ClosedCaptionButton

Extends s7sdk.common.Button, s7sdk.common.TwoStateButton.

The ClosedCaptionButton is a two state button that is used to enable or disable closed captioning in a video. The selected state is automatically changed when user clicks/taps on the button. Alternatively, the state can be changed through setSelected() API.

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

Currently this component does not support any modifiers.

Defining Appearance using CSS

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

CSS Class	Attribute Selector	Description
`.s7closedcaptionbutton`	`selected=[true\|false]` `state=[up\|over\|down\|disabled]`	Define appearance of `ClosedCaptionButton` for each state, independently for selected and unselected case.
`.s7tooltip`	(None)	A global class selector that defines appearance for the tooltips. To disable tooltips set the `display` style to `none`.

Localizable Symbols

ClosedCaptionButton also has text symbols 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 Adobe Experience Viewers HTML5 SDK User Guide.

Symbol	Description
`ClosedCaptionButton.TOOLTIP_SELECTED`	Tooltip for selected button state
`ClosedCaptionButton.TOOLTIP_UNSELECTED`	Tooltip for unselected button state

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.common.ClosedCaptionButton(container, settings, compId)

Methods borrowed from class s7sdk.common.Button:: activate, addEventListener, blur, deactivate, dispose, focus, getHeight, getWidth, resize, setCSS, setLabel
Methods borrowed from class s7sdk.common.TwoStateButton:: isSelected, setSelected

Class Detail

s7sdk.common.ClosedCaptionButton(container, settings, compId)

Example Code
This example demonstrates how to use the ClosedCaptionButton component in a simple viewer. In this example a Container object,
a VideoPlayer object and a ClosedCaptionButton object are created. The video is played automatically on page load.
When a user clicks the ClosedCaptionButton the closed captioning is enabled or disabled.

The code below does the following:

The Adobe Experience Viewers 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, including captions.
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 couple of modifiers (hard coded for example purposes),
then creates the component objects required for this simple example.
A ClosedCaptionButton click handler function is added.
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.
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,  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>Closed Caption 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.Button');
            s7sdk.Util.lib.include('s7sdk.common.Container');
            s7sdk.Util.lib.include('s7sdk.event.Event');
            s7sdk.Util.lib.include('s7sdk.video.VideoPlayer');
        </script>

        <style type="text/css" media="screen">
            .s7videoplayer {
                width:512px;
                height:288px;    
            }

            /* position the ClosedCaptionButton in the bottom right of the video.*/
            .s7closedcaptionbutton {
                position: absolute;
                top: 260px;
                left: 480px;
                z-index: 1;
            }

            /* create a dark background with rounded edges*/
            .s7caption {
                background-color: #223344;
                border-radius: 3px;
            }


        </style>

    </head>
    <body>

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

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

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

            // Add localized tool tip strings
            params.setLocalizedTexts({
                "en":{
                    "ClosedCaptionButton.TOOLTIP_UNSELECTED":"Enable Close Captioning",
                    "ClosedCaptionButton.TOOLTIP_SELECTED":"Disable Close Captioning"
                },
                "fr":{
                    "ClosedCaptionButton.TOOLTIP_UNSELECTED":"Activer le sous-titrage",
                    "ClosedCaptionButton.TOOLTIP_SELECTED":"Désactiver le sous-titrage"
                },
                "ja":{
                    "ClosedCaptionButton.TOOLTIP_UNSELECTED":"キャプションクローズ有効",
                    "ClosedCaptionButton.TOOLTIP_SELECTED":"キャプション閉じる無効"
                },
                defaultLocale: "en"
            });

            // 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("contenturl", "https://s7d1.scene7.com/is/content/");
                params.push("asset", "Scene7SharedAssets/Adobe_QBP-AVS");
                params.push("autoplay", "1");
                params.push("singleclick", "playPause");
                params.push("iconeffect", "1,-1,0.3,0");
                params.push("caption", "Scene7SharedAssets/adobe_qbc_final_cc,1");

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

                // Create VideoPlayer component object
                videoPlayer = new s7sdk.video.VideoPlayer(container,params,"s7viewer");
                // enable closed caption by default
                videoPlayer.setCaptionEnabled(true);

                // Create the ClosedCaptionButton
                closedCaptionButton  = new s7sdk.common.ClosedCaptionButton(container, params, "closedCaptionButton");
                closedCaptionButton.setSelected(videoPlayer.getCaptionEnabled());
                closedCaptionButton.addEventListener("click", clickClosedCaptionButton);
            }

            // Add ClosedCaption enable/disable feature.
            function clickClosedCaptionButton() {
                videoPlayer.setCaptionEnabled(!videoPlayer.getCaptionEnabled());
            }

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

.s7closedcaptionbutton {
	width:25px;
	height:25px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	-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);
	position:absolute;
 }
.s7closedcaptionbutton[selected='true'][state='up'] {
	background-image:url(images/sdk/closedcaptions_up.png);
 }
.s7closedcaptionbutton[selected='true'][state='over'] {
	background-image:url(images/sdk/closedcaptions_over.png);
 }
.s7closedcaptionbutton[selected='true'][state='down'] {
	background-image:url(images/sdk/closedcaptions_down.png);
 }
.s7closedcaptionbutton[selected='true'][state='disabled'] {
	background-image:url(images/sdk/closedcaptions_disabled.png);
 }
.s7closedcaptionbutton[selected='false'][state='up'] {
	background-image:url(images/sdk/closedcaptions_disabled.png);
 }
.s7closedcaptionbutton[selected='false'][state='over'] {
	background-image:url(images/sdk/closedcaptions_over.png);
 }
.s7closedcaptionbutton[selected='false'][state='down'] {
	background-image:url(images/sdk/closedcaptions_down.png);
 }
.s7closedcaptionbutton[selected='false'][state='disabled'] {
	background-image:url(images/sdk/closedcaptions_disabled.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.video.VideoPlayer; s7sdk.video.VideoControls

Namespaces

Classes in s7sdk.common

Class s7sdk.common.ClosedCaptionButton