Class s7sdk.video.SmartCropVideoPlayer

The SmartCropVideoPlayer is a video viewing component that displays a MP4 or Adaptive Video Set video served by Adobe. Depending on system capabilities and on the value of the playback modifier, it uses either HLS, DASH or the native HTML video element. HTTP streaming video is used whenever the user's device supports it. If streaming manifest fails to load, player will fallback to progressive download

Video playback is controlled by clicking (or tapping) on the video if enabled using a singleClick modifier, or by using API methods and external video UI controls supplied with the SDK, such as ControlBar, PlayPauseButton, FullScreenButton, MutableVolume and VideoScrubber. Alternatively, native HTML5 video controls can be enabled using the following modifier: playback=progressive,1.

Information about the video and the state of the video playback can be obtained from the various VideoEvent events dispatched by the SmartCropVideoPlayer, and/or the methods available in its API. For example, video duration can be obtained using the getDuration() method and/or by handling the NOTF_DURATION event; the current play head position is available through the getCurrentTime() method and the NOTF_CURRENT_TIME and NOTF_SEEK events; the state of the media preloading (in progressive mode) can be read via the getLoadedPosition() method and the NOTF_LOAD_PROGRESS event. Current volume can be retrieved using the getVolume() method and the NOTF_VOLUME event.

The component also dispatches a convenience CapabilityStateEvent.NOTF_VIDEO_CAPABILITY_STATE events whenever any of video capabilities listed in VideoCapabilityState changes. This event in particular is very useful for controlling the state of external UI controls like PlayPauseButton.

The SmartCropVideoPlayer component provides a convenience API for describing underlying system restrictions related to video playback. The supportsInline() method identifies whether the system can play video inline; in the case when inline playback is not possible (like on some mobile phones), external UI elements like VideoScrubber are not needed on the page. The supportsVolumeControl() tells whether programmatic volume control is possible; on mobile devices volume is normally controlled using hardware buttons only, so MutableVolume should be hidden in that case.

In order to implement a full screen video experience, the SmartCropVideoPlayer should be embedded into the Container component; Container provides an API and support for full screen mode.

The SmartCropVideoPlayer component supports playback of video content hosted outside of Adobe Dynamic Media. If the path portion of URL to such external video ends with .m3u8 then the component automatically selects HLS playback type. If it ends with .mpd then the component automatically selects DASH playback, otherwise progressive playback will be used. Effectively SmartCropVideoPlayer ignores the value of playback modifier when working with external video. External video can be set using video modifier or setVideo() API method.

Customizing Behavior Using Modifiers

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

The following modifiers are supported:

