360度動画をブラウザ上で再生する方法

VR元年と呼ばれた2016年から早くも1年が経過し現在では多くのVRコンテンツが提供されています。その中でも比較的簡単に導入できるコンテンツとして360度動画があります。今ではRICHOのTHETAやハコスコのinsta360を使えば簡単に360度動画を撮影しSNSでシェアすることが可能です。今回は360度動画をWebページに埋め込みブラウザ上での視聴を実現する方法をいくつかご紹介します。

A-Frame

A-Frameは以前当社のブログでも紹介したことがあるライブラリです。A-Frameにはvideosphereというコンポーネントが用意されています。下記のようにHTMLファイルに記述するだけで360度動画を表示させることができます。

<a-scene embedded>
  <a-assets>
    <video id="video" autoplay loop="true" playsinline src="video.mp4" />
  </a-assets>
  <a-videosphere src="#video"></a-videosphere>
</a-scene>

A-FrameはCDNで利用することができるのですぐに試すことができます。デフォルトではフルスクリーンで表示されてしまうので、ページの一部に埋め込む場合はa-sceneにembeddedを付与します。VRモード用のアイコンを非表示にしたいときは追加でvr-mode-ui="enabled: false"を記述します。

React VR

React VRはFacebookが開発しているReactを使用してVRコンテンツを作るためのフレームワークです。 VRコンテンツ用のコンポーネントがいくつか用意されており、360度動画を表示するにはVideoPanoというコンポーネントを使用します。

export default class hello extends React.Component {
  render() {
    return (
      <View>
        <VideoPano
          source={[
            asset('video.mp4', {format: 'mp4', layout: 'SPHERE'})
          ]}
          loop={true}
        />
      </View>
    );
  }
};

A-Frameに比べると環境の構築に時間がかかります。またReactを知らない方はまず記法やコンセプトを知っておいたほうが良いでしょう。React VRの概要ページには、React VRはReact Nativeフレームワークの上に成り立っていると記載されています。基本的にはブラウザで動作させるものですが、将来的には同時にハイブリッドアプリとして書き出すことができるようになるかもしれません。

A-FrameもReact VRも元はVRコンテンツを作成するためのライブラリなのでVRコンテンツとして作りつつ、視聴環境がない方にはブラウザ上で視聴できる環境を提供することが望ましいでしょう。

Three.js

先述した2つのライブラリは内側でThree.jsを用いています。Three.js単体で動作させる場合は次のようになります。

var winW = window.innerWidth, winH = window.innerHeight;
var video = document.createElement('video');
video.src = 'video.mp4';
video.loop = true;
video.load();
video.play();

scene = new THREE.Scene();

var geometry = new THREE.SphereGeometry(500, 50, 50);
geometry.scale(-1, 1, 1);

var texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

var material = new THREE.MeshBasicMaterial({
  map: texture
});

var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

camera = new THREE.PerspectiveCamera(75, winW / winH, 1, 1000);
camera.position.set(0, 0, 0.1);
camera.lookAt(mesh.position);

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(winW * .5, winH * .5);
container.appendChild(renderer.domElement);

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
controls.enablePan = false;

レンダリング部分は省いていますが、球体の内側にテクスチャとして動画を貼り付け球体の中心からカメラで撮影するだけです。他のライブラリより記述は多くなるものの、独自のUIや機能を持たせる必要があるならばThree.jsで実装してしまうのがシンプルです。

360度動画のいいところは動画の比率サイズを考慮する必要がないところです。通常の動画は縦横比を維持する必要があるため不要な余白が出てしまったり、横長の動画はスマートフォンで見たときにとても小さくなったりしてしまいます。360度動画ではユーザーが好きな方向にカメラを向けることができるので表示領域からはみ出しても基本的には問題ありません。ただし自由にカメラを動かすことができるということはユーザーが重要なシーンを見逃してしまう可能性もあるため注意が必要です。ユーザーの視線を誘導するナビゲーションを配置したり、登場人物のアクションや目線で誘導するといった撮影時の工夫も必要です。

ユーザーは360度動画の見たいところを見ることができるので通常の動画よりも能動的な視聴体験を提供できます。今回ご紹介したライブラリを使えば簡単に実装できますので是非試してみてはいかがでしょうか。