1分ごとに動画を切り換える
ボタンをタッチして動画を切り換えるだけでなく、スクリプトでも動画は切り換えられます……と断言したいところですが、実際にやってみるとSafariが停止したり落ちてしまったりして正常に動作しないことがありました。以降は、将来のアップデートで問題が解消されるもの、との期待を込めて解説することにします。
まず、再生したい動画のURLを以下のように配列に入れておきます。
var data = [
"movie/sample1.mov",
"movie/sample2.mov",
"movie/sample3.mov",
"movie/sample4.mov",
"movie/sample5.mov"
];
次に、動画を切り換える時間を設定します。なるべく切り換える時間を長くしておくと安定して再生されます。
var intervalTime = 60 * 1000; // 映像を切り換える秒数
video要素にloopを指定すると動画の終わりを検知するendedイベントが発生しないため、今回はloopを指定しません。サンプル03では再生開始から1分が経過し、かつ動画の再生が終了した時点で次の動画に切り換えます。あまり短いタイミングにすると再生される前に切り替わってしまうことがあるため、このような時間としました。
指定時間が経過している場合は変数endFlagがtrueになり、そうでない場合は最初から再生されるようにplay()メソッドを呼び出します。
var vObj = document.getElementById("myVideo");
vObj.addEventListener("ended", function(){
if (!endFlag) {
vObj.play(); // 指定された時間が経過していなければ繰り返し再生する
return;
}
：
}, true
あとはサンプル02と同様に、videoオブジェクトに再生する動画のURLを指定して再生します。実際のプログラムがサンプル03です。
前にも書いたように、このプログラムはiPadで何回か映像が切り替わった後、Safariが落ちたりハングアップしてしまいます。現時点では実用的ではありませんが、将来動作することを期待しています。
1分ごとに映像が切り替わって再生される。現状では何度か動画が切り替わった後、ハングアップしたりSafariが落ちてしまう
●サンプル03[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 Video + iPad + VGA Adapter</title>
</head>
<body>
<h1>HTML5 Video + iPad + VGA Adapter</h1>
<video id="myVideo"
src="movie/sample1.mov"
width="1024"
height="512"
controls
autoplay
></video>
<p>
1分ごとに再生する映像を切り換えます。
</p>
<div id="stat"></div>
<script type="text/javascript" src="js/signage.js"></script>
</body>
</html>
●サンプル3[JavaScript：signage.js]
// 再生する映像のURL
var data = [
"movie/sample1.mov",
"movie/sample2.mov",
"movie/sample3.mov",
"movie/sample4.mov",
"movie/sample5.mov"
];
var count = 1;
var endFlag = false; // 映像再生フラグ
var intervalTime = 60 * 1000; // 映像を切り換える秒数
var vObj = document.getElementById("myVideo");
// 1回の再生が終了した時に発生するイベントを捕捉
vObj.addEventListener("ended", function(){
if (!endFlag) {
vObj.play(); // 指定された時間が経過していなければ繰り返し再生する
return;
}
endFlag = false;
var url = data[count++];
count = count % data.length; // 配列で用意された映像の数に収まるようにする
vObj.src = url;
vObj.load();
vObj.loop = false; // ループさせずendedイベントを発生させるようにする
}, true);
// 映像が再生可能になった時に処理
vObj.addEventListener("canplaythrough", function(){
vObj.play();
endFlag = false;
setTimeout("endFlag=true", intervalTime); // 1分後に処理
}, true);
