動画を細かく制御する
最後に、今回の仕上げとして、「巻き戻し」と「指定秒数送り」の処理を追加しましょう。巻き戻し（先頭に戻す処理）は、動画のcurrentTimeプロパティに0を設定するだけです。動画の再生中に実行された場合は最初に戻って自動的に再生されます。
document.getElementById("track1").currentTime = 0;
次に、「2秒進める」「2秒戻す」処理を追加します。currentTimeは指定した位置（秒数）から動画が再生されます。つまり、一度currentTimeの秒数を読み出し、2を加算／減算した後でcurrentTimeに設定すると2秒進める／戻す処理ができます。ただし、再生時間を越えた値を指定しても意味がありませんので、最小値・最大値はチェックしておきます。最小値は0ですが最大値（再生時間）は動画のdurationプロパティに入っています。このdurationの値と比較して再生時間を越えないように調整します。
var time = document.getElementById("track1").currentTime;
time = time + 2; // 2秒先送りする
if (time > document.getElementById("track1").duration) {
time = document.getElementById("track1").duration;
}
document.getElementById("track1").currentTime = time;
document.getElementById("track2").currentTime = time;
最後に、現在再生している時間を表示します。現在再生中の秒数はcurrentTimeプロパティで取得できますが、問題は再生時間を表示するタイミングです。定期的に秒数を読み出すのであれば従来のsetTimeout()やsetInterval()でできますが、ここではHTML5 videoのイベントを使ってみましょう。
HTML5 videoではいくつかのイベントが定義されており、再生時間が更新された場合にはtimeupdateイベントが発生します。このtimeupdateイベントを使って再生時間を表示します。イベントの設定はaddEventListener()を使い、第1引数にtimeupdate、第2引数にイベント発生時の処理を書きます。イベントが発生したらcurrentTimeの値を読み出してページ上に表示します。
document.getElementById("track1").addEventListener("timeupdate", function(){
var totalSec = Math.floor(document.getElementById("track2").duration);
var currentSec = Math.floor(document.getElementById("track1").currentTime);
document.getElementById("movieDuration").innerHTML = currentSec+"/"+totalSec+"秒";
}, true);
完成したスクリプトがサンプル04です。
スライダーで360度視点を変更でき、さらに各種ボタンで動画を制御できます
●サンプル04[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>
<button onclick="movieBack()">2秒戻す</button>
<button onclick="movieForward()">2秒進める</button><br>
<button onclick="movieRewind()">最初に戻る</button><br>
<span id="movieDuration"></span>
</div>
</body>
</html>
●サンプル04[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);
}
});
// 再生している秒数を表示
document.getElementById("track1").addEventListener("timeupdate", function(){
var totalSec = Math.floor(document.getElementById("track2").duration);
var currentSec = Math.floor(document.getElementById("track1").currentTime);
document.getElementById("movieDuration").innerHTML = currentSec+"/"+totalSec+"秒";
}, true);
});
// 動画を再生する処理
function moviePlay(){
document.getElementById("track1").play();
document.getElementById("track2").play();
}
// 一時停止の処理
function moviePause(){
document.getElementById("track1").pause();
document.getElementById("track2").pause();
}
// 動画の巻き戻し処理
function movieRewind(){
var time = 0; // 先頭の秒数にする
document.getElementById("track1").currentTime = time;
document.getElementById("track2").currentTime = time;
}
function movieBack(){
var time = document.getElementById("track1").currentTime;
time = time - 2; // 2秒巻き戻し
if (time < 0) { time = 0; } // 0秒より前にはしない
document.getElementById("track1").currentTime = time;
document.getElementById("track2").currentTime = time;
}
// 動画の先送り処理
function movieForward(){
var time = document.getElementById("track1").currentTime;
time = time + 2; // 2秒先送りする
if (time > document.getElementById("track1").duration) {
time = document.getElementById("track1").duration;
}
document.getElementById("track1").currentTime = time;
document.getElementById("track2").currentTime = time;
}
筆者のサイトに、360度動画のサンプルをいくつか用意しました。ただし、ファイルサイズが大きいので、サーバー上にある動画を直接ダウンロードしても見られない場合が多いので、別途ZIP圧縮したものを用意してあります。HTML5 videoはストリーミングに対応していませんので、データがすべてダウンロードされるまで、任意の秒数からの再生はできません。ちなみに<video>タグにautobufferを指定すると自動的に動画データをバッファしてくれます。
http://www.openspc2.org/travel/LocalViewMovie/
実際にHTML5 videoを利用してみると、現時点では機能不足を感じたり、期待通りに動作しなかったりしますが、多くの問題は近い将来、解消されるでしょう。HTML5によって動画のコントロールが非常に手軽にできるようになったのは歓迎すべきことだと思います。
