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.AudioCaptions
• s7sdk.video.AudioCaptionsMenu
• s7sdk.video.MutableVolume
• s7sdk.video.SmartCropVideoPlayer
• s7sdk.video.Video360Player
• s7sdk.video.VideoPlayer
• s7sdk.video.VideoScrubber
• s7sdk.video.VideoTime

Class s7sdk.video.Video360Player

The Video360Player is a 360-degree video viewing component that displays a MP4 or Adaptive Video Set video served by Adobe. 360-degree videos, also known as immersive videos or spherical videos, are video recordings where a view in every direction is recorded at the same time, shot using an omnidirectional camera or a collection of cameras. 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

The component supports 360 video with aspect ratio of 2:1 only. Spatial sound is not supported. Video360Player is designed to work with with 360 video only; an attempt to play a non-360 video will result in distorted video playback.

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. Panning of 360-video is done with the mouse, swipe gestures on touch device or using arrow keys.

Information about the video and the state of the video playback can be obtained from the various VideoEvent events dispatched by the Video360Player, 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 Video360Player 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 Video360Player should be embedded into the Container component; Container provides an API and support for full screen mode.

The Video360Player 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 Video360Player ignores the value of playback modifier when working with external video. External video can be set using video modifier or setVideo() API method.

The Video360Player component supports 360 video playback on VR headsets (like Oculus Go and Oculus Rift), VR HMD (head-mounted display) mounts (like Google Cardboard) and non-VR enabled devices (like desktop browsers, tablets and mobile phones not connected to VR HMD mounts). No additional configuration is needed to view video content on VR headset. The component automatically detects the presence of VR headset and shows "VR" button on top of video content. Activating this "VR" button switches video rendering to VR mode. The component supports VR rendering only in browsers with WebVR support. vrrender modifier is ignored when running on VR headset. In order to use VR HMD mounts however vrrender modifier must be set to "1" in component's configuration, which forces stereoscopic rendering. On VR headsets and VR HMD mounts point of view change happens in response to headset movement, not other playback control is provided in VR mode. When watching 360 video on non-VR enabled devices, end user can use mouse, touch or keyboard to control video playback and point of view.

Customizing Behavior Using Modifiers

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

Localizable Symbols

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

Example Code
This example demonstrates how to use the Video360Player component in a simple video viewer. In this example a Container object,
a Video360Player object, and a PlayPauseButton object are created. Every time a user clicks the button, the Video360Player 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>Video360Player 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.Video360Player');
        </script>

        <style>
            .s7video360player {
                width:512px;
                height:384px;   
                
            }
            .s7videotoolbar {
                display:block;
                position: absolute; 
                top: 384px;
                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, video360Player, 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", "https://s7d1.scene7.com/is/image/");
		    	params.push("videoserverurl", "https://s7d1.scene7.com/is/content/");
               	params.push("asset", "Viewers/space_station_360-AVS");
				params.push("autoplay", "0");
                // Create the Container component object
                container = new s7sdk.Container(null, params, "s7container");

                // Create Video360Player component object
                video360Player = new s7sdk.video.Video360Player(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 Video360Player capability change events
                video360Player.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 Video360Player changes state
            function onNotifyVideoState(event){
                playPauseButton.setSelected(event.s7event.state.hasCapability(s7sdk.VideoCapabilityState.PLAY));
            }

            // Define an event handler function to update the Video360Player object when the PlayPauseButton is clicked
            function onClickPlayPause(event){ 
                if(!playPauseButton.isSelected()){
                    video360Player.play();
                }else{
                    video360Player.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 Video360Player:

.s7video360player {
    cursor: pointer;
	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);
 }
.s7video360player .s7iconeffect {
	width:120px;
	height:120px;
	-webkit-transform:translateZ(0px);
	background-repeat:no-repeat;
	background-position:center;
 }
.s7video360player .s7iconeffect[state='play'] {
	background-image:url(images/sdk/video360playicon.png);
 }
.s7video360player .s7iconeffect[state='replay'] {
	background-image:url(images/sdk/videoreplayicon.png);
 }
.s7video360player .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;
 }
.s7container .s7trackdeviceorientationbutton {
	position : 'absolute';
	bottom : '90px';
	padding : '12px 6px';
	border : '1px solid #fff';
	background : 'rgba(0,0,0,0.1)';
	color : '#fff';
	font : 'normal 13px sans-serif';
	textAlign : 'center';
	outline : 'none';
	zIndex : '999';
	cursor : 'pointer';
	left : 'calc(50% - 100px)';
	width : '200px';
}

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

Returns:

whether video playback has finished.

Returns:

current video asset

Returns:

the current capabilities of the Video360Player instance.

See:

s7sdk.VideoCapabilityState

Returns:

current playback time

Returns:

video duration

Returns:

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

Returns:

amount of loaded video data

Returns:

{s7sdk.PovDesc} current point of view.

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 IS_modifiers for the poster image to be used.

See:

s7sdk.TrackingManager

Parameters:

{String} classname

The CSS classname to use for this style. i.e. .s7video360player

{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:

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:

{s7sdk.PovDesc} pov

current point of view.

Parameters:

{String} videoName

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

posterImage

Parameters:

volume

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

Parameters:

vrRender

True to enable virtual reality mode, default to false

Returns:

whether the device can support inline video playback

Returns:

whether it is possible to control playback volume with JavaScript