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 驗證器中的驗證規則。