ビデオアルバムを作成する
前のプログラムを改良して、最大4つまでのビデオを録画・再生できるビデオアルバムを作成します。
PhoneGapバージョン0.9.6では複数のビデオを撮影する場合、あらかじめ再生したい数だけvideo要素を用意しておかないと正常に再生できません（録画は正常にできても再生開始時間や秒数表示がおかしくなる）。そこで、HTMLではvideo要素を4つ用意して並べておきます。
プログラムの変更点は以下の部分です。
var count = 0;
function captureVideo() {
var total = document.getElementsByTagName("video").length;
if (count >= total){
alert("これ以上は録画できません");
return; // 4枚以上は録画できない
}
navigator.device.capture.captureVideo(captureSuccess, captureError);
}
撮影するビデオは最大4つまでとしていますが、プログラムではvideo要素の総数をdocument.getElementsByTagName()で取得し、その数と撮影した枚数と比較しています。このため、原理的にはvideo要素さえ増やせばいくらでもビデオを撮影できます。
実際のプログラムは以下のようになります。
ビデオアルバムのプログラム
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
h1 { font-size:14pt; }
</style>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.min.js"></script>
<script type="text/javascript" charset="utf-8">
// Capture APIで録画
var count = 0;
function captureVideo() {
var total = document.getElementsByTagName("video").length;
if (count >= total){
alert("これ以上は録画できません");
return; // 4枚以上は録画できない
}
navigator.device.capture.captureVideo(captureSuccess, captureError);
}
function captureSuccess(mediaFiles) {
document.getElementById("myVideo"+count).src = mediaFiles[0].fullPath;
count = count + 1;
}
function captureError(error) {
alert("Error !!："+error.code);
}
</script>
</head>
<body>
<h1>簡易ビデオレコーダー</h1>
<div>
<button onclick="captureVideo()">ビデオ録画開始</button>
</div>
<video src="" id="myVideo0" width="120" height="120" controls></video>
<video src="" id="myVideo1" width="120" height="120" controls></video>
<video src="" id="myVideo2" width="120" height="120" controls></video>
<video src="" id="myVideo3" width="120" height="120" controls></video>
</body>
</html>
さっそく実機で確認してみましょう。実機にアプリを転送すると、以下のような画面になります。ビデオは撮影されていないので4つの画面は真っ黒の状態です。ここで、「ビデオ録画開始」ボタンをタップして撮影・録画を始めます。ビデオを4つ撮影し、再生できるかどうかチェックします。
「ビデオ録画開始」ボタンをタップして撮影を開始
ビデオを撮影する
ビデオ録画が終了すると、そのビデオの内容が表示される
録画したビデオが再生できるかどうか確認する
最大4つまで撮影できる。原理的にはvideo要素さえ増やせば、いくらでも登録できる
4枚以上撮影しようとするとアラートダイアログが出る
保存機能がないので、録画したビデオはアプリの終了とともに消去されます。Capture APIのドキュメントには撮影したビデオデータをサーバーに転送する方法も掲載されていますので、参考にするとよいでしょう。