Modifier	Syntax	Description	Default
serverurl	isRootPath	The Adobe Image Serving root path. If no domain is specified, the domain from which the page is served is applied instead. Standard URI path resolution applies.	/is/image/
videoserverurl	videoRootPath	The video server root path. If no domain is specified, the domain from which the page is served is applied instead. Standard URI path resolution applies.	/is/content/
contenturl	contentRootPath	The content root path. If no domain is specified, the domain from which the page is served is applied instead. Standard URI path resolution applies.	/is/content/
asset	value	The asset ID of the single video or Adaptive Video Set.	""
autoplay	0\|1	Indicates whether the component starts playing the video when the load operation is successfully completed. Some systems, such as certain mobile devices, may not support autoplay.	1
iconeffect	0\|1[,count][,fade][,autoHide]	Enables the IconEffect to display on top of the video when the video is in a paused state. Set count to specify the maximum number of times the icon overlay appears and reappears. A value of `-1` indicates that the overlay reappears indefinitely. Set fade to specify the duration in seconds of show or hide animation. Set autoHide to specify the number of seconds that the `IconEffect` stays fully visible before it auto-hides. That is, the time after fade in animation is completed and before fade out animation starts. A setting of `0` disables auto-hide behavior. On some devices or when controls are enabled using `playback` modifier, native controls are used. In such cases, the `iconeffect` modifier is ignored.	1,1,0.3,3
posterimage	none \| [image_id]	The image to display on the first frame before the video starts playing; resolved against `serverurl`. If specified in the URL the ? and all occurrences of & and = must be HTTP-encoded as `%3F`, `%26`, and `%3D`, respectively. If the image_id value is omitted, the component attempts to use the default poster image for that asset instead. When the video is specified as a path, the default poster images catalog ID is derived from the video path as the catalog_id/image_id pair where catalog_id corresponds to the first token in the path and image_id is the name of the video with the extension removed. If the image with that ID does not exist, the poster image is not shown. To prevent displaying of the default poster image, specify `none` as the poster image value.	""
singleclick	none\|playPause	Configures the mapping of single-click or tap-to-toggle play/pause. Set to `none` to disable single-click or tap-to-play/tap-to-pause. If set to `playPause`, clicking the video toggles between playing and pausing the video. On some devices, or when controls are enabled using the `playback` modifier, native controls are used. In such case, `singleclick` behavior is disabled.	playPause
playback	auto\|progressive\|hls\|dash [,0\|1]	Sets the type of playback used by the component. If `progressive` is specified, the component only relies on HTML5 playback as natively supported by browsers. If `auto` is specified, the component use HLS or DASH playback based on browser capability. The second argument tells whether or not to use native video controls during inline video playback--applies only when `progressive` or `auto` is used. The full screen playback that is initiated using a native full screen button always uses native controls. For more information on the playback selection in `auto` and `progressive` modes, see the Adobe Experience Viewers HTML5 SDK User Guide.	auto,0
caption	file[,0\|1]	`file` is a URL or path to WebVTT caption content. The WebVTT file must be served by Adobe Image Serving. WebVTT cue positioning is supported, but region and overlapping cues are not supported. The second parameter is the default caption state (enabled is true).	"",0
progressivebitrate	value	Specifies--in kbits per second or kbps--the desired video bit rate to play from the Adaptive Video Set in case the current system does not support adaptive video playback. The component picks up the video stream with the closest possible--but not exceeding--bit rate to the specified value. If all video streams in the Adaptive Video Set have higher quality than the specified value, the logic chooses the bit rate with the lowest quality.	700
initialbitrate	value	Sets the bit rate of the video that the video player starts to look for in the Adaptive Video Set. If the value does not exist in the Adaptive Video Set, the video player starts with the video that has the next lowest bit rate. If set to `0`, the video player starts from the lowest possible bit rate. Applicable only for desktop browsers that use software HLS or DASH playback when the `playback` modifier is set to `auto`. On slow connections high bitrate settings may be ignored by the streaming implementation and lower bitrate will be used instead to ensure smooth playback.	0
loop	0\|1	Indicates whether the media plays again after playback is complete.	0
ssl	on\|auto	Controls whether the video is delivered over secure SSL connection (HTTPS) or insecure (HTTP). When set to `auto` the video delivery protocol will be inherited from the protocol of embedding web page: if the web page is loaded over HTTPS, the video will be also delivered over HTTPS; and vice verse: if the web page is on HTTP, video will also be delivered over HTTP. When set to `on`, video delivery always happens over secure connection irrespective to the web page protocol. Applicable only for for Public video delivery in AEM.	auto
waiticon	0\|1	Enables or disables buffering animation (wait icon) display.	1
video	file	`file` is an absolute or relative URL to the video content hosted outside of Adobe Dynamic Media, refer to component description for additional details.	""
preload	0\|1	Indicates whether the component begins loading video content before the playback starts. If set to `1` the video begins to download right after the asset is set, otherwise preload starts only after the playback is initiated by the end user or an API call. When video preload is disabled certain features may not work until the playback starts, specifically seek operation will not update the video frame; if poster image is disabled the component will show empty area instead of the 1st video frame. Finally, disabling video preload may be ignored on certain versions of Internet Explorer 11 and Edge browsers.	1
mutevolume	0\|1	Sets muted mode for video playback on initial load. If set to `1` the volume is muted, otherwise video plays with sound. On certain devices muting video playback on load will also allow to auto play the video.	0

Defining the Appearance using CSS

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

The styling of the sub-elements using class selectors like .s7iconeffect 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 .s7smartcropvideoplayer .s7iconeffect. For more information on component styling see the Adobe Experience Viewers HTML5 SDK User Guide and the default styles section.

