テロップデータを読み込んで表示する
HTML、テロップデータとも用意できました。いよいよ、ニコニコ動画のようにテロップがたくさん流れるスクリプトを作ります。
JSON形式のテロップデータを読み込むにはjQueryを使用します。最初に、jQueryの$.get()を使って、以下のようにテロップデータを読み込みます。telopURL変数にはテロップデータがあるURLを指定します。jQueryの$.get()は同一ドメイン上にあるデータのみ読み込め、他のドメイン上にあるデータは読み込めません。他ドメイン上にデータがある場合は$.getScript()を使う必要があります。
テロップデータはeval()を使って評価した後、telopData変数に入れています。なお、このサンプルではJSONファイルの安全性に関してはチェックしていませんので、仮にデータ内にscriptタグが含まれていてもそのまま実行してしまいます。Webサービスなどで利用する場合は、scriptタグを削除するなどの処理を追加してください。
$.get(telopURL, function(text){ // テロップデータを読み込む
document.getElementById("telopCommand").value = text;
telopData = eval(text);
});
テロップデータを読み込んだらテキストエリア内に表示します。テキストエリアが変更されると、新たなテロップデータとして変数telopDataにデータを格納します。テキストエリア内のデータが変更されるとchangeイベントが発生しますので、addEventListener()を使って以下のような処理を設定します。
document.getElementById("telopCommand").addEventListener("change", function(){
telopData = eval(document.getElementById("telopCommand").value);
playVideo();
}, true);
playVideo関数は動画を再生する関数です。すでに表示されているテロップデータ（DOMノード）をすべて削除した後、videoの再生時間を0秒に設定して再生します。これにより、テキストエリアが変更されたときに、動画が最初から再生されます。最後に、0.1秒ごとにテロップを移動させる関数moveTelopを呼び出します。
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;
}
