アニメGIF、APNGと比較してもH2MDは便利

動画の自動再生・インライン再生・透過処理は、類似の再生技術の連番PNG画像やアニメGIF、アニメーションPNG(APNG)でも対応しています。しかし、H2MDを用いた動画の場合は、他の技術に比べていくつかのメリットがあります。

横864px・縦600pxの8秒の動画を、連番PNG画像・アニメGIF・APNG・H2MDへ変換した際の、ファイル数やファイルサイズ、透過等の機能の面から比較しました。他の再生手法と比べて、H2MDはファイルサイズが小さく多機能であることがわかります。

160124_h2md_vs_other_movie

※ アニメGIFで透過処理を行うと、ジャギーが目立ち、綺麗に表示されません

H2MDのファイル数は一つにすることもできますが、複数に分けることでストリーミング再生のようなことが可能になり、他の面も含め、他の技術よりも便利なフォーマットであることがわかります。

サンプルで学ぶH2MDの使い方

本記事オリジナルの簡単なサンプルで、H2MDの使い方を紹介します。

1. H2MDエンコーダーの利用方法

まずは、表示したい動画をH2MDへ変換する必要があります。その際に必要なのがエンコーダーです。H2MDは株式会社アクセルが技術提供をしていますが、ウェブ上で変換できるツールをリッチラボにて提供中です。利用したい場合は、リッチラボ株式会社にお問い合わせください。

変換後、H2MD用の画像ファイルと付加情報(JavaScriptファイル)が生成されます。注目すべきは、元の動画が1コマずつ書き出されているのではなく、フレーム間予測を利用し、前フレーム情報から差分がある部分のみが画像として書き出されていることです。これにより、1コマずつ画像を書き出した場合よりも、軽量なファイルとして動画を取り扱えます。

160124_h2md_convert

書き出されたファイル一式は次のとおりです。

2. HTML・CSSコードの記述

H2MDの動画の準備が完了したら、ブラウザで表示するためのHTMLとJavaScriptコードを記述します。動画の再生だけであれば、次のように数行のコードで可能です。

(中略)
<!-- H2MDのライブラリを読み込みます。 -->
<script src="libs/h2md.min.js"></script>
<script>
// DOMの準備ができたら処理を実行します。
  window.addEventListener("DOMContentLoaded", function () {
    // H2MDを初期化します。
    var instance = new H2MD();

    // 動画を再生するcanvas要素を指定します。
    instance.canvas("canvas");

    // H2MD動画を読み込みます。「◯◯.h2md」の部分を指定します。
    instance.open('./h2md/movie.h2md', function () {
      // 動画の読み込みに成功したら、再生を開始します。
      instance.play();
    });
});
</script>
(中略)
<!-- 動画を再生するcanvas要素です。要素のID、動画の幅と高さを指定します。 -->
<canvas id="canvas" width="640" height="700"></canvas>

スマートフォンブラウザで表示すると、動画が再生されます。canvas要素を絶対配置にし他の要素の上に来るようにレイアウトすれば、動画が透過されているのがわかります。


160124_h2md_tutorial

H2MDを使ってスマホサイトにリッチな体験を

今回紹介したH2MDを使うと、スマートフォンブラウザにおける制限を回避しつつ、高品質の動画表現が実現できます。筆者はJavaScriptだけでモーショングラフィックを用いた表現を行うことが多いですが、H2MDを使うとより没入感のある動画表現ができて、非常に興味深く感じています。特に透過を用いた動画表現は自前のコードだけでは技術的な難易度が高いため、H2MDを用いたときの手軽さに驚きました

H2MDに興味を持ち、自身のウェブコンテンツでも使用したいと感じた方、より多くの導入事例を知りたい方は、是非リッチラボ株式会社までお問い合わせください。

本記事はリッチラボ株式会社提供のタイアップ記事です