HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）
太田禎一 | フリーエバンジェリスト
サッポロクリエイティブキャンプ 2016 #3 | 2016.06.25
Photo: EMILIE RHAUPP https://www.flickr.com/photos/emraps/
良い子 悪い子 普通の子

おまえダレ？
 放送・出版・デジタルメディアを中心に、いろいろなお客様に最新テク
ノロジーや、そのよさをお伝えする仕事をしています
 イベント・カンファレンスでお話したりも、ごくたまにします
2
＋

このセッションの主旨
Web標準技術の進歩によって「プラグイン無し」でネット動画をだいたい
どこでも視聴できるようになってきてますが、じゃあ実際それらがどんな
仕組みで動いているのか、これからさらにどのように進化するのか、ご存
知ないかたも多いのではないでしょうか。
本セッションでは、コンテンツの送り手としてはたぶん知っておいたほう
がよい、動画配信技術の最前線についてお話しします。
3

セッション進行
 第一部：モダンなネット動画技術の基礎知識
 動画配信テクノロジーの移り変わりとHTML5
 HTML5 VIDEO要素
 HTTPアダプティブストリーミング
 HLSとMPEG-DASH
 HTML5 MSEとEME
 第二部：イマドキのネット動画はどんな仕組みでできているのか？
 ブラウザの「開発者ツール」で中身を覗いてみる
 エンコーディング＆パッケージングツール
 JavaScriptライブラリ
 第三部：失敗しない技術選択とは？
 これからのネット動画技術のゆくえ
 とるべき技術戦略
 Q＆A
4

第一部：モダンなネット動画技術の基礎知識

動画配信テクノロジーの移り変わり
6
デスクトップ
拡大期
デバイス乱立
1997〜
黎明期
デスクトップ二強
まるっと統一
しちゃう？

それというのも、2010年にこんなことがありましてね…
7
Link : http://japanese.engadget.com/2010/04/29/flash/

当時Jobsがスゲーんだぞって言ってたのがHTML5 VIDEO要素
8
Link : http://www.w3schools.com/html/html5_video.asp
これ、いまやすべてのモダンブラウザでサポートされています。再生方式
は「プログレッシブダウンロード」っていいます。読み込んだ端からとり
あえず再生していく方式ですが、欠点が：
 帯域にあわせた画質の調整とかできない（モバイル環境に向かない）
 ライブできない（致命的）
ブラウザによって
対応するコーデック
が異なる場合があった
ため複数の動画
ファイルを指定

Apple WWDCの動画（LIVEもあり）もHTML5 VIDEO要素で配信
9
でもChromeで見ると「Safariで見ろや」って怒られる…なぜ？
Link : https://developer.apple.com/videos/play/wwdc2016/101/

Appleの「HTML5」動画はズルいVIDEO要素を活用
10
m3u8って
なんだべ！
このm3u8というのはHLS形式の動画への参照なんです。Safari以外のブ
ラウザではサポートされてない、独自ネイティブ実装のズルいVIDEO要素
なので、PCだとmacOS Safari以外で見られない*んです。でも：
 その代わりiOS環境では問題なく見られる（ブラウザ、アプリともに）
 Android環境でもまぁだいたい見られる（主にアプリ）
*実際にはMicrosoft社のEdgeブラウザでもズルくサポートしてます

HLSとは？
11
https://developer.apple.com/streaming/examples/
ぶった切られた
動画ファイル
（セグメントまたは
フラグメント）
拡張子は.TS
 m3u8という動画ファイルのプレイリスト（マニフェスト）に書かれているとお
りに、10秒程度の長さにぶった切った動画コンテンツを次々と連続再生するの
がHTTP Live Streaming（HLS）
 HTMLやJPEGと同じHTTPでブラウザにダウンロードします
 その名の通りライブ可能！でもVODにも対応してます
 帯域に合わせて最適なビットレートに切り替え再生できる
「HTTPアダプティブストリーミング」の一種です
すごく単純な
マスタープレイリスト
m3u8の中身
すごく単純な
メディアプレイリスト
m3u8の中身
マスタープレイリスト
メディアプレイリスト メディアセグメント

HTTPアダプティブストリーミング

