Google VR Viewで360度動画を自前サイトから配信

Google VR Viewで360度動画を自前サイトから配信

=Google VR View、Valiant360へのブラウザの対応状況=
(2017.06.12作成, 17.11.06更新)
 
静止画にホットスポット/ openイベントを追加してリンクするよう設定
動画は JavaScript方式よりもシークバー表示可能な iframe方式を推奨
 
Insta360 Airを用いて、Androidスマホ(GALAXY Note Edge SC-01G)で 360度全天球動画を撮影して(「Insta360 Airで360度全天球の静止画と動画を撮影」を参照)、動画共有サービスへ投稿しウェブ埋め込みで提示していたが(「360度動画に対応する動画共有サービス..」を参照)、自前のWebサイトで表示させる事を可能とするツールが存在する。
Google VR ViewValiant360は、360度コンテンツを直接ウェブページに埋め込んで 360度全方位で表示させることが出来るウェブ構築用補助ツール(プレイヤー/ ビューアー)。従って、動画共有サービスに投稿しなくとも、自前のサイトで 360度ビューが出来るようになるのだ。
そこで今回、Insta360 Airで撮影した 360度全天球動画(960P、8Mbps)と静止画(3008x1504)を素材として、これらツールを使用してレンタルサーバー Xserverから配信した。そして、各種ブラウザの対応状況を検討したところ、Google VR Viewは Valiant360よりも優秀だったが、MS Edgeは上手く作動せず、IExplorer11は動画では未対応だった。

<参考> WebVRとは、Webブラウザ上でVR(バーチャル・リアリティ)を可能とする技術。現在、ブラウザでVRコンテンツを扱うための WebVR APIには、HTMLのタグを書く感覚で作成するフレームワーク A-Frameと 多種多様なツール/ライブラリ群がエコシステムを形成するフレームワーク ReactVRが有名。しかし、これらで VRコンテンツを構築するには、Google VR ViewValiant360と比べて専門的なWebフロントエンド技術の知識が求められるので扱うのが難しく、対応デバイス・ブラウザも現時点では制限される(例えば、A-Frameで配信した 自前のデモ を参照)。

=コメント=
 
両ツールは動画・静止画を本ページに直接埋め込む事は可能だが、パワー不足の端末機器は動画・静止画のプレビューを複数個同時に読み込むとクラッシュし易いので、今回はインラインフレームにて先ず「スタートのダミー画像です」ページを表示するように設定した。
A) Google VR View
   
Google VR Viewを使えば、自前のサイト(今回はレンタルサーバー Xserver)から 360度コンテンツのカスタマイズ配信が可能(本家サイト)。
対応フォーマットは、最も標準的な Equirectangular(エクイレクタングラー、正距円筒図法、Sphereスフィア)形式(パノラマ投影法は、こちらを参照)に対応してさえいれば、どんなカメラで撮影されたコンテンツでも表示可能と云う。
こちらの [Clone or download▼]ボタンから入手、今回は v2.0.1を使用した。
=設定方法=
(1) ダウンロードした vrview-master.zipを解凍すると、「vrview-master」というフォルダとなる。この「vrview-master」フォルダをそのまま、プロジェクトにコピーする。
   
 
 
vrview-masterフォルダ内の buildフォルダ内にある vrview.jsファイルが Google VR Viewの本体だ。
 
   
(2) ループ再生出来るようにカスタマイズ
   
 説明
この本家サイトの「vrview-master」は、ループ再生しない。筆者の力量ではページの構文を工夫する方策を見出せない。そこで、
記事「Google VRの「VR View」で...表示させる」の動画ページ(こちら)をFirefoxで開き、[ページ保存]を実行して取得した JavaScriptファイル(vrview.js、analytics.js、embed.js、three.js)をコピーして置換した物を使用した。
 
⇒ 必要ならこちらの「vrview-master.zip 」をダウンロード
<中間成績:JavaScript方式での成績>
360度ビューで再生可能なブラウザは、自動的にループ再生も可能だ。
JavaScriptを使って実装
   
(1) 記事「Google VRの「VR View」で...表示させる」に準じて、
   
記事「Google VRの「VR View」で...表示させる」より引用 展開
原文を一部省略して引用しました。
デモ画像・動画の読み込みは、エンジンを再構築していない為エラーとなるので削除。

Google VRの「VR View」で360度対応の画像や動画をWebサイトに埋め込んで表示させる

はじめに – Web VRについて

略...

Google VRの「VR View」

略...
実際に、VR Viewを使ってVRコンテンツを埋め込む方法を紹介します。詳細は以下の公式サイトのドキュメントをご参照ください。

VR Viewを使用する環境を準備する

まずは、VR Viewを使用する環境の準備について説明します。

VR Viewをダウンロード

まずVR Viewをダウンロードする必要があります。以下のGitHubのページからVR Viewをダウンロードしてください。アクセスしたGitHubのページの右上にClone or downloadと書かれている「緑色のボタン」が表示されていますので、そちらから「Download ZIP」をクリックしてダウンロードしてください。「vrview-master.zip」というzipファイルがダウンロードされます。

