テロップを外部データとして用意する
サンプル01ではHTMLにテロップとして表示する文字を直接記述していましたが、これでは後からテロップの内容を変更できません。そこで、JSON形式のファイルで用意したテロップデータをスクリプトで読み込んで表示するように変更します。JSONファイルでは複数のテロップを記述でき、表示する文字と表示するタイミングを設定できるようにします。
また、単にJSONファイルを読み込んで表示するだけでなく、動画を再生しながらテロップを変更できるようにします。動画の横にJSONファイルから読み込んだテキストエリア（textarea）を配置し、テキストエリア内を書き換えるとテロップに反映されるようにします。
テロップデータは以下の形式にしてあります。
{ 'id':'ID名', 'sec': 表示開始秒数, 'text':'流すテロップ' }
id名はdiv要素のid属性です。同一のid名があると期待通りに表示されないので固有のID名を付けます。
secはテロップを流し始めるタイミングです。タイミングはsetIntervalタイマーを使用するため、0.1秒単位で指定します。ちなみにHTML5 videoのtimeupdateイベントはブラウザーごとに発生タイミングが異なるため、今回の用途には使えません（関連記事）。
textはテロップで表示するテキストです。
サンプルでは以下のようなJSONファイルを用意しました。
●テロップデータ (telop.js)
[
{ 'id':'t1', 'sec': 0.5, 'text':'木曽川 特集' },
{ 'id':'t2', 'sec': 3, 'text':'木曽川は伊勢湾に流れ込んでいます' },
{ 'id':'t3', 'sec': 6, 'text':'映像は長野県南木曽町で撮影したものです' },
{ 'id':'t4', 'sec': 9, 'text':'川の色は薄緑色で大変綺麗です' },
{ 'id':'t5', 'sec': 13, 'text':'以上で終わりです' }
]
以上でテロップデータの準備ができました。
テロップデータを読み込んで表示する処理を作る前に、HTMLにも少し変更を加えてよりプレーヤーらしくしましょう。具体的には、再生開始ボタン、テロップを編集するテキストエリア、再生中の動画の秒数を表示する領域を用意します。再生開始ボタンは画像で用意し、clickイベントが発生したらvideoを再生する関数を呼び出します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 流れるテロップ</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/telopper.js"></script>
</head>
<body>
<h1>HTML5 流れるテロップ</h1>
<div id="viewArea">
<video id="myVideo">
<source src="movie/kiso.mov">
<source src="movie/kiso.ogv">
<p>HTML5のvideoに対応したブラウザをご利用下さい</p>
</video>
<div id="telop"></div>
</div>
<div>
<img src="images/play.jpg" id="playButton" onclick="playVideo()" width="24" height="24" alt="再生ボタン">
<span id="playTime">0</span>
</div>
<form>
<div class="subheader">テロップデータ</div>
<textarea id="telopCommand" cols="30" rows="15"></textarea>
</form>
</body>
</html>
