HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）

HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）

1. 1. HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版） 太田禎一 | フリーエバンジェリスト サッポロクリエイティブキャンプ 2016 #3 | 2016.06.25 Photo: EMILIE RHAUPP https://www.flickr.com/photos/emraps/ 良い子 悪い子 普通の子
2. 2. おまえダレ？  放送・出版・デジタルメディアを中心に、いろいろなお客様に最新テク ノロジーや、そのよさをお伝えする仕事をしています  イベント・カンファレンスでお話したりも、ごくたまにします 2 ＋
3. 3. このセッションの主旨 Web標準技術の進歩によって「プラグイン無し」でネット動画をだいたい どこでも視聴できるようになってきてますが、じゃあ実際それらがどんな 仕組みで動いているのか、これからさらにどのように進化するのか、ご存 知ないかたも多いのではないでしょうか。 本セッションでは、コンテンツの送り手としてはたぶん知っておいたほう がよい、動画配信技術の最前線についてお話しします。 3
4. 4. セッション進行  第一部：モダンなネット動画技術の基礎知識  動画配信テクノロジーの移り変わりとHTML5  HTML5 VIDEO要素  HTTPアダプティブストリーミング  HLSとMPEG-DASH  HTML5 MSEとEME  第二部：イマドキのネット動画はどんな仕組みでできているのか？  ブラウザの「開発者ツール」で中身を覗いてみる  エンコーディング＆パッケージングツール  JavaScriptライブラリ  第三部：失敗しない技術選択とは？  これからのネット動画技術のゆくえ  とるべき技術戦略  Q＆A 4
5. 5. 第一部：モダンなネット動画技術の基礎知識
6. 6. 動画配信テクノロジーの移り変わり 6 デスクトップ 拡大期 デバイス乱立 1997〜 黎明期 デスクトップ二強 まるっと統一 しちゃう？
7. 7. それというのも、2010年にこんなことがありましてね… 7 Link : http://japanese.engadget.com/2010/04/29/flash/
8. 8. 当時Jobsがスゲーんだぞって言ってたのがHTML5 VIDEO要素 8 Link : http://www.w3schools.com/html/html5_video.asp これ、いまやすべてのモダンブラウザでサポートされています。再生方式 は「プログレッシブダウンロード」っていいます。読み込んだ端からとり あえず再生していく方式ですが、欠点が：  帯域にあわせた画質の調整とかできない（モバイル環境に向かない）  ライブできない（致命的） ブラウザによって 対応するコーデック が異なる場合があった ため複数の動画 ファイルを指定
9. 9. Apple WWDCの動画（LIVEもあり）もHTML5 VIDEO要素で配信 9 でもChromeで見ると「Safariで見ろや」って怒られる…なぜ？ Link : https://developer.apple.com/videos/play/wwdc2016/101/
10. 10. Appleの「HTML5」動画はズルいVIDEO要素を活用 10 m3u8って なんだべ！ このm3u8というのはHLS形式の動画への参照なんです。Safari以外のブ ラウザではサポートされてない、独自ネイティブ実装のズルいVIDEO要素 なので、PCだとmacOS Safari以外で見られない*んです。でも：  その代わりiOS環境では問題なく見られる（ブラウザ、アプリともに）  Android環境でもまぁだいたい見られる（主にアプリ） *実際にはMicrosoft社のEdgeブラウザでもズルくサポートしてます
11. 11. HLSとは？ 11 https://developer.apple.com/streaming/examples/ ぶった切られた 動画ファイル （セグメントまたは フラグメント） 拡張子は.TS  m3u8という動画ファイルのプレイリスト（マニフェスト）に書かれているとお りに、10秒程度の長さにぶった切った動画コンテンツを次々と連続再生するの がHTTP Live Streaming（HLS）  HTMLやJPEGと同じHTTPでブラウザにダウンロードします  その名の通りライブ可能！でもVODにも対応してます  帯域に合わせて最適なビットレートに切り替え再生できる 「HTTPアダプティブストリーミング」の一種です すごく単純な マスタープレイリスト m3u8の中身 すごく単純な メディアプレイリスト m3u8の中身 マスタープレイリスト メディアプレイリスト メディアセグメント
12. 12. HTTPアダプティブストリーミング
13. 13. いま主流な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
14. 14. で、なんで2つあるんだどっちがいいんだって話になるわけです 14 デファクト＝事実標準と デジュール＝合議標準の たたかい HLS （デファクト） DASH （デジュール）
15. 15. 「どっちか」に統一できない理由 15 普及率なめんな。 HLS 一部のPCブラウザ とiOSとAndroid でしか使えない （後述） DASH Appleの デバイス環境 で使えない （後述）
16. 16. Apple社は自社プラットフォームにおいてHLS以外を許容しない Appleデバイスでは、 携帯電話ネットワークを介した 10分を超える尺の動画はすべてHLS方式で アプリに配信しなければならないと Appleが決めている。* また、iOSで唯一許容されているブラウザ（Safari）は HLS以外のHTTPストリーミングに対応しない。 それにあわせてHLS対応する Apple以外のデバイスも普及し、デファクト標準となった。 16 * https://developer.apple.com/library/prerelease/content/qa/qa1767/_index.html
17. 17. Apple以外の「業界」プレーヤーは「HTML5＋MPEG-DASH」推し しかしながら、 Apple以外の業界全体としては、 合議標準であるところのMPEG-DASHの サブセットとその他既存規格をベースに 利用することで少なくとも同じ配信方式、 同じファイルフォーマット、異なるDRMの 相互運用手段を「HTML5」上に構築し、 動画ストリーミング配信を標準化しようという 動きになっている。 17
18. 18. 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がルーツ (！) 規格策定に 参加
19. 19. 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 実際に配信する動画・音声データの中身は同じ
20. 20. 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 なんでも アリ
21. 21. 例）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/
22. 22. 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含む) 準拠 ガイドライン 策定！ * Current DASH-IF Members (82, as of Jun. 2016) http://dashif.org/members/ Googleは2014年にDASH-IFに参加
23. 23. WebにおけるDASHの実現 = Web標準の拡張 業界の主要プレーヤーの大部分が DASH-AVC/264という 相互運用規格に合意できたため、 ブラウザベンダーは各々 「Web標準」仕様を拡張し、DASHが 稼働する受け皿を構築しはじめた。 いまやiOS Safariを除くモダンブラウザの ほぼすべて（macOS Safariも含め）が DASH.jsなどJavaScriptライブラリの 助けを借りてDASHを再生できるようになっている。 23
24. 24. Media Source Extensions (MSE) 「ズル」をせずに JavaScriptとの合わせ技で HTTPストリーミングを 実現するために必須 プレミアム動画配信に必須な「Web標準」メディア技術 24 コンテンツ保護ナシで HTTPストリーミングをする にはこれだけでオッケー (HLS/HDS/DASHにもJSで対応可) 両方が揃わないと HTML5でプレミアム コンテンツのHLS/DASHは 配信できない Encrypted Media Extensions (EME) Content Decryption Module (CDM) と連携。暗号で保護 されたコンテンツを再生 するために必須 プレミアムコンテンツを 扱うケースは一般的でないので このセッションでは こっちのほうあまり 取り扱いません
25. 25. Media Source Extensionsの役割  4〜10秒ごとのセグメントに分割・断片化 (パッケージ化) された動画ま たは音声サンプルをHTTP受信し、決められた順番どおり継ぎあわせ Video要素またはAudio要素としてブラウザに渡す  動画サンプルと音声サンプルを組み合わせて再生する  各動画サンプルのダウンロード速度から接続帯域のトレンドを検知し、 動的により大きいまたは小さいビットレートのサンプルに切り替える 「アダプティブビットレート」に対応できる（要JavaScript）  従来はFlash PlayerやSilverlightのようなプラグインがなければできな かった継ぎ合わせ機能をブラウザ自体でサポートしようという試み  これが実装されていれば、原理上JavaScriptとの合わせ技でHLSも MPEG-DASHもHDSもSmoothも、HTTPストリーミング技術はすべて対 応可能になる  DRMやコンテンツ保護にはまったく関係ないが、モバイル環境への適応 やネットワーク帯域の節約にとっては非常に重要な機能 25
26. 26. 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）
27. 27. ブラウザにおけるMSEの対応状況：2016年6月現在65.6% 27 Link: http://caniuse.com/#feat=mediasource これな…
28. 28. ブラウザにおけるMSE/EMEおよびメディア形式の対応状況 28 Link: https://bitmovin.com/browser-capabilities/
29. 29. ブラウザにおけるHLS/DASHの対応状況（Flashえらい。良い子） 29 Link: https://bitmovin.com/browser-capabilities/
30. 30. 第二部：イマドキのネット動画はどんな仕組みでできているのか？ ※ 2016年6月の現状。ちょいちょい変わったりします。
31. 31. ブラウザの「開発者ツール」で中身を覗いてみる 31 Icon by la-fabrique-créative from Noun Project
32. 32. NHK WORLD LIVE：HLS＋Flash Player 32 Link: http://www3.nhk.or.jp/nhkworld/en/live/ .m3u8 →HLSプレイリスト .ts →セグメント
33. 33. TVer（フジテレビ）：RTMP＋Flash Player 33 Link: http://tver.jp/ セグメントが 見当たらない
34. 34. TVer（日テレ）：HDS＋Flash Player（Brightcove） 34 Link: http://tver.jp/ .f4m →HDSマニフェスト .mp4 →セグメント
35. 35. LINE LIVE：HLS＋Flash Player（FlashHLS） 35 Link: https://live.line.me/r/channels/21/broadcast/5739 .m3u8 →HLSプレイリスト .ts →セグメント
36. 36. Abema TV：HLS＋HTML5（THEOplayer） 36 Link: https://abema.tv/now-on-air/mahjong .m3u8 →HLSプレイリスト .ts →セグメント
37. 37. Hulu：DASH＋Flash Player 37 Link: http://www.hulu.jp/ .mpd →DASHマニフェスト .ism →セグメント （MP4）
38. 38. YouTube：DASH＋HTML5 38 Link: https://www.youtube.com/watch?v=YbYWhdLO43Q MPDマニフェストや セグメントはわかりやすい かたちで見えない ツールが必要。例： https://github.com/ ChristianKreuzberger/ extract-youtube-mpd
39. 39. Vimeo：DASH＋HTML5 39 Link: https://vimeo.com/ondemand/rolodexofhate/144927592 .json →DASHマニフェスト .m4s →セグメント
40. 40. Twitter：HLS＋HTML5 40 Link: https://twitter.com/punchesbears/status/748415755146797056 .m3u8 →プレイリスト .ts →セグメント
41. 41. Facebook：DASH＋HTML5 41 Link: https://www.facebook.com/buzzfeedtastyjapan/videos/1634260560168227/ マニフェストファイル はわかりやすいかたち では見えない。 セグメントは.mp4
42. 42. エンコーディング＆パッケージングツール
43. 43. FFMPEG 43 Link: https://ffmpeg.org/ …メンドい
44. 44. クラウドベースのエンコーダー 44 Link: http://www.encoding.com/ らくちん（encoding.comは無料プランあり）
45. 45. JavaScriptライブラリ
46. 46. DASH/HLS対応のJavaScriptライブラリ（代表的なもの） 46 オープンソース・無料 有料* DASH HLS & DASH DASH HLS HLS ＆ DASH HLS ＆ DASH HLS HLS & DASH * 有料のものの多くは開発者向けに無料のライセンスを提供している
47. 47. 第三部：失敗しない技術選択とは？
48. 48. これからのネット動画技術のゆくえ
49. 49. これからのネット動画技術 動画再生環境の分断化 （例：Androidバージョンによる違いなど） はゆっくりと解消に向かう AppleとDASH陣営は互いに歩み寄る姿勢を見せ、 DRMも含めた相互運用の実現に意欲を見せる どんな環境でも動画を安定して再生できることはふたたび 「あたりまえ」のことになり、動画は真にコモディティ化する 動画ビジネスにおける差別化要因は 「解析」と「オーディエンスデータ活用」による 「収益化」にシフトしていく* 49 * 【宣伝】Adobe Primetime http://www.adobe.com/jp/marketing-cloud/primetime-tv-platform.html
50. 50. 配信ワークフロー統一への大きな一歩  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/
51. 51. 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も含めた 配信フロー統一 ※ 個人的な予想です
52. 52. とるべき技術戦略
53. 53. HTML5動画へのアプローチ：とるべき技術戦略（1/4） DRMさえ考慮しなければ、 デスクトップとモバイルどちらも 最新ブラウザすべてに比較的シンプルに 「HTML5」動画を配信できる。 問題はHLSでいくかDASHでいくか。 53
54. 54. 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」はありえない
55. 55. HTML5動画へのアプローチ：とるべき技術戦略（3/4） エンコーディング・パッケージングは 「HTML5」の場合とにかく面倒くさいので クラウドベースのツールがおすすめ。 （encode.comとかZencoderとかAzMSとかAWSとか） 55
56. 56. HTML5動画へのアプローチ：とるべき技術戦略（4/4） …それらを全部プラットフォーム側で やってくれるYouTubeやVimeo はたまたBrightcoveやOoyalaは 相当便利なので、オプションとして 最初に考慮すべき。 56
57. 57. おまけ：Platform or Not？動画配信へのアプローチを考えてみる 57 動画配信プラットフォーム 長所 小中規模プレミアム動画配信 コンテンツ保護可能 サーバーの維持・管理不要 CMS・解析機能が付く サポートが提供される 短所 有料サービス (従量) 複雑なカスタマイズは不可能 社内システム構築には不適 カスタム構築 長所 大規模プレミアム動画配信 コンテンツ保護可能 カスタマイズ性最強 社内システム構築にも適する 短所 有償ライセンス＋従量課金 開発リソースが必要 サーバーの維持・管理が必要 CMS・解析などは別途実装 動画共有サイト 長所 予算ゼロも可能 ソーシャルと親和性高い サーバーを持つ必要なし スケール性高い 短所 サポートほぼゼロ 広告外すのが有料だったり コンテンツ保護不可能 社内システム構築には不適
58. 58. わかりやすく言い換えると… 58 動画配信プラットフォーム プレミアム動画を配信したい。 そこそこの規模の動画配信を 開発ナシで収益化したい。 動画視聴計測も欲しいし 配信管理も楽したい。 そこそこお金は使える！ カスタム構築 プレミアム動画を配信したい。 大規模な動画配信を 計測を含めて完全に自分で 構築・コントロールし、 収益化をMAXにしたい！ ある程度の初期投資は 厭わない！ 動画共有サイト しらん広告やロゴ入っても 構わないからとにかく お金使わない方向で！ コンテンツ保護とか なくてオッケー。 世界中に動画が共有 されてもむしろそれ歓迎！
59. 59. さいごにこれ、言わせてください 普及率なめんな。 59 はいはい…
60. 60. Q＆A