amp-story-360

<script async custom-element="amp-story-360" src="https://cdn.ampproject.org/v0/amp-story-360-0.1.js"></script>

The amp-story-360 component provides a way to embed 360 images and videos in Web Stories.

Usage

Use the amp-story-360 component to render 360 images and video. The component can animate between two points or be explorable via the device's gyroscope sensor. For best results, only use one element per amp-story-page.

Accessibility considerations

Currently, the amp-story-360 component does not provide any controls for mouse or keyboard users.

Media Requirements

The amp-story-360 component renders videos and images in equirectangular projection. This is the default format generated by many 360 cameras and 3D rendering software.

Credit: NASA / JPL / MSSS / Seán Doran.

Dimensions

Use a 2:1 aspect ratio for the best distribution of resolution.

Size

2048 x 1024 (2k) is recommended for images and video.

Configuration

The amp-story-360 component accepts 1 descendant. This descendant must be an amp-img or amp-video.

amp-image

<amp-story-360 layout="fill">
<amp-img layout="fill" src="assets/image360.jpg"></amp-img>
</amp-story-360>

amp-video

<amp-story-360 layout="fill">
<amp-video layout="fill" poster="assets/poster.jpg" autoplay loop>

<source src="assets/video360.mp4" type="video/mp4" />
</amp-video>
</amp-story-360>

Be sure to import the amp-video component.

Defining a initial point of view (PoV)

<amp-story-360 
   layout="fill"
   heading-start="95" pitch-start="-10">
...
</amp-story-360>

PoV to PoV animation

<amp-story-360 
   layout="fill"
   heading-start="95" pitch-start="-10"
   heading-end="-45" pitch-end="-20"
   duration="3s">
...
</amp-story-360>

The duration attribute is required for animation.

Gyroscope

Use the device gyroscope sensor to set the image's orientation.
The component defaults to the heading-end value upon navigating to the page.
If heading-end is not provided, heading-start is used. If neither are provided the heading will default to 0.

Serve the story over https to use this feature.

<amp-story-360 
   layout="fill"
   controls="gyroscope"
   heading-start="95" pitch-start="-10"
   heading-end="-45" pitch-end="-20"
   duration="3s">
...
</amp-story-360>

Activate 360 button

If the device requires user permission to access the device’s gyroscope sensor an "activate 360" button will display.

Animation fallback

If the device does not support gyroscope or the user declines permission, the component will fallback to animating if the animation is defined.

Attributes

Animation

heading-start {float} optional

Specifies the heading (horizontal angle in degrees) at the beginning of an animation.
Centered on 0 (default) with a negative angle looking towards the left, positive angle to the right.

pitch-start {float} optional

Specifies the pitch (vertical angle in degrees) at the beginning of an animation.
Centered on 0 (default) at the horizon, with a negative angle looking downwards, positive angle upwards.

zoom-start {float} optional

Specifies the zoom at the beginning of an animation. The default is 1. This corresponds to a horizontal field of view of 90 degrees. A higher value indicates a narrower field of view.

heading-end {float} optional

Specifies the heading of a complete animation.

pitch-end {float} optional

Specifies the pitch of a complete animation.

zoom-end {float} optional

Specifies the zoom of a complete animation.

duration {string} (required for animation)

Specifies how many seconds (s) or milliseconds (ms) an animation takes to complete.

Controls

controls {"gyroscope"} optional

Specifies using the device’s gyroscope sensor to set orientation. If the device requires permission for the sensor an activate-360 button will display. If the gyroscope sensor is not available, it will default to animating.

Default orientations

These attributes correct rendering of images captured on a tilted axis.

scene-heading {float} optional

Specifies an absolute heading applied as a rotation matrix to the rendered image.

scene-pitch {float} optional

Specifies an absolute pitch applied as a rotation matrix to the rendered image.

scene-roll {float} optional

Specifies an absolute roll applied as a rotation matrix to the rendered image.

Validation

See validation rules in amp-story-360 validator.