H2MDに関しての所感

概要

H2MD     

H2MD (HTML5 HYBRID MOVIE DECODER) に関しての情報を聞く機会があったので、まとめてみた。
ここでは主にWEB向けのH2MD for HTML5に関して述べている。

※おそらく正しくない情報もあり
※実際に触ったり、仕様書を読んだわけではない
※一部サンプルのソースコードやリソースをチラ見して補完

リンク

H2MDとは

簡単に。

  • HTML5上で動画を再生できる
  • 一つの動画ファイルでPCと、スマホ共通で再生させる事が出来る
  • 一度に複数の動画を同期を取って再生できる
  • エンコード方式は、H2MD独自のものを使う
  • 動画のファイルのエンコードはクライアントで行う
  • 動画のファイルのデコードはブラウザ上で再生しながら行う
  • 再生のコントロールはHTML上のJavascriptで行う

H2MDを使うことのメリット・デメリット所感

よさそうなところ

  • 一般的な動画と同じようにちゃんと圧縮される
    • ただの連番画像ではない
      • 1024*1024pxのjpgがスプライトシート化されている
    • 画像が変わる差分の部分だけを更新している(Pフレーム)
      • 前フレームとの差分を見て、必要な部分だけを描画
      • 32*32pxマクロブロック単位
      • 閾値の設定が可能
    • キーフレームを指定できる
      • 自動でも入れられる
  • 任意のフレームを取得できる
    • 映像に合わせて他のアニメーションを演出させたり出来る。
  • 透過が使える
    • 透過情報はpngスプライトシートにまとまっており、canvasで合成している
    • 透過度は0-255
  • スマホ向けに表示できる
    • 一応、H2MDを使用しなくても動画を再生できるが…
      • mp4等の動画はクリックしないと再生できない
      • 途中で止めたりなどの操作は不可能
      • 複数の動画を同時に再生する事は出来ない
    • WEB上でのアニメーションの知識が無くても、動画が作れればなんとかなる
      • Canvasでの描画や、CSS使った専門的なアニメーション知識が不要
    • ソシャゲーなどの演出にも使用できる
      • 透過が使えるため背景・キャラ・UIを組み合わせて表示できる
    • 表示物、表示要素が多いアニメーションに向く
      • 粒子などが細かく多いエフェクト
        • AffterEffectやParticle系で作ったもの
    • 実写物を使ったものに向く
      • カラーインデックスがある訳ではないので、GIFアニメよりも画質は高くなる
  • サポートが国内
    • 日本語が通じる

わるそうなところ

  • エンコードするのにコマンドラインを使用する。UIやアプリが用意されていない
    • デザイナーがエンコードするのはやや敷居が高い
      • エンコードの画質を調整する場合など、作業デザイナーだけで完結し辛い
      • がんばって慣れればなんとか…
    • アップデートや、ソフトが普及すればフリーのものが出てくるかも…
  • 早送りやスキップなどは苦手
    • キーフレームから目的のフレームまでを再現させる為、処理落ちが発生する可能性がある
      • このあたりは一般的な動画と一緒
    • スキップさせたい場合は、スキップ地点にキーフレームを置けばなんとかできそう
  • スマホにも表示できるが、チューニングが必要
    • 古い端末には対応していない
      • 新しい端末を持つユーザーに限られる
    • 動画の尺が長すぎたり、解像度を大きくしすぎたりすると再生が処理落ちする
      • 容量やリクエストも多くなる
    • Canvasを使用している為、バージョンの若いAndroid端末では描画処理が重い
      • 広告などに使う場合、低スペック端末向けには一枚絵を表示する等のカバーが必要
    • スマホ向けに低画質版を作る場合、PC向けと共通の動画ファイルは使用できなくなる
      • エンコードは複数行い、再生は出し分けする必要がある
  • 動画の画像全画面が、目まぐるしく変わるものには向いていない
    • 一般的な動画エンコードと一緒で、差分の範囲が大きかったり色の差が激しいと圧縮されにくい
    • 連番画像を描画するのと、さほど変わらないかもしれない
  • 使用できるのは法人のみ
  • HTML5版の価格は要相談
    • 問い合わせが必要
      • 企業規模やアカウント数で変化する？
    • 参考までに、H2MD for Unityの価格※投稿時点
      • Free : ￥0
      • Indies : 1ユーザー￥25,000/年
      • Pro : 1ユーザー￥300,000/年
  • ドット絵には向かない
    • jpgで圧縮されているので
      • 8倍サイズの動画ならワンチャン…

総評

スマホの紙芝居系演出によさげ。

PC向けでの使いどころ

サンプルのようにポータルサイトの広告には使えるだろうけども、それでCTRがどれだけ上がるかは、なんともいえない。広告をみたユーザーが、全ての動画が連携してるという事を把握するのには時間がかかるだろう。ユーザーに認知しやすくクリックさせやすい動画を作るのにはノウハウが必要そう。このあたり、意欲的に検証できる環境にいるか、有効なデータがないと運用は厳しそう。下地さえ揃えれば、やってみる価値はあると思う。

画面全体が動いて音が鳴るものなどは、どこを押すと停止するか、どこを押すと音量を消せるかユーザーに把握させる必要がある。動画をあちこちに散らばせる場合、マイナスイメージが付かない設計を考えるべき。「なんか動いているけど、音は消せないし停止もできないし」なんて広告は、最悪取り下げられる可能性も。

パチンコのような、動画が主体のPCブラウザゲームに使ってもよさそう。ただ、読み込んだリソースを捨てられないブラウザでどれだけの種類の動画が同ページ内で読み込めるか、これも検証が必要だろう。

ブラウザゲームのオープニングやエンディングに使いたい場合は、普通のH2MD以外の動画でも良い気がする。

PC向けでの有効な使いどころはパッと思いつかなかった。

スマホ向けでの使いどころ

一番の利点は、スマホのブラウザ上で動画再生を管理できる所。なにしろ、ブラウザ上で動画を再生させようとすると、OSのプレイヤーが立ち上がってしまう為だ。再生の管理はプレイヤー上で行い、もどるには×ボタンを押す必要がある。他の要素との連動などもっての他。

ソシャゲで使うのであれば、ガシャやオープニングなど、ここぞで見せたい演出に使うのが一番よいかと思う。スマホ向けにはチューニングが必要だが、ただ劣化させて軽くするだけなら簡単にできる。
ソシャゲなどのエフェクトは、画像の作成にもアニメーション実装にもノウハウが必要だが、動画が扱えるのであればエフェクトだけ外注に作ってもらって実装するのもよさそう。

広告であれば実写系広告に向くのではないだろうか。GIFアニメのバナーでは画質に限界がある為、動画の方が綺麗に出せる。特に映画やドラマ、旅行やアダルト系の広告に向いてるのではないか。
ただ、やはり低スペック端末へのカバーは何かしら用意しなければいけないだろう。

スマホ向け動画視聴サービスとして使うのであれば、ダウンロードされにくいという所も利点なのではないだろうか。

以上

辛口に書いたかも知れないけど、非常に未来があるし期待を持ちたい技術だと感じた。