※この記事は「古籏一浩のJavaScriptラボ」の第30回です。過去の記事も合わせてご覧ください。
|
|---|
| スライダーで視点を変えられる360度動画。画像クリックでサンプルページを表示します（Safari 4、Opera 10.50でのみ表示可能） |
Flash Playerなどのプラグインがなくても、ブラウザー上で動画を再生できるHTML5 video。前回の記事では、HTML5 videoで動画を表示・再生する方法を解説しました。今回は、360度動画が撮影できるカメラ「bloggie（ブロギー）」で撮ったパノラマ動画を素材に、スライダー操作で視点を切り替えられるパノラマ動画サイトを完成させましょう。
HTML5 videoをJavaScriptで制御する
ブロギーで撮った360度動画は、以下のような横長の1枚の動画になっています。
パノラマ動画サイトのサンプルは、360度ぐるりと見渡せる動画にするため、この横長の動画を2つ、水平に並べます（同じ内容のvideo要素を2つ用意する）。2つのvideo要素はdiv要素（#contents）で囲み、スライダーの動きに合わせて座標を移動させます。実際に表示する領域は、別のdiv要素（#viewer）を用意し、スタイルシートのclipプロパティで切り抜きます。
2つのvideo要素はJavaScriptで操作するため、それぞれIDを割り振っておきましょう。ここでは「track1」「track2」という名前のID名にしました。
パノラマ動画サイトの構造。2枚の動画を並べて配置し、一部を切り抜いて表示。スライダーの動きに合わせて動画を左右に移動させます
前回のサンプルでは単純に動画を表示するだけでしたので、今回はまず再生ボタンと一時停止ボタンを付けてみます。HTML5で動画の再生を開始するには、動画に対してplay()メソッドを呼び出します。たとえば以下のようにするとID名「track1」を持つvideo要素の動画が再生されます。
document.getElementById("track1").play();
今回は2つの動画を同時に再生するので、以下のように続けて書きます。
document.getElementById("track1").play();
document.getElementById("track2").play();
再生中の動画は、pause()で一時停止できます。以下のように書くと2つの動画が一時停止します。なお、一時停止の状態でplay()を呼び出すと、一時停止した時点から動画を再生します。
document.getElementById("track1").pause();
document.getElementById("track2").pause();
ここまでをまとめたものがサンプル02です。ボタンをクリックすると動画が再生／一時停止します。
走行開始ボタンをクリックすると動画の再生が開始されます
一時停止ボタンをクリックすると動画が一時停止します。再度走行開始ボタンをクリックすると動画の再生が開始されます
●サンプル02[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>360 Movie</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/view.js"></script>
</head>
<body>
<h1>360 Movie</h1>
<div id="viewer">
<div id="contents">
<video id="track1">
<source src="movie.mov" width="1280" height="180">
<source src="movie.ogv" width="1280" height="180">
</video><!--
--><video id="track2">
<source src="movie.mov" width="1280" height="180">
<source src="movie.ogv" width="1280" height="180">
</video>
</div>
</div>
<div id="control">
<button onclick="moviePlay()">走行開始</button>
<button onclick="moviePause()">一時停止</button>
</div>
</body>
</html>
●サンプル02[JavaScript:sample.js]
// 動画を再生する処理
function moviePlay(){
document.getElementById("track1").play();
document.getElementById("track2").play();
}
// 一時停止の処理
function moviePause(){
document.getElementById("track1").pause();
document.getElementById("track2").pause();
}
「まとめてじっくり読みたい！」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。
HTML5+JavaScript アイデア&実践サンプル
本体 2,800＋税、B5変形判312ページ（オール4色刷）
ISBN：978-4-04-870448-9