CSS Class	Attribute Selector	Description
`.s7smartcropvideoplayer`	(None)	Represents the main body of the `SmartCropVideoPlayer` component.
`.s7iconeffect`	`state=[play\|replay]`	Defines the appearance of the IconEffect. If the video playback has reached the end component applies `state=replay` selector; otherwise `state=play` is used.
`.s7caption`	(None)	Defines the appearance of any captions when present. Position information will not be used as the WebVTT format controls the size and location of the caption.
`.s7waiticon`	(None)	Defines the appearance of wait icon when it is enabled.
`.s7smartcropoverlay`	(None)	Defines the style of smart crop overlay.
`.s7smartcroppoimarker`	(None)	Defines the style of smart crop poi market.

Localizable Symbols

SmartCropVideoPlayer also has s 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 Adobe Experience Viewers HTML5 SDK User Guide.

Symbol	Description
`SmartCropVideoPlayer.ERROR`	Defines a localized tooltip for the error message that appears when no video playback is possible.

Closed Caption Support

The SmartCropVideoPlayer component supports closed captioning through hosted WebVTT files. Overlapping cues are not supported. Regions are not supported. Supported cue positioning operators

Key	Name	Values	Description
`A`	text align	`left\|right\|middle\|start\|end`	Control text alignment. (Default: middle)
`T`	text position	0%-100%	Percentage of inset into the SmartCropVideoPlayer component for the beginning of the caption text. (Default: 0%)
`S`	line size	0%-100%	Percentage of video width used for captions. (Default: 100%)
`L`	line position	0%-100%\|integer	Determines the line position on the page. If it is expressed as an integer (no percent sign), then it is the number of lines from the top where the text is displayed. If it is a percentage (the percent sign is the last character), then the caption text is displayed that percent down the display area. (Default: 100%)

Other WebVTT features present in the WebVTT file are not supported, but should not disrupt the captioning.

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.video.SmartCropVideoPlayer(container, settings, compId)

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `SmartCropVideoPlayer` component.
	dispose() Dispose is used to remove itself and all sub-elements from the DOM
	ended() Returns true if the video playback has finished.
	getAsset() Returns the asset currently displayed in the viewer.
	getCapabilityState() Returns a `VideoCapabilityState` object that can be used to determine the current state of the `SmartCropVideoPlayer` component.
	getCaptionEnabled() Get closed captioning state based on the caption modifier, see usage of the `s7sdk.video.SmartCropVideoPlayer.setCaptionEnabled()` API.
	getCurrentTime() Returns the current playback time, in milliseconds.
	getDuration() Returns the video duration in milliseconds or `undefined` if duration is not currently available.
	getHeight() Returns the current inner height of the component.
	getLoadedPosition() Returns the current amount loaded, in milliseconds.
	getVolume() Returns the current audio volume, from 0 (silent) to 1 (maximum).
	getWidth() Returns the current inner width of the component.
	mute() Mutes the audio volume.
	muted() Return the muted state.
	pause() Pauses playback.
	play() Starts playback.
	resize(w, h) Resizes the `SmartCropVideoPlayer` component to the specified width and height.
	seek(time) Seeks to the specified time.
	setAsset(assetName, posterImage) Changes the current video.
	setCaption(caption) Change the current caption file.
	setCaptionEnabled(True) Control display of closed captions.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setItem(item) Sets the current video displayed by the component.
	setModifier(modObj) Sets 1-N # of modifiers for the component.
	setVideo(videoName, posterImage)
	setVolume(volume) Sets the current audio volume.
	stop() Stops playback.
	supportsInline() Returns `true` if the video supports inline playback in the current environment.
	supportsVolumeControl() Returns `true` if programmatic volume control is supported in the current environment, `false` otherwise.
	togglePause() Toggles between playback and pause.
	unmute() Restores the audio volume.

Class Detail

