テロッパーのスクリプトを仕上げる
テロップの移動処理は前に解説したように、スタイルシートの座標値を直接読み出して変更します。テロップの数だけfor()で処理を繰り返せばOKです。
配列変数tIDに表示しているテロップのIDが格納してあり、座標値が-1000より大きいテロップだけ位置を動かすようにしています。テロップがたくさんある場合には、どこかの時点でテロップを削除する処理を入れた方がよいかもしれません。
for(var i=0; i<tID.length; i++){
var x = parseInt(document.getElementById(tID[i]).style.left);
if (x > -1000){
document.getElementById(tID[i]).style.left = (x - 20) + "px";
}
}
最後に、テロップの追加処理です。テロップデータ内の表示開始秒数と再生中の動画の秒数を比較して、動画の秒数が表示開始秒数を超えていたらテロップを追加します。テロップがすでに表示されている場合は重複しないように、テロップを追加した時点で配列変数tIDにテロップのID名を入れておき、tIDにテロップのIDがあるかどうかも調べます。
テロップがすでに表示されているか調べる関数がcheckTelopです。表示されていればtrueを、いなければfalseを返します。
function checkTelop(checkID){
for(var j=0; j<tID.length; j++){
if (tID[j] == checkID) return true; // すでに表示している場合はtrueを返す
}
return false;
}
あとは、document.createElement("div")として新たなエレメントを作成し、表示座標と表示する文字を設定します。テロップのY座標は上から少しずつ下げていき、ある程度下まできたら再度上から表示するようにしています。
var ele = document.createElement("div"); // テロップを表示するdivを生成
ele.innerHTML = telopData[i].text; // 表示する文字を設定
ele.className = "message"; // テロップのスタイルシートを設定
ele.style.left = telopRight+"px";
ele.style.top = telopY+"px";
tID.push(ele.id = telopData[i].id);
document.getElementById("telop").appendChild(ele);
telopY = telopY + telopOffset; // オフセットを加算
if (telopY > telopBottom) telopY = startY; // 画面下まできたら座標を上に戻す
ここまでをまとめたものがサンプル02です。再生ボタンをクリックすると動画の再生が始まり、テロップが右から左に流れてきます。また、テキストエリア内のデータを編集すると、テロップの表示も変更されます（テキストエリア内のテロップデータを編集したら、テキストエリア外をクリックしてください。テキストエリアからフォーカスを外さないと変更したテロップ内容は反映されません）。
再生ボタンをクリックするとテロップが右から左に時間にあわせて流れてくる
テキストエリア内のデータを変更すると...
流れてくるテロップも自動的に変わる
●サンプル02（JavaScript：telopper.js）
var telopData = [], tID = [], timerID;
var telopURL = "data/telop.js"; // テロップデータのURL
var telopY = startY = 20; // テロップの表示Y座標
var telopRight = 400; // テロップが登場する右端の座標
var telopOffset = 30; // テロップの表示位置のオフセット
var telopBottom = 200; // テロップの下限の座標
// ページが読み込まれたらテロップデータの読み込みと設定を行う
window.addEventListener("load", function(){
$.get(telopURL, function(text){ // テロップデータを読み込む
document.getElementById("telopCommand").value = text;
telopData = eval(text);
});
// テキストエリア内のデータが更新されたらテロップデータを反映し、再度最初から再生する
document.getElementById("telopCommand").addEventListener("change", function(){
telopData = eval(document.getElementById("telopCommand").value);
playVideo();
}, true);
}, true);
// テロップの移動を行い、新たなテロップを追加する
function moveTelop(){
// 再生時間を表示
document.getElementById("playTime").innerHTML = document.getElementById("myVideo").currentTime+"秒";
// テロップを移動させる処理
for(var i=0; i<tID.length; i++){
var x = parseInt(document.getElementById(tID[i]).style.left);
if (x > -1000){
document.getElementById(tID[i]).style.left = (x - 20) + "px";
}
}
// テロップを新たに追加するかどうか調べる
for(var i=0; i<telopData.length; i++){
if (checkTelop(telopData[i].id) == true) continue; // すでにテロップが表示されている場合はループの先頭へ
if (document.getElementById("myVideo").currentTime >= telopData[i].sec){
var ele = document.createElement("div"); // テロップを表示するdivを生成
ele.innerHTML = telopData[i].text; // 表示する文字を設定
ele.className = "message"; // テロップのスタイルシートを設定
ele.style.left = telopRight+"px";
ele.style.top = telopY+"px";
tID.push(ele.id = telopData[i].id);
document.getElementById("telop").appendChild(ele);
telopY = telopY + telopOffset; // オフセットを加算
if (telopY > telopBottom) telopY = startY; // 画面下まできたら座標を上に戻す
}
}
}
// テロップが表示されているかどうか調べる。あればtrue、なければfalseを返す
function checkTelop(checkID){
for(var j=0; j<tID.length; j++){
if (tID[j] == checkID) return true; // すでに表示している場合はtrueを返す
}
return false;
}
// 映像を再生する
function playVideo(){
if (timerID) clearInterval(timerID);
tID = [];
var tDiv = document.getElementById("telop");
var tList = tDiv.getElementsByTagName("div"); // テロップを全て削除
for(var i=tList.length-1; i>=0; i--) tDiv.removeChild(tList[i]);
telopY = startY;
document.getElementById("myVideo").currentTime = 0;
document.getElementById("myVideo").play();
timerID = setInterval("moveTelop()", 100); // 0.1秒ごとにテロップを動かす
return false;
}
