Hatena::ブログ(Diary)

aikeの日記 RSSフィード

2014-08-24 全天球ビューワーPaView.jsの動作環境とパノラマ飛行動画

先日作った全天球ビューワーPaView.jsですが、できるだけ多くのブラウザで表示できるよう調べてみました。

クロスブラウザで問題になるところは、マウスイベント、WebGLで動画のテクスチャマッピングしているところ、対応動画フォーマットあたりです。

 

Windows

Windows PCのブラウザは素直なものが多いようで、マウスイベントの処理をブラウザごとに書くくらいで、わりとそのまま動きました。Windows7上のChromeFirefoxIEで正常に動くことを確認しました。

 

Mac OS

Macの場合、Safari用のマウスイベント処理を書いたら正常に動きました。Firefoxは.mp4の動画に対応しておらず(特許関係らしいです)、WebMで表示するようにしてみました。サーバ上に.mp4と同名の.webmのファイルを用意しておけば、.mp4を.webmとJSが読み替えて無理矢理表示します。サーバ側も AddType video/webm .webm する必要があるかもしれません。

OS X Mavericks上のChromeFirefoxSafariで正常に動くことを確認しました。

 

iOS

iOSはWebGLRendererが使えないっぽいのでテクスチャマッピングがうまくいかず非対応です。

 

Android

Androidは持っていないので未確認です。たぶんiOSと同じような状況だと思います。

 

先日、メディアアーティストの八谷さんの超小型飛行機にカメラを搭載して撮影した動画をアップしました。空中を飛んでいる風景は全天球パノラマ動画の大きな可能性を感じることができると思います。見てみてください。

 

http://sound.jp/aike/m02j/

f:id:aike:20140824184126p:image:w640

※音が出ます。レンタルサーバの仕様上MacFirefoxには対応していません。

rockeccorockecco 2014/10/12 13:20 はじめまして、rockeccoと申します。
シータがインターバル撮影に対応して、動画を作ってみたのですが、
その動画をどうやって公開しようかと思っていたところ、
こちらの記事にたどり着きました。

早速使ってみて良い感じに公開することができました。
ありがとうございます。
http://rockecco.com/H2A/f25/h2af25_theta.htm