s7sdk.video.SmartCropVideoPlayer(container, settings, compId)

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

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.
A CSS Style is defined in the document head to control the appearance of the viewer.
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 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" />
        <!-- removed height=device-height, -->
        <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>SmartCropVideoPlayer 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.set.MediaSet');
            s7sdk.Util.lib.include('s7sdk.video.SmartCropVideoPlayer');
        </script>

        <style>
            html, body {
                padding:0px;
                margin:0px;
                width:100%;
                height:100%;
            }        
            #s7container {
                width:100%;
                height:100%; 
            }
            .s7smartcropvideoplayer {
                position: absolute;	
                top: 0px;
                left: 0px;
                width:100%;
                height:100%; 
            }            
            .s7videotoolbar {
                display:block;
                position:absolute; 
                bottom:0px;
                width:100%;
                height:25px;
                z-index:5000;
                padding:0px;
                background-color:#ccc;
            }
        </style>
    </head>
    <body>
        <div id="s7toolbar" class="s7videotoolbar"></div> 
        <script language="JavaScript" type="text/javascript">
            var params, mediaSet, container, smartCropVideoPlayer, 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("contenturl", "https://s7d1.scene7.com/is/content/");
            	params.push("MediaSet.asset", "Viewers/Glacier_Snowboarder-AVS");
				params.push("autoplay", "0");

				// Create the MediaSet component object
				mediaSet = new s7sdk.MediaSet(null, params, null);

                // Create the Container component object
                container = new s7sdk.Container(null, params, "s7container");
                container.addEventListener(s7sdk.event.ResizeEvent.COMPONENT_RESIZE, onContainerResize,false);

                // Create SmartCropVideoPlayer component object
                smartCropVideoPlayer = new s7sdk.video.SmartCropVideoPlayer(container,params,"s7viewer");

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

                // Add an event listener for PlayPauseButton click events
                playPauseButton.addEventListener("click", onClickPlayPause);

                // Add an event listener for SmartCropVideoPlayer capability change events
                smartCropVideoPlayer.addEventListener(s7sdk.event.CapabilityStateEvent.NOTF_VIDEO_CAPABILITY_STATE, onNotifyVideoState, false);
                playPauseButton.setSelected(true);

			mediaSet.addEventListener(s7sdk.AssetEvent.NOTF_SET_PARSED, function(e) {
				var mediaSetDesc = e.s7event.asset;
				//smartCropVideoPlayer.setItem(mediaSetDesc);

                		if (mediaSetDesc instanceof s7sdk.MediaSetDesc) {
			                var asset = null;
		                    	if (mediaSetDesc.type == s7sdk.ItemDescType.VIDEO_SET || mediaSetDesc.type == s7sdk.ItemDescType.VIDEO_GROUP) {
		                        // MBR set
                			        asset = mediaSetDesc;
			                } else {
		                        // single video
                		        	asset = mediaSetDesc.items[0];
			                }
                    
		                    	if (asset) {
		                        	smartCropVideoPlayer.setItem(asset);
                    			}
                		} else  throw new Error("Failed to get meta data for video: " + e.s7event.asset);

			}, false);
		}

            // Define an event handler function to update the PlayPauseButton object when the SmartCropVideoPlayer changes state
            function onNotifyVideoState(event){
                playPauseButton.setSelected(event.s7event.state.hasCapability(s7sdk.VideoCapabilityState.PLAY));
            }

            // Define an event handler function to update the SmartCropVideoPlayer object when the PlayPauseButton is clicked
            function onClickPlayPause(event){ 
                if(!playPauseButton.isSelected()){
                    smartCropVideoPlayer.play();
                }else{
                    smartCropVideoPlayer.pause();
                }
            }

            function onContainerResize(event) {
                smartCropVideoPlayer.resize(event.s7event.w, event.s7event.h);
            }
            // 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 SmartCropVideoPlayer:

.s7smartcropvideoplayer {
	position:absolute;
	overflow: hidden;
	background-color:#000000;
	-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);
 }
.s7smartcropvideoplayer .s7iconeffect {
	width:120px;
	height:120px;
	-webkit-transform:translateZ(0px);
	background-repeat:no-repeat;
	background-position:center;
 }
.s7smartcropvideoplayer .s7iconeffect[state='play'] {
	background-image:url(images/sdk/videoplayicon.png);
 }
.s7smartcropvideoplayer .s7iconeffect[state='replay'] {
	background-image:url(images/sdk/videoreplayicon.png);
 }
.s7smartcropvideoplayer .s7videoposter {	
	top : 0px;
	left : 0px;
	position : absolute;	
	background-repeat : no-repeat;
	background-position : center center;
	background-size : contain;
 }
.s7smartcropvideoplayer .s7caption {
	font-family:sans-serif;
	font-size:large;
	color:#ffffff;
	-webkit-transform:translateZ(0px);
	margin:0 auto;
 }