いま主流なHTTPアダプティブストリーミング技術はこの2つ
13
Apple HTTP Live Streaming
(HLS)
Apple社の独自規格
(IETFに仕様を気ままに提出・公開*)
Dynamic Adaptive Streaming over HTTP
(DASH)
最後発で登場した規格
国際標準化団体ISOの規格として認可
厳密に言うとどちらも
HTML5ではなく、
HTML5 VIDEO要素
ほか (後述) と組み合わせて
使える技術
* 2016年5月現在仕様ドラフトのバージョンは19、HLS自体のバージョンは7つにわたる http://bit.ly/28VH978

で、なんで2つあるんだどっちがいいんだって話になるわけです
14
デファクト＝事実標準と
デジュール＝合議標準の
たたかい
HLS
（デファクト）
DASH
（デジュール）

「どっちか」に統一できない理由
15
普及率なめんな。
HLS
一部のPCブラウザ
とiOSとAndroid
でしか使えない
（後述）
DASH
Appleの
デバイス環境
で使えない
（後述）

Apple社は自社プラットフォームにおいてHLS以外を許容しない
Appleデバイスでは、
携帯電話ネットワークを介した
10分を超える尺の動画はすべてHLS方式で
アプリに配信しなければならないと
Appleが決めている。*
また、iOSで唯一許容されているブラウザ（Safari）は
HLS以外のHTTPストリーミングに対応しない。
それにあわせてHLS対応する
Apple以外のデバイスも普及し、デファクト標準となった。
16
* https://developer.apple.com/library/prerelease/content/qa/qa1767/_index.html

Apple以外の「業界」プレーヤーは「HTML5＋MPEG-DASH」推し
しかしながら、
Apple以外の業界全体としては、
合議標準であるところのMPEG-DASHの
サブセットとその他既存規格をベースに
利用することで少なくとも同じ配信方式、
同じファイルフォーマット、異なるDRMの
相互運用手段を「HTML5」上に構築し、
動画ストリーミング配信を標準化しようという
動きになっている。
17

HTTPストリーミングの系譜。ご先祖は共通
18
2006
Move Adaptive Stream
(MAS)
2009
HTTP Live Streaming
(HLS)
2008
Smooth Streaming
(SS)
2010
HTTP Dynamic Streaming
(HDS)
2012
Dynamic Adaptive Streaming
over HTTP
(MPEG-DASH)
影響
影響
影響
資本関係
MPEG2-TS*
ISO BMFF*
規格の主要部分はSSをベースに
* ファイルフォーマット。MPEG2-TSは「放送系」の既存規格を改造。ISO MBFFはApple社のQuickTimeがルーツ (！)
規格策定に
参加

HTTPアダプティブストリーミングの比較
19
HLS DASH SS HDS
マニフェスト
ファイル M3U8
プレイリスト
MPD（Media
Presentation
Description）＝
XML
XML XML
フラグメントの
コンテナ形式
TS MP4 MP4 MP4
ビデオコーデック H.264 H.264/VP9など VC-1/H.264 H.264
オーディオ
コーデック
MP3/HE-AAC MP3/HE-AACなど WMA/HE-AAC MP3/HE-AAC
実際に配信する動画・音声データの中身は同じ

MPEG-DASH規格とDRMやコーデックはじつは関係ない
ここでちょっとMPEG-DASH規格*が
カバーする範囲を明確にしとこう。
(結構せまゆる)
20
データの
ストリーミング
方法
(DASH)
マニフェスト
ファイルの形式
(MPD)
メディア
ファイルの
フォーマット
(BMFF & M2TS)
DRM
通信プロトコル コーデック
ビットレート
制御のアルゴ
リズム
じつはこのあたり
MPEG-DASHに
規定してない
VP8/VP9
でもHEVC
でもOK
じつは拡張
可能なので
WebM
でもOK
* ISO/IEC 23009-1:2014 http://standards.iso.org/ittf/PubliclyAvailableStandards/c065274_ISO_IEC_23009-1_2014.zip
規定
してる
TCP/IP
じゃなくても
OK
なんでも
アリ

例）DASH-AVC/264
相互運用ガイドライン22
Video Codec : H.264/AVC
Audio Codec: HE-AACv2
File Format: ISO BMFF
DRM: Common Encryption (CENC)
DASH: BMFF Live & On-Demand
Subtitles: SMPTE Timed Text
このままだと
またバラバラに！
MPEG-DASHの相互運用性にDASH-AVC/264が果たす役割と
Ultravioletが及ぼした影響
21
MPEG2-TS
Simple
MPEG2-TS
Main
MPEG-DASH
Full Profile
ISO BMFF
Main
ISO BMFF
Live
ISO BMFF
On-Demand
プロファイル多すぎ
あとMPEG-DASHで
決めてないこと多すぎ
Video & Audio Codec
DRM etc.,
DECE
Common File Format1
(CFF)
強い影響
(てゆうかほぼ
そのまんま)
1Common File Format & Media Formats http://bit.ly/1aARJZv 2DASH-IF Inter-op docs http://dashif.org/guidelines/

