Adobe Experience Viewers HTML5 SDK API Documentation 

Namespaces

Class Index

Classes in s7sdk.common

Class s7sdk.common.PlayPauseButton


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

The PlayPauseButton is a two state button that is typically used for toggling between playing (or replaying) and pausing of the video playback in the VideoPlayer component. This component toggles between the play (or replay) and pause icons depending on the selected state and enableReplay() API call. The selected state is automatically changed when user clicks/taps on the button. Alternatively, the state can be changed through setSelected() API. In addition enableReplay() method controls the icon displayed in selected state, it can be either "play" or "replay" icon.

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

Currently this component does not support any modifiers.

Defining the Appearance using CSS

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

CSS ClassAttribute SelectorDescription
.s7playpausebuttonselected=[true|false] state=[up|over|down|disabled] replay=[true|false]Define appearance of the PlayPauseButton component. Each state can be styled independently.
.s7tooltip(None)A global class selector that defines appearance for the tooltips. To disable tooltips set the display style to none.

Localizable Symbols

PlayPauseButton 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.

SymbolDescription
PlayPauseButton.TOOLTIP_SELECTEDTooltip for selected button state
PlayPauseButton.TOOLTIP_UNSELECTEDTooltip for unselected button state
PlayPauseButton.TOOLTIP_REPLAYTooltip for replay button state

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.common.PlayPauseButton(container, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
enableReplay(val)
Sets the icon for "selected" button state, it can be either "play" or "replay" icon.
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.PlayPauseButton(container, settings, compId) 
Example Code

This example demonstrates how to use the PlayPauseButton component in a simple video viewer. In this example a Container object,
a VideoPlayer object, and PlayPauseButton object are created. Every time a user clicks the button, the VideoPlayer playback
starts or pauses.

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. The s7sdk.Util.init() method is called to initialize the SDK.
    3. 

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

  4. An initViewer() function is defined. This function initializes several 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.).
    5. 

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

  6. 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.
    7. 

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


<!DOCTYPE html>
<html>
    <head>
        <title>PlayPauseButton Component</title>
        <script type="text/javascript" src="../js/s7sdk/utils/Utils.js"></script>

        <script type="text/javascript">
            s7sdk.Util.lib.include('s7sdk.common.Container');
            s7sdk.Util.lib.include('s7sdk.event.Event');
            s7sdk.Util.lib.include('s7sdk.video.VideoPlayer');
            s7sdk.Util.lib.include('s7sdk.common.Button');
        </script>

        <style type="text/css" media="screen">
            html,body {
                width: 100%;
                height: 100%;
            }
            body {
                padding: 0px;
                margin: 0px;
                font-size: 12px;
                background: #FFFFFF;
                overflow: hidden;
            }	
        </style>
    </head>
    <body>
        <script type="text/javascript">
            var params, container, videoPlayer, playPauseButton;

            // 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", "Scene7SharedAssets/Glacier_Climber_MP4");

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

                // Create the VideoPlayer component object
                videoPlayer = new s7sdk.video.VideoPlayer(container, params, "myVideoPlayer");
				videoPlayer.resize(container.getWidth(),container.getHeight());

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

                // Set initial state of button to display play (for example purposes)
                playPauseButton.setSelected(true);

                // 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 PlayPauseButton click events
                playPauseButton.addEventListener("click", onPlayPauseButtonClick, false);
            }

            // 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){
				var cap = event.s7event.state;
				if (cap.hasCapability(s7sdk.VideoCapabilityState.PAUSE)) {
	 				playPauseButton.setSelected(false);
				}
				else if (cap.hasCapability(s7sdk.VideoCapabilityState.PLAY) || cap.hasCapability(s7sdk.VideoCapabilityState.REPLAY)) {
					playPauseButton.setSelected(true);
				}				
				playPauseButton.enableReplay(cap.hasCapability(s7sdk.VideoCapabilityState.REPLAY));	
            }

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

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

.s7playpausebutton {
	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;
 }
.s7playpausebutton[selected='true'][state='up'] {
	background-image:url(images/sdk/play_up.png);
 }
.s7playpausebutton[selected='true'][state='over'] {
	background-image:url(images/sdk/play_over.png);
 }
.s7playpausebutton[selected='true'][state='down'] {
	background-image:url(images/sdk/play_down.png);
 }
.s7playpausebutton[selected='true'][state='disabled'] {
	background-image:url(images/sdk/play_disabled.png);
 }
.s7playpausebutton[selected='false'][state='up'] {
	background-image:url(images/sdk/pause_up.png);
 }
.s7playpausebutton[selected='false'][state='over'] {
	background-image:url(images/sdk/pause_over.png);
 }
.s7playpausebutton[selected='false'][state='down'] {
	background-image:url(images/sdk/pause_down.png);
 }
.s7playpausebutton[selected='false'][state='disabled'][state='up'] {
	background-image:url(images/sdk/pause_disabled.png);
 }
.s7playpausebutton[selected='true'][replay='true'][state='up'] {
	background-image:url(images/sdk/replay_up.png);
 }
.s7playpausebutton[selected='true'][replay='true'][state='over'] {
	background-image:url(images/sdk/replay_over.png);
 }
.s7playpausebutton[selected='true'][replay='true'][state='down'] {
	background-image:url(images/sdk/replay_down.png);
 }
.s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
	background-image:url(images/sdk/replay_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.common.ControlBar
s7sdk.video.VideoPlayer
s7sdk.ParameterManager
Method Detail
enableReplay(val)
Sets the icon for "selected" button state, it can be either "play" or "replay" icon. The actual icon is set in CSS for appropriate value of replay attribute selector.
Parameters:
{Boolean} val
if set to true, "replay" icon will be used for selected button state instead of default "play" icon.
Documentation generated by JsDoc Toolkit 2.4.0 on Wed May 15 2024 09:55:07 GMT-0000 (UTC)