zipファイルを解凍し、プロジェクトフォルダにコピー

ダウンロードした「vrview-master.zip」を解凍すると、「vrview-master」というフォルダとなります。この「vrview-master」フォルダをそのまま、プロジェクトフォルダにコピーまたは移動させてください

ファイルの準備

プロジェクトフォルダ内に、VRコンテンツを埋め込むためのhtmlファイル(vr.html)を作成し、実際に表示するVRコンテンツ(vr-image.jpgvr-video.mp4)を用意します。

例えば、フォルダ構成を以下のようにします。(vrview-master以下のファイルやフォルダについては、実際に使用するもの以外は便宜上省略しておきます。)

vr-project
 ├─vrview-master
 │  ├─build
 │  │  └─vrview.min.js
 │  └─index.html
 ├─vr.html
 ├─vr-image.jpg
 └─vr-video.mp4

これで準備は完了です。

VR Viewは「iframeで実装する方法」と、「JavaScriptで実装する方法」があります。それぞれ説明していきます。

iframeでVRコンテンツをWebページに埋め込む

iframeを使ってVRコンテンツを埋め込む方法は、プロジェクトフォルダに作成したvr.htmlファイル内の任意の箇所に以下の一文を埋め込むだけで完了です。

<iframe width="100%" height="400" src="./vrview-master/index.html?
image=../vr_iamge.jpg"></iframe>

「vrview-master」フォルダに用意されたindex.htmlのパラメータ(imageまたはvideo)に対して、「表示したいVRコンテンツのパス」を指定します。(iframeのサイズは適宜指定します。)

結果は以下の通りです(通信状況により画像の読み込みに時間がかかる場合があります)。

・・・「360度静止画」の読み込みはエラーとなるので削除!

JavaScriptでVRコンテンツをWebページに埋め込む

JavaScriptを使って実装する場合は、若干手順が増えます。iframeのところでは画像を使ったので、こちらは動画を使って実装方法を説明していきます。

vrview.jsの読み込み

「vrview-master」フォルダ内の「build」フォルダ内にある「vrview.js(vrview.min.js)」がVR Viewの本体となっているので、この「vrview.js(vrview.min.js)」vr.htmlファイルにscriptタグを使って読み込みます。

<script src="./vrview-master/build/vrview.min.js"></script>

CDN 版も用意されています。CDN版を使用する場合は、以下をvr.htmlファイルに記述します。

<script src="https://storage.googleapis.com/vrview/2.0/build/
vrview.min.js"></script>

HTMLの実装

プロジェクトフォルダに作成したvr.htmlファイル内の任意の箇所にVRコンテンツを表示するための要素を記述します。id名は任意です。

<div id="vrview"></div>

JavaScriptの実装

プロジェクトフォルダに作成したvr.htmlファイル内に以下を記述します。

<script>
window.addEventListener('load', onVrViewLoad);
function onVrViewLoad() {
  var vrView = new VRView.Player('#vrview', {
    video: './vr-video.mp4'
  });
}
</script>

コンテンツがロードされた際にonVrViewLoad関数が呼び出されるようになっています。onVrViewLoad関数内のVRView.Playerオブジェクトのインスタンスを作成する際に、第一引数に「VRコンテンツを表示する要素のid名」、第二引数に「各種設定内容(使用するVRコンテンツのパスなど)」を渡すようにします。

結果は以下の通りです。動画のVRコンテンツを埋め込んだので、当たり前ですが、VRコンテンツには動きがあります。これはこれで面白いですね。

・・・「360度動画」の読み込みはエラーとなるので削除!

VR Viewのオプション

VR Viewにはいくつかのオプションも用意されています。オプションについての詳細は以下を参照してください。

iframeで実装する場合は、「vrview-master」内のindex.htmlファイルにつけるパラメーター、JavaScriptで実装する場合は、VRView.Playerオブジェクトの第二引数に渡すパラメーターを使って指定します。

使用する画像や動画について

VR Viewで使用する画像や動画については、以下のような仕様のものを使うことを推奨されています。

推奨する「画像」の仕様

  • png、jpeg、gifで保存された画像。特に圧縮に対応しているjpegを推奨
  • 互換性やパフォーマンスを最大限に保つために画像サイズは2のべき乗(2,048や4,096など)とすることを推奨
  • モノラル画像 => アスペクト比2:1を推奨(4,096 × 2,048など)
  • ステレオ画像 => アスペクト比を1:1を推奨(4,096 × 4,096)

推奨する「動画」の仕様

  • h264でエンコードされたmp4sで保存された動画
  • モノラル動画 => アスペクト比2:1を推奨
  • ステレオ動画 => アスペクト比1:1を推奨
  • 古いデバイスは1,080p(1,920 × 1,080)より大きな動画をデコードできないため、最大限の互換性と品質を優先する場合は、1,920 × 1,080のモノラル動画と2,048 × 2,048のステレオ動画の両方を提供することを推奨