MPEG-DASHとDASH-AVC/264（業界標準）とHLS (Apple)
22
工業分野の国際規格
を策定するための組織
(MPEGは下部組織)
MPEG-DASH
を策定
インターネットで
使用される各種技術の
標準化を推進する
ための組織
Webで使用される
各種技術の標準化を
推進するための組織
DASH-IFは
MPEG-DASHの
相互運用性向上を
めざす業界団体
現在82社*
HLS "Pantos Draft"
仕様を気ままにうp
DASH WGメンバー
Dash Industry Forum
(DASH-IF) には不参加
連携
連携
「HTML5」SME &
EME規格の起案・
推進者
DASH-AVC/264
DASH-IFが策定した
MPEG-DASH運用の
ガイドライン
(DRM含む)
準拠
ガイドライン
策定！
Googleは2014年にDASH-IFに参加
* Current DASH-IF Members (82, as of Jun. 2016) http://dashif.org/members/

WebにおけるDASHの実現 = Web標準の拡張
業界の主要プレーヤーの大部分が
DASH-AVC/264という
相互運用規格に合意できたため、
ブラウザベンダーは各々
「Web標準」仕様を拡張し、DASHが
稼働する受け皿を構築しはじめた。
いまやiOS Safariを除くモダンブラウザの
ほぼすべて（macOS Safariも含め）が
DASH.jsなどJavaScriptライブラリの
助けを借りてDASHを再生できるようになっている。
23

Media Source
Extensions (MSE)
「ズル」をせずに
JavaScriptとの合わせ技で
HTTPストリーミングを
実現するために必須
プレミアム動画配信に必須な「Web標準」メディア技術
24
コンテンツ保護ナシで
HTTPストリーミングをする
にはこれだけでオッケー
(HLS/HDS/DASHにもJSで対応可)
両方が揃わないと
HTML5でプレミアム
コンテンツのHLS/DASHは
配信できない
Encrypted Media
Extensions (EME)
Content Decryption Module
(CDM) と連携。暗号で保護
されたコンテンツを再生
するために必須
プレミアムコンテンツを
扱うケースは一般的でないので
このセッションでは
こっちのほうあまり
取り扱いません

Media Source Extensionsの役割
 4〜10秒ごとのセグメントに分割・断片化 (パッケージ化) された動画ま
たは音声サンプルをHTTP受信し、決められた順番どおり継ぎあわせ
Video要素またはAudio要素としてブラウザに渡す
 動画サンプルと音声サンプルを組み合わせて再生する
 各動画サンプルのダウンロード速度から接続帯域のトレンドを検知し、
動的により大きいまたは小さいビットレートのサンプルに切り替える
「アダプティブビットレート」に対応できる（要JavaScript）
 従来はFlash PlayerやSilverlightのようなプラグインがなければできな
かった継ぎ合わせ機能をブラウザ自体でサポートしようという試み
 これが実装されていれば、原理上JavaScriptとの合わせ技でHLSも
MPEG-DASHもHDSもSmoothも、HTTPストリーミング技術はすべて対
応可能になる
 DRMやコンテンツ保護にはまったく関係ないが、モバイル環境への適応
やネットワーク帯域の節約にとっては非常に重要な機能
25

Encrypted Media Extensionの役割
 DRMサーバーから取得した復号鍵で
暗号化された動画サンプルを復号化
するための枠組み
 ただし、EME仕様では具体的なDRM技術の
種類や実装方法については決められていない
 DRMクライアント機能を持ったソフトウェアモジュールはContent
Decryption Module (CDM) 、つまり「プラグイン」というかたちで各
DRMベンダーから提供される
 プラグインの規格は存在しないのでブラウザごとに違う実装になる
 ブラウザベンダーの特性として、特定のCDMだけをデフォルトで組み込
んだり排除を行いがち。とくにApple
 ChromeにはWidevine Modular CDMが、IEにはPlayReady CDMが、
