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