以下、略...

 

   
(2) 記事「再生ボタンや一時停止ボタンを追加...」と合作して、以下の如く記述して「タップしてスタート方式」とした。
   
=今回実装したJavaScriptの記述内容=
<script src="./vrview-master/build/vrview.min.js"></script>  //本体にパスを通す

<div id="vrview1"></div>

<script>
window.addEventListener('load', onVrViewLoad);
var vrView = null; // 不用な構文
var state = null;
 // 不用な構文
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview1', {
video: './insta360_iin.mp4',  //表示する動画。相対パスでも可能。
width: '540',
height: '304',
preview: './start_ga.jpg' // コンテンツがロードされる迄に表示(一瞬なので無意味)
});
vrView.on('ready', function () {
// PCで自動再生されないようにする
vrView.pause();
state = 'pause';
});
vrView.on('click', function () {
// タップするたびに再生・一時停止を繰り返す
if (state === 'pause') {
vrView.play();
state = 'play';
} else {
vrView.pause();
state = 'pause';
}
});
}
</script>
=注意=
赤色部分は、Google VRの「VR View」で...」からのカスタマイズ
青色部分は、「再生ボタンや一時停止ボタンを追加...」からの追加!!
   
iPad miniのSafariの場合は、自動再生では何故か再生出来ないが、「タップしてスタート方式」にすると再生可能となる。しかし、一時停止出来ない ?(゜_。)?
なお、動画共有サービスへ投稿する場合のように 必ずしも 360 Video Metadata Toolで動画にメタデータを挿入する必要はない(こちらの実験を参照)。
=提示=
A-1) 動画をGoogle VR Viewの JavaScript方式で配信
IE, Edgeは 未対応
   
再生方法:タップしてスタートして下さい。タップするたびに再生/ 一時停止を繰り返します(残念ながら iframe方式でないとシークバーを表示させられない)。
   
   
PCで自動再生は こちら
 
=ブラウザの対応状況= 
1) Windowsブラウザ (Windows10、タッチパネル液晶付きCF-AX2)
IExplorer11は、再生すら出来ない。
MS Edge40は360度ビュー形式で再生するのだが、ナッ何んと!マウスでのドラッグ操作に反応しない(視点を変更させる操作が出来ない)
┓(´_`)┏
・Firefox53, Opera44, Chrome58は、360度ビュー可能だが、指でのドラッグ操作に反応しない
2) Macブラウザ (MacOSX10.12.6、Mac mini Late 2014)
・Safari11.0, Firefox55, Opera47, Chrome61は、問題なく360度ビュー可能
3) Ubuntuブラウザ (Ubuntu 16.04 LTS 、EGGマシン)
・Firefox54, Chromium62, Midori0.5.11は、360度ビュー可能。
・Opera45(HTML5ビデオMP4に未対応)は、再生すら出来ない。

4) Androidブラウザ(Android 6.0.1、GALAXY Note Edge SC-01G)
・標準ブラウザ4.0, Opera42, Chrome58は、360度ビュー可能。本体を傾けると視点が同じ方向に追従して移動する事も可能だ
Firefox55は、映像を描画出来ない(PCサイトモードでも
ダメ)
・Edge1.0.0は、360度ビュー形式で再生するが ドラッグ操作に反応しない
カードボードモードに変更して VRゴーグルで 3D視聴が出来る機能を搭載
Opera, Chromeは、問題なく 360度全方向に奥行きのある仮想現実感(バーチャルリアリティ)が楽しめる。しかし、
・ 標準ブラウザは、何故か?カードボードモードに変更すると再生が停止して静止時点の 360度写真になってしまう
┓(´_`)┏
5) iOSブラウザ(iOS 10.3.3、iPad mini4)
・Safari10.0, Chrome60は、360度ビューも視点の追従移動も可能だが、一時停止出来ない
Puffin5.2.0は、再生すら出来ない
   
 
Androidスマホは、カードボードモードに変更して VRゴーグルで 3D視聴が可能
 
 
安価な VRゴーグルで、ジャイロ機能対応スマートフォンを液晶ディスプレイとして、360度全方向に奥行きのある仮想現実感(バーチャルリアリティ)が楽しめる。上下左右へと見た方向へ連動して、視界の映像が展開しているかのような臨場感が味わえる。
なお、アプリCardboardがインストールされていなくても VRビュー可能だ。
A-2) 静止画をGoogle VR Viewの JavaScript方式で配信(ホットスポットリンク付き)
   
video: '...mp4' を image: '...jpg' に変更して、表示する静止画のパスを通す。
360度静止画でのカスタマイズについては、下の記事に詳しく解説されている。
   
記事「Google VR Viewで360°コンテンツを..埋め込む」より引用 展開
原文をそのまま引用した

Google VR Viewで360°コンテンツをサイトに埋め込む

Google VR Viewで360°コンテンツをサイトに埋め込む

