amp-story-360

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

amp-story-360 组件提供了一种在 Web 故事中嵌入 360 度图像和视频的方法。

用法

使用 amp-story-360 组件渲染 360 度图像和视频。该组件可以在两点之间进行动画处理，或者通过设备的陀螺仪传感器进行探索。为了获得最佳效果，每个 amp-story-page 仅使用一个元素。

辅助功能注意事项

目前，amp-story-360 组件不为鼠标或键盘用户提供任何控件。

媒体要求

amp-story-360 组件以等距柱状投影渲染视频和图像。这是许多 360 度相机和 3D 渲染软件生成的默认格式。

鸣谢：NASA / JPL / MSSS / Seán Doran。

尺寸

使用 2:1 的纵横比以获得最佳分辨率分布。

大小

建议图像和视频使用 2048 x 1024 (2k)。

配置

amp-story-360 组件接受 1 个后代。此后代必须是 amp-img 或 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>

请务必导入 amp-video 组件。

定义初始视点 (PoV)

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

PoV 到 PoV 的动画

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

duration 属性是动画所必需的。

陀螺仪

使用设备陀螺仪传感器设置图像的方向。
在导航到页面时，该组件默认使用 heading-end 值。
如果未提供 heading-end，则使用 heading-start。如果两者都未提供，则标题将默认为 0。

通过 https 提供故事以使用此功能。

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

激活 360 按钮

如果设备需要用户权限才能访问设备的陀螺仪传感器，则会显示“激活 360”按钮。

动画回退

如果设备不支持陀螺仪或用户拒绝权限，如果定义了动画，则组件将回退到动画。

属性

动画

heading-start {float} 可选

指定动画开始时的航向（以度为单位的水平角度）。
以 0 为中心（默认），负角度朝左看，正角度朝右看。

pitch-start {float} 可选

指定动画开始时的倾斜度（以度为单位的垂直角度）。
以水平线的 0 为中心（默认），负角度向下看，正角度向上看。

zoom-start {float} 可选

指定动画开始时的缩放。默认值为 1。这对应于 90 度的水平视野。值越高表示视野越窄。

heading-end {float} 可选

指定完整动画的航向。

pitch-end {float} 可选

指定完整动画的倾斜度。

zoom-end {float} 可选

指定完整动画的缩放。

duration {string}（动画必需）

指定动画完成所需的时间（秒（s）或毫秒（ms））。

控件

controls {"gyroscope"} 可选

指定使用设备的陀螺仪传感器来设置方向。如果设备需要传感器权限，则会显示 activate-360 按钮。如果陀螺仪传感器不可用，则将默认为动画。

默认方向

这些属性可以校正捕获在倾斜轴上的图像的渲染。

scene-heading {float} 可选

指定作为旋转矩阵应用于渲染图像的绝对航向。

scene-pitch {float} 可选

指定作为旋转矩阵应用于渲染图像的绝对倾斜度。

scene-roll {float} 可选

指定作为旋转矩阵应用于渲染图像的绝对滚动。

验证

请参阅 amp-story-360 验证器中的验证规则。