スマートフォンブラウザで広告やブラウザゲームの手段として動画演出を用いると、ユーザーの目を惹き、高い訴求効果をもたらします。例えば、動画広告市場はスマートフォンを中心に拡大を続け、2022年には2,918億円に達する見込みとの調査結果があります(※)。このように、スマートフォンにおける動画演出は年々需要が高まっており、ハードウェアや通信環境の進化にあわせて、通常のウェブページでも動画を用いたリッチな表現が増えてくると考えられます。広告主・ウェブ開発者であれば是非押さえておきたいところです。

※ 参考記事「サイバーエージェント、国内動画広告の市場調査を実施

しかし、スマートフォンのブラウザによってはインライン再生ができない、透明部分のある動画(アルファ付き動画)が使えない等の制約がありました。こういった技術的問題を解決し、スマートフォンブラウザ・デスクトップブラウザにおいて効果的な演出を可能にするのが、株式会社アクセルリッチラボ株式会社が提供しているソフトウェアムービーコーデック「H2MD」です

まずは、H2MDを使ったスマートフォンブラウザ用のデモをご覧ください。動画がウェブページ内で自動再生することができ、HTML要素の上に重なりながら表示されます。いずれも従来では難しかった動画表現が実現されており、高い訴求効果が見込めます。

本記事ではH2MDの特徴や、利用用途、類似の動画再生技術に対するメリットについて紹介します。

videoタグと比較するH2MDの動画再生

H2MDとは、動画データを画像ファイルとJavaScriptファイルに変換し、HTML5 Canvasを用いて再生する技術。次に示すのは、videoタグとH2MDの動画再生機能の比較です。自動再生やインライン再生は、最新のiOS / Androidのブラウザでしか対応していません。透過ムービー再生については、iOS / Android共に対応しておらず(※)、H2MDならではのメリットと言えます

※2017年1月24日現在

160124_h2md_vs_video

H2MDは現在一般的に使われている下記のブラウザに対応しており(参照:「H2MD | FAQ」)、多くのユーザーが閲覧できます。

  • iOS 7以上 (Safari)
  • Android 4.4以上 (標準ブラウザ・Chrome)
  • Internet Explorer 11以上
  • Google Chrome 40以上
  • Firefox 最新版
  • Safari 8以上

H2MDの活用シーン

H2MDは、どのようなシーンで活用できるのでしょうか? 透過やインライン再生が可能であるため、次のような用途が挙げられます。

動画演出として

H2MDの強みの一つであるアルファ付き動画(透明部分のある動画)を用いると、コンテンツへの没入感を高めることができ、需要の高まる動画演出として効果的です

冒頭で示したデモの演出は、リッチな動画表現として活用できます。

160124_h2md_demo4

また、ページ内のちょっとしたアクセントや、他ページへの導線としても効果的です。次のデモは、二人の男性が会話している動画ですが、透過が有効なためコンテンツにマッチした印象を与えます。思わずクリックしたくなるような演出です。

ブラウザゲームの演出として

ブラウザゲームの演出としてH2MDを用いている例です。透過部分のある動画を複数重ね、タッチ操作に合わせてJavaScriptで動画を制御しています。BGM・SEも再生されていることに注目ください。モーションやエフェクトは、JavaScriptで作成できますが、Adobe After Effectsといったモーション作成ソフトで作成し、H2MDへ変換するという手順にすることで、より短時間で開発できます。

160124_h2md_demo5

インライン再生用途の動画コンテンツとして

iOS 7やAndroid 4.4に搭載されている古いブラウザで動画を閲覧する場合、インライン再生に対応していないため、全画面で表示する必要がありました。デスクトップブラウザと同じくインライン再生したいという需要に応えられず、諦めた方も多いのではないでしょうか? H2MDを用いれば、古いブラウザでも動画のインライン再生を実現できます

160124_h2md_inline_play

H2MDを用いたインライン再生のデモをご覧ください。動画をクリックすると、フルスクリーンにはならず、インラインで再生できていることが確認できます。iPod Touch等の古いiOS端末でも同じように動作します。

次のページでは、アニメGIF、APNGといった、類似の動画技術と比較したH2MDのメリットについて紹介します。

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