こんにちは、FF10以来久しぶりにFF新作を買ったムラタです。
発売される前も後も色々辛口な評価が目立ったFF15ですが、やってみると腐ってもFFですね、普通に楽しくてどっぷりはまってしまってます。

さて、今回は360°の写真や動画をwebサイトに取り込んでコンテンツとして活用する事例をご紹介したいと思います。

前回の全天球撮影についての記事もあわせてご覧ください。

全天球撮影を始めよう

 

Google VR View

サイト内に360°コンテンツを埋め込むにあたって、普通の写真のようにimgタグで張り付けただけでは当然360°グリグリ動かすような処理にはなりません。

01

このように何だか引き伸ばされたような画像が張り付けられるだけです。

360°コンテンツとしてサイトに埋め込むにはWebGLと呼ばれるweb上で3次元グラフィックス(3Dコンテンツ)を表示させるための技術を用いる必要があります。

webGLを実装するにあたって「three.js」のような構築をサポートしてくれるライブラリも存在しますが、自分のようなちょっとjavascriptscriptをかじった程度のポンコツが実装しようとするにはまだまだハードルが高すぎるのが現実です。

そこで助けてくれるのが「Google VR View」です。
いつものGoogle大先生です。

このGoogle VR Viewを使うことで数行のコードを追加するだけで簡単にサイト内に360°コンテンツを実装することができます。

対応ブラウザ

当然どのブラウザでも実装可能というわけではないので要注意です。

  • 最新VerのChromeとOpera(Windows、macOS、Linux、Android、iOS)
  • 最新VerのSafari(macOS、iOS)
  • 最新VerのFirefox(Windows、macOS、Linux)
  • 最新VerのIE11とEdge(Widnows)

iOSは8以上、Androidは4.4(Kit Kat)以上であればなにも問題なさそうです。

サポートフォーマット

360°画像と動画をサポートしており、それぞれモノスコープとステレオスコープにも対応しています。

モノ」と「ステレオ」についてですが、
モノは単一の360°写真や動画を閲覧するもので、ステレオは2つの写真や動画を並べて表示することでGoogleCardBoardなどのヘッドセットで閲覧すると立体視によるVRが可能になります。

画像

360°画像のフォーマット

  • png、jpg、gifのいずれか。できればjpgが望ましい。
  • サイズ比はモノの場合は2:1(例:2048×1024)で、ステレオの場合は1:1(例:4096×4096)推奨。

360°動画のフォーマット

  • 動画形式はh264エンコードしたmp4形式。
  • アスペクト比は画像と同じくモノは2:1、ステレオは1:1推奨。
  • 古いデバイスの中には1080p(1920×1080)を超える動画をデコードできないものがあるので、最大限の互換性と品質を優先する場合は、1920×1080のモノ動画と2048×2048以上のステレオ動画の両方を提供することをお勧めする。

360°コンテンツの用意

今回撮影については詳しく触れませんが、Googleが紹介している撮影するためのデバイスは下記の2つです。

Cardboard Camera

Googleが提供する360°写真を撮影・鑑賞できるアプリになります。
ガイドに沿ってぐるっと一周撮るだけで自動で360°写真を生成してくれるのでスマホさえあれば今すぐにでも始められるのが嬉しいですね。

Richo Theta

はい、いつものやつです。パノラマ撮影専用カメラの中では比較的安価で簡単手軽に360°撮影が可能になるアイテムです。
ちなみに最近「Theta S」より1万円くらい安くなった廉価版の「Theta SC」も出ました。

実装

それでは実際にサイトに埋め込んでいきましょう。

iframeで埋め込む

ただ埋め込むだけであれば非常に簡単です。
下記のiframeのコードを埋め込むだけでできてしまいます。

googleが提供しているファイルに対してパラメータで360°コンテンツのパスを指定するだけなので、こちらは写真もしくは動画を用意するだけで済みます。
写真(動画)パスのパラメーター以外にも様々なパラメーターを指定することができますが、それは後程説明します。

この方法だと手っ取り早くて楽ですが、この場合サーバーがクロスドメインを許可している場合に限ります。
クロスドメイン制約は簡単に言えば今現在見ているページのドメインと異なるドメインからのAjax通信を制限するというものです。

これを回避するにはhtaccessファイルに「Access Control Allow Origin」の設定を行う必要があります。

これでどのドメインからもAjax通信を許可できますが、さすがにどんなサイトからでもっていうのは不安ですよね。
そういう時は特定のドメインだけ指定してあげましょう。

これで「http://xxxx.jp」のドメインのみ通信を許可するようになりました。

自身のサーバーで出力する場合

htaccessが触れるサーバーじゃない、もしくは知識もないし下手にファイルを触りたくないという場合は自分のサーバーに必要なファイルをアップすることでも出力可能です。

まずGoogleのVR View Githubよりzipファイルをダウンロードしてきます。

01

zipファイルのダウンロードが完了したら展開して、中身のファイルをすべて自分のサーバーの適当なディレクトリにアップします。
また、VR Viewを出力させるためのhtmlファイルも別途用意します。

