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 HTML5 Viewer 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 Class	Attribute Selector	Description
`.s7playpausebutton`	`selected=[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 HTML5 Viewers SDK User Guide.

Symbol	Description
`PlayPauseButton.TOOLTIP_SELECTED`	Tooltip for selected button state
`PlayPauseButton.TOOLTIP_UNSELECTED`	Tooltip for unselected button state
`PlayPauseButton.TOOLTIP_REPLAY`	Tooltip 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:

The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
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 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.).
Handler functions are defined to respond to the component event listeners added in the initViewer() function.
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.
Finally, the init() method is called on the ParameterManager object to start the viewer.

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

Namespaces

Classes in s7sdk.common

Class s7sdk.common.PlayPauseButton