.s7smartcropvideoplayer .s7waiticon {
	background-image:url(images/sdk/busyicon.gif);
    background-repeat:no-repeat;
	background-position:center;
	position:absolute;
	width:101px;
	height:29px;
	left:50%;
	top:50%;
	margin-left:-50px;
	margin-top:-15px;	
 }
.s7smartcropvideoplayer .s7videoelement { 
	-webkit-clip-path : inset(0%);
	clip-path: inset(0%);
	transition: transform 0.25s linear;
	will-change: transform;
 }
.s7smartcropvideoplayer .s7smartcropoverlay {
    background:rgba(255,0,0,0.5);
    transition:left 0.25s linear;
    position:absolute;
}
.s7smartcropvideoplayer .s7smartcroppoimarker { 
    background:green;
    transition:left 0.25s linear;
    width:1px;
    height:100%;
    position:absolute;
}

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.common.PlayPauseButton; s7sdk.Container; s7sdk.ParameterManager

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the SmartCropVideoPlayer 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.VideoEvent.

The events supported by the component are:

s7sdk.event.VideoEvent.NOTF_CURRENT_TIME - Dispatched to report the current playback time. s7sdk.event.VideoEvent

s7sdk.event.VideoEvent.NOTF_DURATION - Dispatched to report the video duration, when read from the asset. s7sdk.event.VideoEvent

s7sdk.event.VideoEvent.NOTF_LOAD_PROGRESS - Dispatched to report the current amount of the video that has loaded. s7sdk.event.VideoEvent

s7sdk.event.VideoEvent.NOTF_VOLUME - Dispatched when playback volume has changed. s7sdk.event.VideoEvent

s7sdk.event.VideoEvent.NOTF_SEEK - Dispatched to report when a seek is performed. s7sdk.event.VideoEvent

s7sdk.event.VideoEvent.NOTF_VIDEO_END - Dispatched to report when playback of the current vide has ended. If loop modifier set in 1 playback never stops and this event never fires. s7sdk.event.VideoEvent

s7sdk.event.CapabilityStateEvent.NOTF_VIDEO_CAPABILITY_STATE - Dispatched when the play, pause, mute, unmute or stop capabilities have changed. s7sdk.event.CapabilityStateEvent

s7sdk.event.AssetEvent.ASSET_CHANGED - Dispatched when the currently played video changes. s7sdk.event.AssetEvent

s7sdk.event.StatusEvent.NOTF_ASSET_METADATA_READY - Dispatched when component receives asset metadata. If the component is initialized with setItem() it dispatches instantly inside that API call. Otherwise if the component loads req=set on its own, this event is sent when component has received and parsed req=set. s7sdk.event.StatusEvent

s7sdk.event.StatusEvent.NOTF_VIEW_READY - Dispatched when component fills the view entirely with image data (either poster image or first video frame). It is sent only after asset swap. s7sdk.event.StatusEvent

Parameters:
{String} type: Event name, for example s7sdk.event.VideoEvent.NOTF_CURRENT_TIME.
{Function} handler: Function to be called when the event gets dispatched.
{Boolean} useCapture: Register capture phase.

See:: s7sdk.event.VideoEvent; s7sdk.event.CapabilityStateEvent

dispose()

Dispose is used to remove itself and all sub-elements from the DOM

{Boolean} ended()

Returns true if the video playback has finished.

Returns:: whether video playback has finished.

{String} getAsset()

Returns the asset currently displayed in the viewer.

Returns:: current video asset

{s7sdk.VideoCapabilityState} getCapabilityState()

Returns a VideoCapabilityState object that can be used to determine the current state of the SmartCropVideoPlayer component. For example, if the video player has the PAUSE capability flag set, then this indicates that the video can be paused.

Returns:: the current capabilities of the SmartCropVideoPlayer instance.

See:: s7sdk.VideoCapabilityState

{Boolean} getCaptionEnabled()

Get closed captioning state based on the caption modifier, see usage of the s7sdk.video.SmartCropVideoPlayer.setCaptionEnabled() API.

Returns:: {Boolean} True if captions are shown, false otherwise.

See:: s7sdk.Button.CloseCaptionButton

{float} getCurrentTime()

Returns the current playback time, in milliseconds.

Returns:: current playback time

{float} getDuration()

Returns the video duration in milliseconds or undefined if duration is not currently available.

Returns:: video duration

{Number} getHeight()

Returns the current inner height of the component.