そしてFirefoxにはPrimetime CDM（＋Widevine Modular CDMを予
定）が提供されている
26
ChromeはWidevine Modularに対応（YouTube）

ブラウザにおけるMSEの対応状況：2016年6月現在65.6%
27
Link: http://caniuse.com/#feat=mediasource
これな…

ブラウザにおけるMSE/EMEおよびメディア形式の対応状況
28
Link: https://bitmovin.com/browser-capabilities/

ブラウザにおけるHLS/DASHの対応状況（Flashえらい。良い子）
29
Link: https://bitmovin.com/browser-capabilities/

第二部：イマドキのネット動画はどんな仕組みでできているのか？
※ 2016年6月の現状。ちょいちょい変わったりします。

ブラウザの「開発者ツール」で中身を覗いてみる
31
Icon by la-fabrique-créative from Noun Project

NHK WORLD LIVE：HLS＋Flash Player
32
Link: http://www3.nhk.or.jp/nhkworld/en/live/
.m3u8
→HLSプレイリスト
.ts
→セグメント

TVer（フジテレビ）：RTMP＋Flash Player
33
Link: http://tver.jp/
セグメントが
見当たらない

TVer（日テレ）：HDS＋Flash Player（Brightcove）
34
Link: http://tver.jp/
.f4m
→HDSマニフェスト
.mp4
→セグメント

LINE LIVE：HLS＋Flash Player（FlashHLS）
35
Link: https://live.line.me/r/channels/21/broadcast/5739
.m3u8
→HLSプレイリスト
.ts
→セグメント

Abema TV：HLS＋HTML5（THEOplayer）
36
Link: https://abema.tv/now-on-air/mahjong
.m3u8
→HLSプレイリスト
.ts
→セグメント

Hulu：DASH＋Flash Player
37
Link: http://www.hulu.jp/
.mpd
→DASHマニフェスト
.ism
→セグメント
（MP4）

YouTube：DASH＋HTML5
38
Link: https://www.youtube.com/watch?v=YbYWhdLO43Q
MPDマニフェストや
セグメントはわかりやすい
かたちで見えない
ツールが必要。例：
https://github.com/
ChristianKreuzberger/
extract-youtube-mpd

Vimeo：DASH＋HTML5
39
Link: https://vimeo.com/ondemand/rolodexofhate/144927592
.json
→DASHマニフェスト
.m4s
→セグメント

Twitter：HLS＋HTML5
40
Link: https://twitter.com/punchesbears/status/748415755146797056
.m3u8
→プレイリスト
.ts
→セグメント

Facebook：DASH＋HTML5
41
Link: https://www.facebook.com/buzzfeedtastyjapan/videos/1634260560168227/
マニフェストファイル
はわかりやすいかたち
では見えない。
セグメントは.mp4

エンコーディング＆パッケージングツール

FFMPEG
43
Link: https://ffmpeg.org/
…メンドい

クラウドベースのエンコーダー
44
Link: http://www.encoding.com/
らくちん（encoding.comは無料プランあり）

JavaScriptライブラリ

DASH/HLS対応のJavaScriptライブラリ（代表的なもの）
46
オープンソース・無料
有料*
DASH
HLS & DASH
DASH
HLS
HLS ＆ DASH
HLS ＆ DASH
HLS
HLS & DASH
* 有料のものの多くは開発者向けに無料のライセンスを提供している

第三部：失敗しない技術選択とは？

これからのネット動画技術のゆくえ

これからのネット動画技術
動画再生環境の分断化
（例：Androidバージョンによる違いなど）
はゆっくりと解消に向かう
AppleとDASH陣営は互いに歩み寄る姿勢を見せ、
DRMも含めた相互運用の実現に意欲を見せる
どんな環境でも動画を安定して再生できることはふたたび
「あたりまえ」のことになり、動画は真にコモディティ化する
動画ビジネスにおける差別化要因は
「解析」と「オーディエンスデータ活用」による
「収益化」にシフトしていく*
49
* 【宣伝】Adobe Primetime http://www.adobe.com/jp/marketing-cloud/primetime-tv-platform.html

配信ワークフロー統一への大きな一歩
 WWDC 2016でAppleがDASH互換（Common Media Application Format
＝CMAF）のfMP4（Fragmented MP4）に対応した新しいHLS仕様を発表
 DRMを考慮しなければ、DASHのMPDファイルとHLSのm3u8ファイルの両
