株式会社アクセル

スマホでアルファ動画が使えるH2MDを使って30分でWEBムービー演出を作る

2017年2⽉16⽇ ＠DeveloperSummit 2017

株式会社アクセル

リッチラボ株式会社

2

● H2MDとはなにか？

● 株式会社アクセルが開発した動画コーデック

● 圧縮技術で連番画像と⽐べて動画容量を⼤幅削減

● アルファ（透過）ムービーが扱える

3

まずはH2MDのデモをご覧下さい

4

● 「H2MD」 ＝ 動画コーデックJavaScriptのH2MDデコードライブラリを提供しており（＊）、 WEBページ内で⾃由に動画データ（H2MDデータ）を再⽣・制御できます ※ページ内インライン再⽣も簡単に再⽣可能

ページ内で3つのアルファムービーを同期して再⽣している例（H2MD WEBサイト）※別製品でUnity版もあります

5

● 連番画像と⽐べて動画容量を⼤幅圧縮

横640px・縦700pxの8秒のアルファ付き動画

形式 容量 ファイル数

⾮圧縮 77.5MB 1

PNG連番 23.6 MB 248

H2MD 1.58MB（＊1） 22（＊2）

（＊2）エンコード設定によりファイルを少なくする事も出来ます（＊1）FPS設定や画質設定などによりさらに容量を削減可能です

6

● アルファ（透過）ムービーが扱えるアルファムービーとは？    → PNGなどで利⽤される「透過⾊（アルファ）」を持ったムービーデータ  → 活⽤することで演出の開発・実装が、容易かつ単純になります

7

続いて、H2MDのエンコードに関して ご説明します

© Rich Lab Co., Ltd.

H2MD形式へのエンコードについてリッチラボ株式会社 高田 健介

© Rich Lab Co., Ltd.

自己紹介• 高田健介 (リッチラボ株式会社 デザイナー) • 普段はリッチ広告のディレクション、コンテ作成、開発業務等 • これから紹介するH2MDエンコーダー “Rich Lab Encoder” でも開発に参加

9

バナーを クリック

こんなことを やっています

© Rich Lab Co., Ltd.

これからご紹介すること: 動画をH2MDに変換する方法と

パラメータの設定

10

© Rich Lab Co., Ltd.

H2MDへの変換はEncoderを使います

11

MP4, AVI(アルファ有／無),

MOV(アルファ有／無)等

H2MD

アップロード ダウンロード

• 指定の動画フォーマット以外のものをエンコードする場合や、アルファ無しの動画をアルファ付きの動画にする場合は、動画編集ソフトでの作業が必要になります。

• その他PNGの連番画像の入力にも対応しています

動画をエンコード

© Rich Lab Co., Ltd.

Demo

12

© Rich Lab Co., Ltd.

エンコードの際にできること

13

• ファイルの選択 • パラメータの設定

• クオリティ • FPS • ブロックサイズ • アルファビット • イントラサイズ

• (エンコードを待つ) • ダウンロードする

© Rich Lab Co., Ltd.

エンコードの際にできること

14

• ファイルの選択 • パラメータの設定

• クオリティ • FPS • ブロックサイズ • アルファビット • イントラサイズ

• (エンコードを待つ) • ダウンロードする

© Rich Lab Co., Ltd.

クオリティ=画像の綺麗さ• 640x360, FPS 15, ブロックサイズ 16, アルファビット 0, 42秒の動画

15

90 50 15

15.24MB 3.05MB 1.01MB

クオリティ

© Rich Lab Co., Ltd. 16

H2MD再生の仕組み

動画格子状に切られた画像

© Rich Lab Co., Ltd. 17

“ブロックサイズ” とは

ブロックサイズ 小 ブロックサイズ 大

© Rich Lab Co., Ltd.

ブロックサイズの画質に与える影響

18

ブロックサイズ大・小で エンコードしたファイルの比較動画

© Rich Lab Co., Ltd.

一方で再生パフォーマンスへの影響もある

19

8 16 32

1

ブロックサイズ

処理回数の比 (理論値･ブロックサイズ32を1とした場合)

416

© Rich Lab Co., Ltd. 20

ブロックサイズの影響まとめ

端末の要求スペック高 低

動きの滑らかさ◯ △

ブロックサイズ8 64

© Rich Lab Co., Ltd.

アルファビット=アルファの画質

21

4 6 8

16段階 64段階 256段階

アルファビット

© Rich Lab Co., Ltd.

パラメータの設定についてまとめ

•各パラメータの調整が柔軟 •かつ、主に3つのパラメータの調整だけすれば

良い ➔ 狙った表現が簡単に実現できます

•素材や見せ方により適切な数値が異なります

22

© Rich Lab Co., Ltd.

パラメータ調整の例例) ドロップシャドウの入った動画等、

不透明度のグラデーションがあるもの ▶ アルファビットは高め(4~6) ▶ クオリティはその分低く ▶ (ブロックサイズは再生性能が許す限り小さく)

例) PC向けに15秒のTVCMをきれいに出したい ▶ アルファビットは0 ▶ クオリティは容量が許す範囲で大きく ▶ ブロックサイズは再生性能が許す限り小さく

23

© Rich Lab Co., Ltd.

エンコードしたファイルを 実装する方法について

24

25

H2MD ライブコーディング

26

STEP1 : 元素材をH2MD形式に変換する

27

STEP２ : HTMLページ内に再⽣する        Canvasを設置する

28

STEP３ : JavaScriptで再⽣する

29

最後に、活⽤事例をご紹介します

© Rich Lab Co., Ltd.

H2MDの活用事例

30

© Rich Lab Co., Ltd.

DemoA.Webページ上にposition: fixedな動画を置く B.クリックで枠から飛び出す動画 C.ブラウザゲームでの利用例

※各例、是非スマートフォンでご覧ください

31

A B C

© Rich Lab Co., Ltd.

採用事例•テレビ局 番組特集サイト

• ダイジェスト映像をインライン再生(音声有)

•大手ゲームメーカー プロモーションサイト • オープニングムービー

•製菓メーカー イベント特設サイト • スマートフォンのカメラで撮った画像を映像化

•他多数

32

© Rich Lab Co., Ltd.

H2MDに関してのお問い合わせ• 詳しい情報等気になる方はAsk the Speaker(この会場を出て

右方向)までお越し下さい。

• Encoderのご利用につきましてはRich Labにお問い合わせ下さい • 「リッチラボ」で検索、もしくは下記メールアドレスへ

richlab-info@mail.yahoo.co.jp • Encoderのテストアカウントも発行可能です

33