例として下記のファイル構成とします。

02

あとは先ほどと一緒です。
「vrview/index.html」内に「source/index.html」をiframeで読み込んで画像(動画)をパラメーターで渡します。

ちなみに画像のパスは相対ではなく絶対パスで渡してください。

javascriptで出力

iframeではなくjavascriptで出力させる場合は、まず「source/build」より「vrview.js」を読み込んできます。

次にVR Viewを出力させるための囲みを用意します。

そして、こうです

結果は次の通りです。

どうでしょうか、PCならクリックしてドラッグすることで視点を360°ぐりぐり動かせると思います。
スマホの場合は画面をスワイプするかスマホ本体を傾けるだけで連動して画面の視点も変更されるはずです。

パラメーター

VR Viewには以下のパラメーターが用意されています。

  • video
    360°動画ファイルへのパスを指定する。「image」と「video」のどちらかは必ず指定する必要があります。
  • image
    360°画像ファイルへのパスを指定する。
  • width
    出力されるiframeの幅を指定します。
  • height
    出力されるiframeの高さを指定します。
  • preview
    360°画像(動画)が読み込まれるまで表示させる画像ファイルのパスを指定します。
  • is_stereo
    読み込む360°画像(動画)をステレオモードで読み込むかどうかを指定します。
  • is_debug
    trueを指定した場合、デバッグモードとなり画面左下にFPSメーターなどの表示が出力される。
    03
  • is_vr_off
    trueを指定した場合、画面からVRモードボタンを非表示にします。(スマホのみ)
    04
  • is_autopan_off
    trueを指定した場合、360°画像(動画)が読み込まれた際の左から右へカメラをパンする動きを停止する。(PCのみ)
    ※違う意味合いがあるかもしれないですが未確認です。
  • default_yaw
    デフォルトのカメラの向きを数値で指定します。
    05
  • is_yaw_only
    trueを指定した場合、ロールとピッチを防止します。ステレオモードのみ有効。とGoogleのガイドにはありますが、ちょっとよく分からなかったです。
    とりあえずスマホの際にカメラの向きが横方向にだけ固定されていました。(上や下を向けない)

VR Viewイベント

基本的な使い方は以上です、ここからはさらにプラスアルファの処理を行っていきましょう。

VR Viewは下記の4種類のイベントがあります。

  • ready
    VR Viewの出力の準備ができたタイミング。
  • error
    360°コンテンツのロードに失敗したタイミング。
  • click
    クリックしたタイミング(スマホではタップ、VRモードでは注視した場合)
  • modechange
    VRモードもしくはフルスクリーンモードに移行したタイミング。

例えばこのような感じ

ホットスポット

VR Viewでは「ホットスポット」と呼ばれる円形状の領域を生成して任意の位置に配置することができます。

ホットスポットはクリックやタップすることができ、VRモードでは注視した状態で任意の場所をタップすることでアクティブになります。

またホットスポットは追加する際に、サイズや不透明度、位置やIDなどを指定することができます。

  • pitch
    ホットスポットの高さ位置を指定します。
    06
  • yaw
    ホットスポットの横位置を指定します。
    07
  • redius
    ホットスポットの半径サイズを指定します。
    08
  • distance
    カメラからホットスポットまでの距離を指定します。
    09

この辺の設定は都度画面で確認しないと全く分からないので調整が面倒ですが、仕方ないですね・・・

これらのパラメータをまとめて書くとこのようになります。

これでホットスポットの設置は完了です。
次はこのホットスポットにクリックイベントを設定してみましょう。

まずVR Viewイベントにクリックイベントを登録します。
先ほどの「ready」イベントの下に「click」を追加します。

仮に「spot1」というID名のホットスポットをクリックした際にアラートを表示させるには下記のようになります。

いかがでしょうか?
ちなみにホットスポットは1つだけでなく複数個設置もできます。

複数のホットスポットと360°写真を組み合わせることで簡易的なオリジナルのGoogleストリートビューを作り出すことも可能です。

最後に

いかがだったでしょうか。
今まではパノラマ撮影しても個人的に楽しむだけでしたが、今後はwebサイトのコンテンツとしての可能性も出てきたのではないでしょうか。

それではまた新しいVRネタがあればお会いしましょう。

   
追記A(2017.07.15)
今回、
複数のホットスポットを設置し、そのイベントに「open」も追加して隣部屋のページへリンクするように設定した。
   
=今回実装したJavaScriptの記述内容=
<script src="../vrview-master/build/vrview.min.js"></script> //本体にパスを通す

<div id="vrview"></div>

<script>
var vrView;
window.addEventListener('load', onVrViewLoad)
function onVrViewLoad(){
vrView = new VRView.Player('#vrview', {
image: './uketuke.jpg',  //表示する静止画のパス。相対パスでも可能。
width: '540' , // 数値なら '  ' 無しでも可能だが、 '100%'でないと通じない。
height: '304' ,
default_yaw: 200  //デフォルトのカメラの横方法の向きを数値(目標+20)で指定
});
vrView.on('ready', onVRViewReady);
vrView.on('click', onVRViewClick);
}

