スライダーで視点を変更する
続いて、スライダーを使って視点を変更できるようにします。スライダーを自前で作るのは手間がかかりますので、ここではjQuery UIのスライダーウィジェットを利用します。
●jQuery UI
http://jqueryui.com/
jQuery UI
jQuery UIのスライダーウィジェットは次のような手順で利用できます。まず、HTMLに<div id="slider"></div>のようなスライダーを表示するコンテナを用意します。次に、JavaScriptで$("#slider").slider(オプション)としてスライダーを生成します。引数には表示オプションを指定します。
今回のサンプルは、2つの動画を横に並べていますので、スライダーの最小値（min）は0に、最大値（max）は動画2つ分の横幅から表示領域の横幅を引いた値(1280×2-320)に設定します。
また、スライダーの初期値（デフォルトで表示される視点）を設定しないと、後ろ向きの視点で動画が進んでしまうので、真正面の視点の位置をvalueに指定しておきます。
次に、スライダーがドラッグされ、値が変更されたときの処理を書きます。スライダーがドラッグされたときの処理はslideプロパティに関数を指定します。関数にはドラッグされたスライダーの情報が渡されます。スライダーの値はvalueに入るので、この値を表示するX座標として、動画を内包しているdiv要素のleftプロパティに設定します。jQueryではcss()メソッドを使って、指定したCSSプロパティの値を設定できます。
実際のスクリプトはサンプル03のようになります。なお、サンプルのように動画を2つ並べるのではなく、1つだけ表示したい場合はmaxの値を「1280-表示幅」に変更してください（sample.jsのコメントを参照）。
スライダーをドラッグすると動画を再生中に360度視点を変更できます
●サンプル03[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>360 Movie</title>
<link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<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="slider"></div>
<div id="control">
<button onclick="moviePlay()">走行開始</button>
<button onclick="moviePause()">一時停止</button>
</div>
</body>
</html>
●サンプル03[JavaScript:sample.js]
// 360度ドライブ動画
$(function(){
var limit = 1280; // HDサイズの横幅ピクセル値(1280x720)
var screenWidth = 320; // 表示する動画の横幅
// jQuery UIスライダの処理
$("#slider").slider({
min: 0,
max: limit*2 - screenWidth, // 1枚画像の場合はlimit - 320
value : 480, // 真正面の視点の位置
slide : function(evt, ui){
var x = -ui.value;
$("#contents").css("left", x);
}
});
});
// 動画を再生する処理
function moviePlay(){
document.getElementById("track1").play();
document.getElementById("track2").play();
}
// 一時停止の処理
function moviePause(){
document.getElementById("track1").pause();
document.getElementById("track2").pause();
}
