動機付け

大阪・天王寺「あべのハルカス」近くの阪神高速14号松原線上を走る高速移動物体を追跡する動画を作成しました。動画に字幕（キャプション）を付けるには、SRT（字幕）ファイルを用います。

これをサポートする多くのアプリが存在しますが、色を変えたり小さな字から少しずつ大きな字が現れるような凝った表現は無理です。野球テレビ中継のホームランボールの軌跡をスマホやパソコンの画面上に表示するのも簡単ではありません。

今回、HTMLのVideo要素で取り込んだ画像イメージをCanvas要素にコピーし、JavaScriptを駆使して動画イメージに画像や文字を重ね書きすることによって、キャプションや切り替え効果を実現させています。

テレビや映画の歴史は長いです。両者とも娯楽の王様として君臨してきました。ヒットすれば開発に投じた予算は何倍にもなって戻ってきます。対してパソコンやスマホでの応用はまだ、浅いと言えます。予算はありませんので、今までの知識を集めて開始します。

仕組みの概要

動画は、デジカメやスマホで手軽に作成することができます。録画した動画を再生することも容易に実現できます。

HTMLでグラフィック表示するとき、Canvas要素を使って楕円や多角形を描画することが多いですが、動画を表示することも可能です。

この技術を身に付けるにあたり、
①(JavaScript)Video要素をJavaScriptで制御する
②動画をcanvasで再生する[HTML5]
を参考にさせていただきました。

これらの内容をマスターすれば、あとは動画の制御はCanvasの扱いになり、通り一遍だった動画による表現に深みを持たせることが可能になります。

制御の肝

動画を読み込むとき、様々なイベントが発生し、利用価値の高いアプリ開発を助けてくれます。

そのなかに、動画が再生できる状態になったときにonloadeddataイベントが発生するので、video読込みを初期化し、Canvasによる表示をするためのタイマーを発動してVideo再生を起動します。

そのとき、style.display属性に”none”を設定してVideo要素によるオブジェクトを非表示にしておきます。発動されたタイマー関数ではVideo要素によって読み込まれた画像データをdrawImageにて表示します。

また、動画イメージがすべて読み込まれたかの終了確認がなされます。

動作例

通天閣展望台からの眺望を動画に収録しました。阪神高速14号松原線の向こうに天王寺公園とあべのハルカスを望むことができます。今回めざしたトラックの移動を丸印で追跡してみました。

これらを応用することにより、フェードイン、フェードアウトのエフェクト処理を付加して表現豊かな動画を作り上げることができます。