//今回は、2ケ所のホットスポットとそのイベント(アラートとオープン)の設定
function onVRViewReady(e){
vrView.addHotspot('spot1', {
pitch: 0, // 上方向の位置。-90,90の範囲で指定
yaw: 50, // 横方向の位置。-180,180の範囲で指定
radius: 0.20, // 円の半径
distance: 1 // カメラからの距離
});
vrView.addHotspot('spot2', {
pitch: 0,
yaw: -140,
radius: 0.25,
distance: 1
});
}

function onVRViewClick(e){
if(e.id == 'spot1'){
alert("「待合室」がクリックされました");  // クリックした際にアラートを表示させる
open("./matiai_vrview.html",target="_self"); // リンク元を同じページに表示させる
}
if(e.id == 'spot2'){
alert("「診察室」がクリックされました");
open("./sinsatu_vrview.html",target="_self");
}
}
</script>

=コメント=
(1) 赤色部分は、上の記事からのカスタマイズ
(2) width: 540 は 数値なら可能だが、%は '100%'でないと通用しない。
(3) default_yawの数値は、読み込まれた際に左から右へカメラがパンする為、目標値 +20位に設定する。
(4) ホットスポットにリンクイベントの設定を試行錯誤したところ、リンクイベントは openで正解?!(他に見本文献は見当たらない) \(^o^)/
(5) ホットスポットは、初期設定では透過度が低いので邪魔になる。そこで、
vrview-master/buildの「embed.js」ファイルをカスタマイズ: MAX_INNER_OPACITY = 0.8→ 0.3、MAX_OUTER_OPACITY = 0.5→ 0.1へ変更(こちらの記事を参照)。
   
Edgeは StandAloneではドラッグ不可
 
   
スタンドアロンは こちら、<試験>動画を開くは こちら
   
<成績>
(1) ホットスポットに openイベントでシーン切り替えが可能となった \(^o^)/
(2) カードボードモードでは使い難い ┓(´_`)┏
カードボードモードでは、注視した状態で任意の場所をタップすることでアクティブになる仕様だ。又、次シーン(ページ)への切り替えでカードボードモードは解除されてしまうので、VRゴーグルでは連続的に鑑賞出来ない・・・残念だ!
追記B(2017.07.15)
    動画をGoogle VR Viewの iframe方式で配信
   
プレイヤーに動画のコントロール機能を埋め込みたい」のサンプルページで [Clone or download]ボタンから ZIPファイルをダウンロード(turbgraphics200さん!?提供)。
取得した google_vr_for_web_test-master.zipを解凍して、
google_vr_for_web_test-master\docs内の [vrview]フォルダの名称を「vrview-master02」フォルダにリネームして使用。
   
   
*シークバーは、..nouisliderというライブラリを使用しています、との事だ。
そのままでは自動的にループ再生しないので、embed.jsファイルをカスタマイズ
   
 説明
embed.jsファイルの 9558行目をカスタマイズ:
// this.video.setAttribute('loop', true); ★ をthis.video.setAttribute("loop",!0) へ変更した。
   
<中間成績>JavaScript方式ではトラブルのあった Android6.0.1-Chrome 58も含めて、360度ビューで再生可能なブラウザはいずれも問題なく自動的にループ再生可能。
   
=今回実装したiframe方式の記述内容=
 
<body>
<iframe allowfullscreen="true" scrolling="no" width="540" height="304" src="./vrview-master02/index.html?
video=http://kakonacl.xsrv.jp/~kakonacl/douga/insta360air/insta360_iin.mp4">
</iframe>
<div id="range"></div>
</body>
 
=注意=
(1) <iframe以下...></iframe>迄は、改行せずに記載すること!
(2) src="..index.html?video=...mp4" の構文がポイント
なお、公式サイトから取得した「vrview-master」フォルダ内の index.htmlを指定しても シークバーを表示させられない。
(3) 表示する動画ファイルの URLは絶対パスで指定すること!
   
なお、 iPad miniのSafari場合、直接ページに埋め込むと何故か? 再生しても描画出来ない(「孫達の360度動画をGoogle VR View配信」を参照)。 そこで、インラインフレームを設置してその内に埋め込みページを読み込めば、描画可能となる事を発見した ?(゜_。)?
   
=提示=
   
タップしてスタート。タップ毎に [再生] ⇔ [一時停止]します。
IE, Edgeは 未対応
   
通常の再生では再生中シークバーを消せないが、カードボードモードでは非表示となる。
   
   
スタンドアロンは こちら
   
<成績>360度動画の配信は、 結果 3) に記した理由から JavaScript方式よりもシークバーの表示が可能な iframe方式をお勧めだ!
   
=ブラウザの対応状況= 
1) Windowsブラウザ (Windows10、タッチパネル液晶付きCF-AX2)
IExplorer11は、再生すら出来ない。
MS Edge40は360度ビュー形式で再生するのだが、ナッ何んと!マウスでのドラッグ操作に反応しない(視点を変更させる操作が出来ない)
┓(´_`)┏
Firefox53は、360度ビュー可能だが、「タップするたびに再生/ 一時停止」操作に反応しない
・Opera44, Chrome58は、360度ビュー可能だが、指でのドラッグ操作に反応しない
2) Macブラウザ (MacOSX10.12.6、Mac mini Late 2014)
・Safari11.0, Firefox55, Opera47, Chrome61は、問題なく360度ビュー可能。
3) Ubuntuブラウザ (Ubuntu 16.04 LTS 、EGGマシン)
・Firefox54, Chromium62, Midori0.5.11は、360度ビュー可能。
・Opera45(HTML5ビデオMP4に未対応)は、再生すら出来ない。

