amp-google-vrview-image
VR画像を表示します。
プラグインの読み込み
amp-google-vrview-imageを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。
<script async custom-element="amp-google-vrview-image" src="https://cdn.ampproject.org/v0/amp-google-vrview-image-0.1.js"></script>
基本構文と動作
どんな書き方でどんな動きすんのかを。まず簡単なものを。
<amp-google-vrview-image
src="https://storage.googleapis.com/vrview/examples/coral.jpg"
stereo
width="400" height="300" layout=responsive>
</amp-google-vrview-image>
各種プロパティについて
| src | 表示コンテンツへのパスを記述します。 |
|---|---|
| stereo | 指定すると、src属性によって提供されるイメージはステレオイメージ（上記参照）とみなされ、そうでない場合はモノラルイメージとみなされます。 |
| yaw |
ビューアの最初のヨー角。デフォルトは0です。 上下軸まわりの回転の角度の事です |
| yaw-only |
ヨー角方向への動作しかできなくなる。 上下軸まわりにしか回せないよ！ |
注意点など
VR画像を使用するにあたっていくつか注意点があるんすよ
使用する画像の仕様について
- VRビューの画像は、png、jpeg、またはgifとして保存できます。改良された圧縮のためのjpegが推奨されます。
- 互換性とパフォーマンスを最大限にするには、イメージのサイズは2の累乗（2048または4096など）にする必要があります。
- モノ画像は2：1のアスペクト比でなければなりません（例：4096 x 2048）。
- ステレオイメージは、1：1のアスペクト比でなければなりません（例：4096 x 4096）。
使用する動画の仕様について
- VRビューのビデオは、h264でエンコードされたmp4として保存する必要があります。
- モノラルビデオは2：1のアスペクト比でなければなりません。
- ステレオビデオは1：1のアスペクト比でなければなりません。
- 古いデバイスの中には、1080p（1920x1080）を超えるビデオをデコードできないものがあります。最大限の互換性と品質を優先する場合は、1920x1080のモノラル動画と2048x2048以上のステレオ動画の両方を提供することをおすすめします。
サポートされているブラウザやらモバイルのOSについて
- Windows、MacOS、Linux、Android、およびiOS上のChromeとOperaの最新バージョン。
- MacOSとiOSのSafariの最新版。
- Windows、MacOS、Linux上の現代版のFirefox。
- 最新版のIE 11とEdge on Windows。
- iOS 8以上。
- Android 4.4（Kit Kat）以上。
モノラルとステレオの2種類について
使用する画像の枚数が違うようです。
モノラルの場合はパノラマ画像１枚
ステレオの場合は２枚の画像を重ねられたパノラマ画像を使用します。
