AMP

amp-story-360

Description

Embeds 360 images and videos, explorable by gyroscope or animatable between points.

 

Required Scripts

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

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

Stack Overflow로 이동
버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub로 이동하기