4) Androidブラウザ(Android 6.0.1、GALAXY Note Edge SC-01G)
・標準ブラウザ4.0, Opera42, Chrome58は、360度ビュー可能。本体を傾けると視点が同じ方向に追従して移動する事も可能だ
\(^o^)/
Firefox55は、映像を描画出来ない(PCサイトモードでも
ダメ)
・Edge1.0.0は、360度ビュー形式で再生するが ドラッグ操作に反応しない
カードボードモードに変更して VRゴーグルで 3D視聴が出来る機能を搭載
標準ブラウザ, Opera, Chromeは、問題なく 360度全方向に奥行きのある仮想現実感(バーチャルリアリティ)が楽しめる。
5) iOSブラウザ(iOS 10.3.3、iPad mini4)
・Safari10.0, Chrome60は、360度ビューも視点の追従移動も可能だが、一時停止出来ない
Puffin5.2.0は、再生すら出来ない

B) Valiant360
 
Valiant360こちらから入手、今回は v0.4.3)は、JS + WebGLで構築された360度パノラマビデオプレーヤー。ブラウザ上で 360度動画・写真の再生を可能とするツール。今回は、レンタルサーバー Xserverから配信した。
=設定方法=
ダウンロードした jquery.valiant360_0.4.3.zipを解凍すると、「valiant360」というフォルダとなる。 導入は、その中の demo.htmlをそのまま使ってパスを通すだけと簡単。
 
 
 今回実装したdemo.htmlの記述内容

<!DOCTYPE HTML>
<html lang="en">  // 削除
<head>
<title>Valiant 360 Pano Player</title>
<meta charset="utf-8">  // 以下に追加・変更

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">

<!-- Valiant360 control styles -->
<link rel="stylesheet" type="text/css" href="css/valiant360.css" />

</head>
<body>

<div class="valiantPhoto" data-video-src="overpass-clip.mp4" style="width: 540px; height: 304px;"></div> // 表示する動画のパスと解像度

<div class="valiantPhoto" data-photo-src="equirectangular-screenshot.jpg" style="width: 480px; height: 380px;"></div>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>

<!-- Valiant360 plugin, load after jQuery and Three.js -->
<script type="text/javascript" src="jquery.valiant360.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.valiantPhoto').Valiant360();
});
</script>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.

createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.

insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-608903-14', 'flimshaw.net');
ga('send', 'pageview');

</script>
</body>
</html>

=注意=
赤色部分は、カスタマイズした箇所
青色部分は、改行せずに記載の事!
=提示=
B-1) 360度動画を Valiant360で配信
 
<注意> 通信状況により、再生開始迄に 2~3分以上とやたら時間が掛かる場合がある!
 
 
スタンドアロンは こちら
 