方を用意し、同一の動画セグメントファイルを参照して再生できるように。
つまりメディアファイルを2セット用意する必要がなくなる
 ただしDRMの暗号化方式におけるDASHとHLSの非互換性は解消していない
50
Link: https://developer.apple.com/videos/play/wwdc2016/504/

PC版IE/Chromeは当面Flash Player (Primetime DRM) の100%同梱を継続
備考：動画配信テクノロジー (DRM & 配信形式) の長期トレンド
51
PC版・モバイル版ともにHTML5向けDRMモジュールの搭載が進む。
ただしすべてDRM技術はバラバラ
HTML5向けDRMモジュールの違いを
吸収する技術 (MPEG-CENC) が普及
Apple以外の企業は配信形式としてMPEG-DASH (コンテナ：MP4) を強力に推進
HLS (コンテナ：MPEG2-TS) はデファクトスタンダードであり続けAppleはDASH対応に消極的
CMAF対応(MP4採用)
DRM以外の配信フロー統一
Apple
主要
ブラウザ
DASH
陣営 HLSをネイティブサポートしない
デバイスが増加（Android/Chromecastとか）
暗号化形式で
GOOG/MSFTが歩み寄り
Appleデバイスにおける
CMAF対応環境が90%超え
DRMも含めた
配信フロー統一
※ 個人的な予想です

とるべき技術戦略

HTML5動画へのアプローチ：とるべき技術戦略（1/4）
DRMさえ考慮しなければ、
デスクトップとモバイルどちらも
最新ブラウザすべてに比較的シンプルに
「HTML5」動画を配信できる。
問題はHLSでいくかDASHでいくか。
53

HTML5動画へのアプローチ：とるべき技術戦略（2/4）
ワークフロー選択肢1＝オールHLS：
macOS SafariとiOS/tvOS＝HLS（ネイティブ）
HLSネイティブ環境以外もHLS（JWPlayer等）
ワークフロー選択肢2=HLS＆DASH：
macOS SafariとiOS/tvOS＝HLS（ネイティブ）
HLSネイティブ環境以外はDASH（DASH.js等）
※Flashへのフォールバックが可能かどうかも重要
（旧IEなどレガシーブラウザ対応…）
54
こんご数年間は残念ながらHLSを無視できないため「オールDASH」はありえない

HTML5動画へのアプローチ：とるべき技術戦略（3/4）
エンコーディング・パッケージングは
「HTML5」の場合とにかく面倒くさいので
クラウドベースのツールがおすすめ。
（encode.comとかZencoderとかAzMSとかAWSとか）
55

HTML5動画へのアプローチ：とるべき技術戦略（4/4）
…それらを全部プラットフォーム側で
やってくれるYouTubeやVimeo
はたまたBrightcoveやOoyalaは
相当便利なので、オプションとして
最初に考慮すべき。
56

おまけ：Platform or Not？動画配信へのアプローチを考えてみる
57
動画配信プラットフォーム
長所
小中規模プレミアム動画配信
コンテンツ保護可能
サーバーの維持・管理不要
CMS・解析機能が付く
サポートが提供される
短所
有料サービス (従量)
複雑なカスタマイズは不可能
社内システム構築には不適
カスタム構築
長所
大規模プレミアム動画配信
コンテンツ保護可能
カスタマイズ性最強
社内システム構築にも適する
短所
有償ライセンス＋従量課金
開発リソースが必要
サーバーの維持・管理が必要
CMS・解析などは別途実装
動画共有サイト
長所
予算ゼロも可能
ソーシャルと親和性高い
サーバーを持つ必要なし
スケール性高い
短所
サポートほぼゼロ
広告外すのが有料だったり
コンテンツ保護不可能
社内システム構築には不適

わかりやすく言い換えると…
58
動画配信プラットフォーム
プレミアム動画を配信したい。
そこそこの規模の動画配信を
開発ナシで収益化したい。
動画視聴計測も欲しいし
配信管理も楽したい。
そこそこお金は使える！
カスタム構築
プレミアム動画を配信したい。
大規模な動画配信を
計測を含めて完全に自分で
構築・コントロールし、
収益化をMAXにしたい！
ある程度の初期投資は
厭わない！
動画共有サイト
しらん広告やロゴ入っても
構わないからとにかく
お金使わない方向で！
コンテンツ保護とか
なくてオッケー。
世界中に動画が共有
されてもむしろそれ歓迎！

さいごにこれ、言わせてください
普及率なめんな。
59
はいはい…

Q＆A