Returns:: {Number} the inner height of the component, in pixels.

{float} getLoadedPosition()

Returns the current amount loaded, in milliseconds. If the component is using streaming playback, the return value will be 0.

Returns:: amount of loaded video data

{float} getVolume()

Returns the current audio volume, from 0 (silent) to 1 (maximum). If volume control using JavaScript is not supported (see supportsVolumeControl()), returns 1.

Returns:: current volume

{Number} getWidth()

Returns the current inner width of the component.

Returns:: {Number} the inner width of the component, in pixels.

mute()

Mutes the audio volume. Ignored if volume control using JavaScript is not supported (see supportsVolumeControl()).

{Boolean} muted()

Return the muted state. If volume control using JavaScript is not supported (see supportsVolumeControl()), returns false.

Returns:: {Boolean} True if in muted state, false otherwise

pause()

Pauses playback.

play()

Starts playback.

resize(w, h)

Resizes the SmartCropVideoPlayer component to the specified width and height.

Parameters:
{Number} w: The width of the component, in pixels.
{Number} h: The height of the component, in pixels. .

seek(time)

Seeks to the specified time.

Parameters:
{float} time: the time to seek to in the video, in milliseconds

setAsset(assetName, posterImage)

Changes the current video. The component invalidates and rebuilds using the existing serverurl/videoserverurl and the new asset after retrieving the video information from Adobe Image Serving through means of req=set request. Unless the asset has not been set already, this call generates a SWAP tracking event that is managed by the TrackingManager component. Preferred way of changing the current video though is by simply calling setItem() API.

Parameters:
{String} assetName: the asset id of the single video or Adaptive Video Set.
{String} posterImage: (optional) the asset id of the poster image to be used.

See:: s7sdk.TrackingManager

setCaption(caption)

Change the current caption file. If a caption file is already loaded, its content is replaced. Calling s7sdk.video.SmartCropVideoPlayer.setCaption does not change the enabled or disabled state of closed captioning, which is controlled through the s7sdk.video.SmartCropVideoPlayer.setCaptionEnabled API call. Captions are not enabled by default.

Parameters:
{String} caption: the caption file to be used.

See:: s7sdk.common.Button.ClosedCaptionButton

setCaptionEnabled(True)

Control display of closed captions. Typically used in conjunction with s7sdk.Button.ClosedCaptionButton.

Parameters:
{Boolean} True: to show closed captions, false to hide closed captions.

See:: s7sdk.Button.CloseCaptionButton

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. .s7videoplayer
{String} property: The CSS property that is being set. i.e. background-color
{String} value: The CSS property value being set. i.e. #FF0000

setItem(item)

Sets the current video displayed by the component. The item must be a of type VideoDesc or MediaSetDesc. An exception is thrown if the item does not reference a parent set, or is not of type VideoDesc or MediaSetDesc. Calling this method will dispatch the AssetEvent.ASSET_CHANGED event.

Parameters:
item: {s7sdk.VideoDesc} The video item to display.

See:: s7sdk.ItemDesc; s7sdk.VideoDesc; s7sdk.event.AssetEvent

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

setVideo(videoName, posterImage)

Parameters:
{String} videoName: an absolute or relative URL to the video content hosted outside of Adobe Dynamic Media.
{String} posterImage: (optional) the URL or path of the poster image to be used.

setVolume(volume)

Sets the current audio volume. Ignored if volume control using JavaScript is not supported (see supportsVolumeControl()).

Parameters:
volume: {float} new volume, from 0 (silent) to 1 (maximum).

stop()

Stops playback.

{Boolean} supportsInline()

Returns true if the video supports inline playback in the current environment. Some platforms, like iPhone prior to iOS 10 and Android prior to 4.0, do not support inline playback.

Returns:: whether the device can support inline video playback

{Boolean} supportsVolumeControl()

Returns true if programmatic volume control is supported in the current environment, false otherwise. Some platforms like iPhone, iPad and Android do not support volume control using JavaScript.

Returns:: whether it is possible to control playback volume with JavaScript

togglePause()

Toggles between playback and pause.

unmute()

Restores the audio volume. Ignored if volume control using JavaScript is not supported (see supportsVolumeControl()).

Namespaces

Classes in s7sdk.video

Class s7sdk.video.SmartCropVideoPlayer