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 元件提供在 網頁故事 中嵌入 360 度圖片和影片的方法。

用法

使用 amp-story-360 元件來呈現 360 度圖片和影片。此元件可以在兩點之間製作動畫，或透過裝置的陀螺儀感應器進行探索。為了獲得最佳效果，每個 amp-story-page 頁面僅使用一個元素。

無障礙考量

目前，amp-story-360 元件未提供滑鼠或鍵盤使用者的任何控制項。

媒體需求

amp-story-360 元件以 等距柱狀投影 方式呈現影片和圖片。這是許多 360 度相機和 3D 渲染軟體產生的預設格式。

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