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種類について
使用する画像の枚数が違うようです。
モノラルの場合はパノラマ画像1枚
ステレオの場合は2枚の画像を重ねられたパノラマ画像を使用します。