テロップを外部データとして用意する サンプル01ではHTMLにテロップとして表示する文字を直接記述していましたが、これでは後からテロップの内容を変更できません。そこで、JSON形式のファイルで用意したテロップデータをスクリプトで読み込んで表示するように変更します。JSONファイルでは複数のテロップを記述でき、表示する文字と表示するタイミングを設定できるようにします。 また、単にJSONファイルを読み込んで表示するだけでなく、動画を再生しながらテロップを変更できるようにします。動画の横にJSONファイルから読み込んだテキストエリア(textarea)を配置し、テキストエリア内を書き換えるとテロップに反映されるようにします。 テロップデータは以下の形式にしてあります。 { 'id':'ID名', 'sec': 表示開始秒数, 'text':'流すテロップ' } id名はdiv要素のid属性です