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 Stories 中嵌入 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 验证器中的验证规则。