jquery.valiant360.jsファイルのパラメーターをカスタマイズすれば ” autoplay ” を制御出来るのであろうが、見出せない
マウスで視点を固定するという基本的な操作が出来ない事は致命的欠陥。
残念ながら、本体を傾けて視点を同じ方向に追従移動する(スマートフォンのジャイロ)機能を表現出来ない
┓(´_`)┏
 
=ブラウザの対応状況= 
1) Windowsブラウザ (Windows10、タッチパネル液晶付きCF-AX2)
・IExplorer11, Firefox53, Opera44, Chrome58, MS Edge40は、360度全方位で再生可能。

2)
Macブラウザ (MacOSX10.12.6、Mac mini Late 2014)
・Safari11.0, Firefox55, Opera47, Chrome61は、360度ビュー可能。
3) Ubuntuブラウザ (Ubuntu 16.04 LTS 、EGGマシン)
・Firefox54, Opera45(HTML5ビデオMP4に未対応)は、再生すら出来ない。
・Chromium62, Midori0.5.11は、360度ビュー可能だが Midoriはガクガク再生。

3) Androidブラウザ(Android 6.0.1、GALAXY Note Edge SC-01G)
標準ブラウザ4.0, Firefox55, Opera42は、再生出来な

・Chrome58は、360度ビュー可能だが、指でタップすると描画に不具合。
4) iOSブラウザ(iOS 9.3.5、iPad mini)
Safari9.0, Puffin5.2.0, Chrome58は、いずれも 再生出来ない
B-2) 360度静止画を Valiant360で配信
 
<div ... data-video-srcを data-photo-srcに変更して表示する静止画のパスを通せばよい
 
 
スタンドアロンは こちら

 
=成績=
各ブラウザの 360度ビューの可否
 
◯,印:360度ビュー可能、X印:360度ビュー不可、,印:ビューに問題あり
 
ディバイス
ブラウザ
Google VR Viewで配信
Valiant360で配信
360度動画
360度静止画
JavaScript
360度
動画
360度
静止画
iframe方式
JavaScript
 
Windows
10
(CF-AX2)
IExplorer11
X(再生不)
c)
c)
MS Edge40
X a)
X a)
Firefox53
b, d)
b)
b)
b)
b)
Opera44
b)
b)
e)
e)
Chrome58
b)
b)
e)
e)
MacOSX
10.12
(Macmini)
Safari11.0
Firefox55
Opera47
Chrome61
Ubuntu
16.0.4
(x32,EGG)
Firefox54
X(再生不)
Opera45
X(再生不)
X(再生不)
Chromium62
Midori0.5.11
j)
Android
6.0.1
(GALAXY
SC-01G)
ブラウザ4.0
h)
h,i)
h)
X(再生不)
e)
Firefox55
X(描画不)
X(描画不)
X(ビュ不具合)
X(再生不)
e)
Opera42
h)
h
X(再生不)
e)
Chrome58
h)
h)
h)
e)
e)
iOS
10.3.3
(iPad mini4)
Safari10.0
l)
l)
h)
X(再生不)
Chrome60
l)
l)
h)
X(再生不)
Puffin5.2.0
X(再生不)
X(再生不)
X(再生不)
 
 
a:360度ビュー形式で再生するが、ナッ何んと!マウスでのドラッグ操作に反応しない
b:タッチパネル液晶付きPC(CF-AX2)で、指でのドラッグ操作に反応しない
c:指のドラッグ操作に反応しないが、Fullscreenならドラッグ操作可能となる。
d:「タップするたびに再生/ 一時停止」操作に反応しない
e:指でタップすると描画に不具合
f:自動的にループ再生出来ない
g:360度ビュー可能?描画に不具合あり
h:360度ビューも端末の傾きに追従する視点の移動も可能
i:カードボードモードに変更して 3D視聴可能だが、再生が停止してしまう
j:ガク々再生
k:再生は可能だが上手く360度ビュー出来ない
l:タップしてスタート方式にすると再生可能となるが、一時停止出来ない
=結果=
 
1) Google VR Viewの方が、Valiant360よりもコンテンツの読み込みに時間が掛からず、Androidのブラウザ, Operaでも動画の360度ビューが可能。端末本体の傾きに追従して視点の移動も可能。しかも、カードボードモードに変更すれば VRゴーグルで 3D視聴も可能と優秀だ。
しかし、まだ改良される事を望まれる余地がある。
2) タッチパネル液晶付き Windowsマシン(CF-AX2)の Firefox, Opera, Chromeは、残念ながら Google VR Viewと Valiant360いずれも、指でのタップ/ ドラッグ操作に不都合がある(一方、動画共有サービスは 補足1) ┓(´_`)┏
3) Google VR View配信では、Windowsの MS Edgeはうまく作動せず、iOSの Puffinは静止画も360度ビュー出来ない。IExplorer11は動画を再生すら出来ない。
  追記(2017.07.15)
4) 360度動画の Google VR View配信では iframe方式を JavaScript方式より推奨する。その理由は、
 
 
(1) JavaScript方式ではシークバーを表示する事は困難だが、iframe方式なら表示可能。通常の再生中はシークバーを消せないのは残念だが、カードボードモードでは非表示となる。
(2) Androidの標準ブラウザは、JavaScript方式ではカードボードモードにすると再生が停止してしまうが、iframe方式では問題なく楽しめる。
(3) JavaScript方式では、同じページに複数個埋め込んでも再生/ 一時停止の制御が1個しか出来ず、良い方策を見出せないでいる。一方、iframe方式なら複数個埋め込んでも問題なく一個一個制御が可能(こちら のページで実証)。
 
5) iframe方式のデメリットは、Firefoxが「タップするたびに再生/ 一時停止」操作に反応しない事。又、ホットスポット/ イベントの設定は、JavaScript方式でないと難しそうだ。

補足(1) 6種類の動画共有サービスへの投稿試験では、タッチパネル液晶付き PC(CF-AX2)の指でのタップ/ ドラッグ操作は全て問題なく可能だった(「60度動画に対応する動画共有サービス..」を参照)。一方、
補足(2) 動画共有サービスにおいて、ブラウザ上でカードボードモード変更機能を搭載しているサイトは、YouTubeも含めて皆無だった(但し、専用アプリ YouTube, Vimeo, ハコスコ及び PANOPLAZA MOVIEなら可能。こちらの追加検証を参照)。

 最上段へ