HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］

2015年3月13日

Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。

H2MD.js | HTML5向けムービー再生ライブラリ

最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。

GIFやH.264に足りないもの

こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細な動画再生に向いていますが、動画そのものを動的に重ね合わせて合成するといったことは困難です。

HTML5対応の動画再生ライブラリ「H2MD.js」とそのコーデックである「H2MD」は、GIFアニメーションよりも高い圧縮率と美しさを備え、H.264よりも柔軟に透過レイヤを用いた複数動画の合成や、音声との同期などの機能を提供。WebサイトやゲームやECサイトなどで、あるいは広告などでコンポーネントとして動画を柔軟に扱いたい、という要望に応えます。

H2MD.jsの仕組みは、HTML5のCanvas要素に対してJavaScriptでデコードした動画をリアルタイムに描画する、というものです。Webの要素として動画を扱えるため、前述の動画合成などに加えて、拡大縮小変形などの加工、動画のポーズやシークなど、アプリケーションから簡単かつ柔軟に動画を操作できます。

透過レイヤを持つ動画を合成できるH2MD.js

さっそくH2MD.jsの例を見てみましょう。次の動画は複数のCanvasを用いて背景の動画の上にキャラクタの動画を重ね合わせています。背景動画は共通部品として使い回し、キャラクタ動画を入れ替えることでさまざまな動画表現を効率的に実現できます。

上記のボタンでキャラクタや背景の表示、非表示を切り替え、H2MDが動画の透過レイヤと重ね合わせの機能を備えていることを確認できるでしょう。表示と非表示はCanvasのスタイル要素であるVisibiltyを切り替えることで実現しています（音声との同期などより詳しいデモは、H2MD.jsの特設サイトで見ることができます）。

こうした機能を用いて、例えば、モバイルのゲーム画面で一部だけをCanvasで描いて動画にする、しかも複数の動画を重ね合わせることでさまざまなパターンを演出する、といったことがH2MD.jsの得意とするところです。

あるいは、ECサイトやキャンペーンサイトなどで特定の商品を紹介する場面では、Webページやアプリケーションの全面に、背景を透過にした商品動画を浮かび上がらせる、といったこともできるでしょう。

こうした例には、以下のようなH2MD.jsの持つ複数の技術的特長が含まれています。

動画における透過レイヤの実現

H2MD.jsのもっとも大きな特徴が、アルファチャネルを用いた透過レイヤの実現です。動画の任意の部分を透過レイヤに設定できるため、効果的に動画を重ね合わせて多彩な動画表現を実現することができます。

複数動画の同時再生、音声との同期

動画の重ね合わせを実現するには複数の動画を同時に再生できなければなりません。H2MD.jsは2つ以上の複数の動画を並行して同時に再生することができます。動画の同期や音声との同期も可能です。

自動再生もH2MD.jsなら可能ですので、ユーザーに再生ボタンを押してもらわなくとも、動画の再生を始めることができます。動画データをロードした後で再生することも、ストリーミングで再生することも可能。

動画の動的な加工、レスポンシブ対応

動画はCanvas上にリアルタイムで描画されていくので、Canvasそのものが持つ機能を用いて拡大縮小、変形、分割などさまざまな加工を動的に行うことができます。PCでは大きな画面で、モバイルでは画面サイズに応じた大きさでと、1つのコードでレスポンシブな画面設計なども可能です。

H2MD.jsはわずか7Kb。専用のエンコーダを用いる

H2MD.jsはHTML5に対応したPCとスマートフォンのWebブラウザで動作します。あらかじめH2MD.js用にエンコードした動画データをWebサーバに配置し、WebブラウザでH2MD.jsのライブラリを読み込んでおくことで使えるようになります。

動画は専用のエンコーダによってあらかじめ専用のデータ形式（H2MD形式）に変換しておきます。変換済みのデータは（画像としては意味の無い）jpeg画像形式となります。変換可能なデータは、AVI、AVI 2.0、連番PNG、連番TIFFなどで、このとき、元データのPNGやTIFFのアルファチャネルが自動的に動画データのアルファチャネルになります。このほか、WindowsのDirectShowFilter機能により、MPEG4動画なども直接変換可能です。

このH2MD形式のデータを、H2MD.jsが専用のアルゴリズムを用いてリアルタイムにデコードし、動画としてCanvasに描画していくわけです。

そのH2MD.jsはサイズが7Kb程度と軽量となっています。

このH2MD.jsを開発したアクセルは、ファブレスの半導体メーカー。グラフィックスやサウンドの制御用LSIなどの研究開発とマーケティング、販売を行っており、その分野で蓄積した画像の圧縮伸長技術やアルゴリズム等の技術をさらにソフトウェア分野において開発を進めたものです。

H2MD.jsはエンコーダなどともに有償で同社から提供される製品です。無償の評価版ライブラリも用意されており、興味のある開発者はぜひH2MDの紹介Webサイトから申し込んでみてください。

≫H2MD.jsのWebサイトへ