ボタンのタッチで表示する動画を切り換える
1つの動画を再生し続けるだけでなく、状況によって動画を切り換えたい場合があります。フォームのボタンをタッチしたら動画を切り換えるプログラムがサンプル02です。
動画を切り替えるには、URLを設定した後にload()メソッドを使って動画データを読み込ませます。videoオブジェクトのsrcプロパティに再生したい映像のURLを設定しただけでは動作しません。繰り返し再生させるためloopプロパティにtrueを指定し、その後play()メソッドを呼び出せば動画が再生されます。
動画ファイルのデータサイズが大きい場合、再生が開始してもデータのダウンロードが間に合わず、途中で止まってしまうことがあります。この問題を回避するには、以下のようにcanplaythroughイベントを捕捉してからplay()メソッドを呼び出します。canplaythroughイベントは、現状の速度で読み込みを続ければ途切れることなく動画を再生できる、というタイミングで発生します。実際に試してみると途中で再生が途切れてしまうことはあり、確実ではありませんが、最初からplay()メソッドで再生するよりはスムーズに再生できます。
vObj.addEventListener("canplaythrough", function(){
vObj.play();
}, true);
ボタンをタッチすると表示される映像が切り替わる
●サンプル02[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 Video + iPad + VGA Adapter</title>
<script type="text/javascript" src="js/signage.js"></script>
</head>
<body>
<h1>HTML5 Video + iPad + VGA Adapter</h1>
<video id="myVideo"
src="movie/sample1.mov"
width="1024"
height="512"
loop controls
></video>
<form>
<input type="button" value="サンプル1の映像にする" onclick="setMovie('movie/sample1.mov')">
<input type="button" value="サンプル2の映像にする" onclick="setMovie('movie/sample2.mov')">
</form>
</body>
</html>
●サンプル02[JavaScript：signage.js]
function setMovie(url){
var vObj = document.getElementById("myVideo");
vObj.src = url;
vObj.load();
vObj.loop = true;
vObj.addEventListener("canplaythrough", function(){
vObj.play();
}, true);
}
