googleが提供しているVR Viewスクリプトを使うと簡単に360°の写真やビデオをウェブサイトに埋め込むことができます。
VR View for the Web
使い方
1.HTMLにGoogle提供のVR Viewスクリプトを記載する。
vrview.html
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
2.divを記載する。
vrview.html
<div id="vrview"></div>
3.VR Viewインスタンスを作成する関数を呼び出す。
(下記はgoogleのサンプル)
image:のところをvideo:にすれば360度の動画にも対応できます。
詳しくは VR View for the Web を。
vrview.html
window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
width: '100%',
height: '300',
preview: '//storage.googleapis.com/vrview/examples/coral-preview.jpg',
image: '//storage.googleapis.com/vrview/examples/coral.jpg',
is_stereo: true
});
}
PCでもスマホでもブラウザさえあればみることができるのでちょっとした用途には便利だと思います。
例えば賃貸物件の間取りなんかが360度の写真で確認できるといいなじゃないかと。