Namespaces

• s7sdk
• s7sdk.common
• s7sdk.event
• s7sdk.favorites
• s7sdk.image
• s7sdk.info
• s7sdk.model
• s7sdk.model.SelectorModel
• s7sdk.search
• s7sdk.set
• s7sdk.share
• s7sdk.Util
• s7sdk.video

Classes in s7sdk.video

• s7sdk.video.MutableVolume
• s7sdk.video.SmartCropVideoPlayer
• s7sdk.video.Video360Player
• s7sdk.video.VideoPlayer
• s7sdk.video.VideoScrubber
• s7sdk.video.VideoTime

Class s7sdk.video.VideoPlayer

The VideoPlayer is a video viewing component that displays a MP4 or Adaptive Video Set video served by Adobe Scene7. Depending on system capabilities and on the value of the playback modifier, it uses either hls-video or the native HTML video element. HTTP streaming video is used whenever the user's device supports it, with fall back to progressive video.

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 VideoPlayer, 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 VideoPlayer 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 VideoPlayer should be embedded into the Container component; Container provides an API and support for full screen mode.

The VideoPlayer component supports playback of video content hosted outside of Scene7 or Dynamic Media. If the path portion of URL to such external video ends with .m3u8 then the component automatically selects HLS playback type, otherwise progressive playback will be used. Effectively VideoPlayer 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 VideoPlayer default behavior. They are passed to the component by the ParameterManager instance specified in the constructor.

The following modifiers are supported:

Defining the Appearance using CSS

You can define the appearance of the VideoPlayer component using CSS rules. All HTML5 Viewer SDK components use class selectors for styling. You can style the body of the VideoPlayer component by using the .s7videoplayer class selector. The styles that are associated with this class selector are applied to all instances of the VideoPlayer component. You can style particular instances by prefixing the class rule with the instance #id. For example, styling rules for #myComp.s7videoplayer are applied only to the particular VideoPlayer 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 .s7videoplayer .s7iconeffect. For more information on component styling see the HTML5 Viewer SDK User Guide and the default styles section.

Localizable Symbols

VideoPlayer 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 HTML5 Viewers SDK User Guide.

Closed Caption Support

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

Example Code
This example demonstrates how to use the VideoPlayer component in a simple video viewer. In this example a Container object,
a VideoPlayer object, and a 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.
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 Scene7 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>VideoPlayer 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>
            .s7videoplayer {
                width:512px;
                height:288px;   
                
            }
            .s7videotoolbar {
                display:block;
                position: absolute; 
                top: 288px;
                width: 512px;
                height: 32px;
                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, container, videoPlayer, s7videotoolbar, 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("asset", "Scene7SharedAssets/Glacier_Climber_640x360");
                params.push("videoserverurl","http://s7d1.scene7.com/is/content/");
                // Create the Container component object
                container = new s7sdk.Container(null, params, "s7container");

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

                // Create VideoPlayer 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 VideoPlayer capability change events
                videoPlayer.addEventListener(s7sdk.event.CapabilityStateEvent.NOTF_VIDEO_CAPABILITY_STATE, onNotifyVideoState, false);
                playPauseButton.setSelected(true);
            }

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

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

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

.s7videoplayer {
	position:absolute;
	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);
 }
.s7videoplayer .s7iconeffect {
	width:120px;
	height:120px;
	-webkit-transform:translateZ(0px);
	background-repeat:no-repeat;
	background-position:center;
 }
.s7videoplayer .s7iconeffect[state='play'] {
	background-image:url(images/sdk/videoplayicon.png);
 }
.s7videoplayer .s7iconeffect[state='replay'] {
	background-image:url(images/sdk/videoreplayicon.png);
 }
.s7videoplayer .s7caption {
	font-family:sans-serif;
	font-size:large;
	color:#ffffff;
	-webkit-transform:translateZ(0px);
	margin:0 auto;
 }
.s7videoplayer .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;	
 }

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

s7sdk.event.InteractiveDataEvent

Returns:

whether video playback has finished.

Returns:

current video asset

Returns:

the current capabilities of the VideoPlayer instance.

See:

s7sdk.VideoCapabilityState

Returns:

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

See:

s7sdk.Button.CloseCaptionButton

Returns:

current playback time

Returns:

video duration

Returns:

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

Returns:

{Array} Array of JSON objects specifying the swatches asset and action for each interactive data section.

See:

s7sdk.common.WebVtt

s7sdk.set.InteractiveSwatches

Returns:

{Object} JSON objects with name:value pairs.

See:

s7sdk.common.WebVtt

s7sdk.set.InteractiveSwatches

Returns:

amount of loaded video data

Returns:

{s7sdk.common.WebVtt} WebVtt object containing parsed navigation cues for use with the chapter navigation feature in conjunction with VideoScrubber.

See:

s7sdk.common.WebVtt

s7sdk.video.VideoScrubber#setNavigation

Returns:

current volume

Returns:

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

Returns:

{Boolean} True if in muted state, false otherwise

Parameters:

{Number} w

The width of the component, in pixels.

{Number} h

The height of the component, in pixels. .

Parameters:

{float} time

the time to seek to in the video, in milliseconds

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

Parameters:

{String} caption

the caption file to be used.

See:

s7sdk.common.Button.ClosedCaptionButton

Parameters:

{Boolean} True

to show closed captions, false to hide closed captions.

See:

s7sdk.Button.CloseCaptionButton

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

Parameters:

{String} interactiveData

the interactive data file to be used.

Parameters:

item

{s7sdk.VideoDesc} The video item to display.

See:

s7sdk.ItemDesc

s7sdk.VideoDesc

s7sdk.event.AssetEvent

Parameters:

{Object} modObj

A simple JSON object with name:value pairs of valid modifiers for a particular component

Parameters:

{String} navigation

the navigation file to be used.

See:

s7sdk.event.VideoEvent.NOTF_NAVIGATION

Parameters:

{String} videoName

an absolute or relative URL to the video content hosted outside of Scene7 or Dynamic Media.

{String} posterImage

(optional) the URL or path of the poster image to be used.

Parameters:

volume

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

Returns:

whether the device can support inline video playback

Returns:

whether it is possible to control playback volume with JavaScript

Parameters:

{Number} visible

Number of visible interactive data elements