動画配信の基礎知識
TRANSCRIPT
![Page 1: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/1.jpg)
#azurejp
![Page 2: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/2.jpg)
#azurejp
動画配信の基礎知識
![Page 3: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/3.jpg)
#azurejp
<video> だけの話
![Page 4: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/4.jpg)
#azurejp
メディア配信は、一子相伝の知識!?
![Page 5: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/5.jpg)
#azurejp動画配信のワークフロー
撮影 編集 配信エンコード
![Page 6: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/6.jpg)
#azurejp
これ何 ?
![Page 7: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/7.jpg)
#azurejp
コーデック ?4K?
ビットレート ?
フレーム ???
![Page 8: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/8.jpg)
#azurejp
動画
レ え
が
く
![Page 9: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/9.jpg)
#azurejp
カメラ は画像を連続を「撮影」
![Page 10: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/10.jpg)
#azurejp
コンテナ = ファイル形式 : .mp4, .wmv, asf, flv, mov など
ファイルの構造
映像符号化データ = ビデオ コーデックH.264, HEVC, VC-1, MPEG-2 など
音声符号化データ = オーディオ コーデックAAC, MP3, Windows Media Audio など
![Page 11: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/11.jpg)
#azurejpエンコードは、圧縮技術
動画
音声 データ♬ ♬
画像 データ
mp4, wmv, mov とか
いかに効率的に
小さくできるか ?
![Page 12: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/12.jpg)
#azurejpコーデック。圧縮方式の進化
ファイルサイズ
作成時間
MPEG-2(H.263) H.264 HEVC(H.26
5)
1/41/2
映像の長さ ( 尺 ) の、1 – 2 倍
10xH.264 と比較し
て
殆どのデバイス
で再生可能
![Page 13: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/13.jpg)
#azurejp
解像度
•画像サイズ
ビットレート
•総容量
フレームレート
•動画の滑らかさ
![Page 14: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/14.jpg)
#azurejp
8K UHD4320p (7680 x 4320)
4K UHD2160p (3840 x 2160)
HD1080i/1080p (1920 x
1080)SD480i
(720 x 480)
10 分50MB
200MB 800MB 3.2GB ?
解像度
![Page 15: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/15.jpg)
#azurejpビットレート• bps = bit per
second• 1 秒あたり、どれく
らいのサイズにするか
1 Mbps
5 Mbps
1 秒
ストレージ容量、データ転送量に直結
![Page 16: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/16.jpg)
#azurejpフレームレート
• Frame per second (fps)
• 1 秒あたり、何枚の画像にするか
5 fps
30 fps
1 秒
動画の滑らかさに直結
![Page 17: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/17.jpg)
#azurejp動画ファイルのサイズは ?項目 状態 備考ビットレート 2 Mbps スマートフォンだと大きめ映像の尺 ( 長さ )
30 分• 1 秒間に、 2M bit• 30 分では、 2M x 1,800 秒 = 3,600 M
bit• bit を Byte に = 3,600 M / 8
= 約 450 MB 解像度はサイズには影響なし。画質には大きく影響する
![Page 18: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/18.jpg)
#azurejp動画配信のワークフロー
撮影 編集 配信エンコード
![Page 19: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/19.jpg)
#azurejpPower Point が使えます !スライド = シーン !
出力 = エンコード !
![Page 20: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/20.jpg)
#azurejp動画配信のワークフロー
撮影 編集 配信エンコード
![Page 21: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/21.jpg)
#azurejpファイルを全てダウンロードロードしないと再生できない !?
1.3MB
<img src=“girl.png” />
![Page 22: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/22.jpg)
#azurejpファイルを全てダウンロードロードしないと再生できない !?
450MB<video src=“girl.mp4” />
![Page 23: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/23.jpg)
#azurejp
ライブ配信はどうするの ?ファイル自体が完成していないんですけ
ど・・・
![Page 24: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/24.jpg)
#azurejp動画には「時間」という概念がある
参照フレーム = Iframe
<video src=“girl.mp4” />
Progressive Download
![Page 26: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/26.jpg)
#azurejp動画配信のワークフロー
撮影 編集 配信エンコード
![Page 27: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/27.jpg)
#azurejp(standard) Streaming3Mbps
Streaming Server
HTTP Progressive Download
RTMP / RTSP / MMS etc …
3Mbps
Web ServerHTTP Cache
Adaptive bitrate Streaming over HTTP
3Mbps
Streaming Server
HTTP Cache1Mbps512 kbps256 kbps
No Live!
![Page 28: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/28.jpg)
#azurejp
2 4 6 82 4 6 82 4 6 82 4 6 8
46
8
350.ismv600.ismv
1450.ismv1050.ismv
350kbps600kbps1050kbps1450kbps
Adaptive bitrate streaming over HTTP
Server
セッションを張り続ける必要がない !
![Page 29: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/29.jpg)
#azurejpSmooth Streaming のファイル要素
マニフェストファ
イルビットレート
毎のビデオ / オー
ディオファイルたち
HLS, HDS は別ファイル !!!!
![Page 30: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/30.jpg)
#azurejp世の3つのAdaptive Bitrate Streaming over HTTP
Smooth Streaming Http Live Streaming Http Dynamic Streaming Silverlight Flash
Windows 8 / 8.1iOS
Android 4.0 以降
Flash
Apple Adobe
![Page 31: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/31.jpg)
#azurejpISO 標準 MPEG-DASH
Dynamic Adaptive Streaming over HTTP (DASH)
Smooth Streaming Http Live StreamingHttp Dynamic Streaming
Apple Adobe
![Page 32: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/32.jpg)
#azurejp
業界標準
![Page 33: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/33.jpg)
#azurejp「標準」の価値
リーチ機会の増加• デバイス個別対応の最小
化• 新旧のデバイスに対応し
やすく
ベンダーロックインからの解放• 自分のビジネス計画を優
先• 将来にわたってベンダー
を選べる
開発コスト最小化• 「ユニバーサル プレイ
ヤー」• リリース期間の最小化
![Page 34: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/34.jpg)
#azurejp
![Page 35: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/35.jpg)
#azurejpHTML5 には、これらが不足していました…
Live配信システム
複数ビットレートファイル
ストリーミング コンテンツ保護
MPEG-DASH
Common EncryptionDRM System
![Page 36: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/36.jpg)
#azurejp
![Page 37: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/37.jpg)
#azurejpDASH industry forumhttp://www.dashif.org• DASH 市場展開のプロモーション• 相互互換性や、展開ガイドの公開• 相互互換性テストの促進• 標準化団体や業界団体との連携
![Page 38: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/38.jpg)
#azurejpAdaptive Bitrate Streaming over HTTP の構成要素
フォーマット
Player
Smooth Streaming
PIFF
HLS HDS
DRM
Serv
er
Devi
ce
PlayReady
Silverlight
など
MPEG2-TS
(AES256)
QuickTime
など
F4V / MP4
Adobe Access
Flash Playerなど
データ構造共
通
HTTP
HTTP
Apple Adobe
![Page 39: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/39.jpg)
#azurejpMPEG-DASH の構成要素
フォーマット
Player
Smooth Streaming
PIFF
HLS HDS
DRM
Serv
er
Devi
ce
PlayReady
Silverlight
など
MPEG2-TS
(AES256)
QuickTime
など
F4V / MP4
Adobe Access
Flash Playerなど
データ構造共
通
HTTP
HTTP
Apple Adobe
ISO Based Media File (MP4) /
MPEG2-TS
MPEG-DASHCommon
Encryption +α
HTML5MSE + EME
![Page 40: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/40.jpg)
#azurejpMPEG-DASH Standards• ISO/IEC 23009-1 “Dynamic Adaptive Streaming over HTTP (DASH)”
• マニフェスト と メディアセグメント
• ISO/IEC 14496-12 “Part 12: ISO Base Media File Format, Edition 4” (aka MP4 container)• メディアファイルのデータ構造
• ISO/IEC 23001-7 “Common Encryption in ISO Base Media File Format”• 複数の DRM システムを使うためのパッケージ構造
• W3C Proposal “Media Source Extensions”• Adaptive Bitrate Streaming 実装のための HTML 拡張 API
• W3C Proposal “Encrypted Media Extensions”• DRM システムへブラウザーなどからアクセスするための、 HTML 拡張 API
![Page 41: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/41.jpg)
#azurejpDASH Manifest (MPD) high-level structure (on-demand profile)<MPD profiles="urn:mpeg:dash:profile:isoff-on-demand:2011“/>
<Period><ContentProtection schemeIdUri="urn:mpeg:da…" value="cenc"/><AdaptationSet mimeType=“video/mp4”>
<Representation bandwidth="6000000" width="1920" height="1080“><BaseURL>movie-high.mp4</BaseURL><SegmentBase indexRange=“804-1123”>
<Initialization range=“0-803”></SegmentBase>
</Representation><Representation bandwidth="2962000" width="1280" height="720“>
<BaseURL>movie-medium.mp4</BaseURL><SegmentBase …
</Representation><Representation bandwidth="1427000" width=“856" height="480“>
<BaseURL>movie-low.mp4</BaseURL><SegmentBase …
</Representation></AdaptationSet>
…
![Page 42: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/42.jpg)
#azurejpDASH Manifest (MPD) high-level structure (live profile)<MPD profiles="urn:mpeg:dash:profile:isoff-live:2011“>
<Period><ContentProtection schemeIdUri="urn:mpeg:dash…" value="cenc"/><AdaptationSet mimeType=“video/mp4”>
<SegmentTemplatemedia=“Level($Bandwidth$)/Fragment($Time$)initialization="Level($Bandwidth$)/Fragments(init)><SegmentTimeline>
<S d=3 r=430 /></SegmentTimeline>
</SegmentTemplate><Representation bandwidth="6000000" width="1920" height="1080“/><Representation bandwidth="2962000" width="1280" height="720“/><Representation bandwidth="1427000" width="856" height="480“/>
</AdaptationSet><AdaptationSet mimeType=“audio/mp4”>
<SegmentTemplate …<Representation bandwidth=“160000”/><Representation bandwidth=“64000”/>
![Page 43: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/43.jpg)
#azurejp
Browser
W3C Media Source Extensions- HTML5 拡張- Media Element を制御するための API 定義- Media データを Video/Audio Element へ初期化 / 追加可能にする
<video>
MediaSource
SourceBufferaudio
SourceBuffervideo
src
sourceBuffers
![Page 44: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/44.jpg)
#azurejp
Browser
W3C Encrypted Media Extensions- W3C 勧告の HTML 標準の拡張- DRM システムへのアクセスの API 定義
<video> MSMediaKeys MediaKeySessionmsKeys
Key SystemContent Decryption Module
![Page 45: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/45.jpg)
#azurejpdash.js• DASH Industry Forum の
参考プレイヤー• Web ブラウザーで MPEG-DASH
を使用するための JavaScript の DASH クライアント
• Player: http://dashif.org/reference/players/javascript/index.html
• Source code: • https://github.com/Dash-Industry-Forum/da
sh.js
![Page 46: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/46.jpg)
#azurejpdash.js ベースのクライアント開発• 必要なもの
• dash.all.js ファイル• https://raw.github.com/Dash-Industry-Forum/
• 手順• dash.all.js のリファレンス• <Video> に オブジェクトを追加
• Dash.di.DashContext• MPEG-DASH の MPD への URL 参照
![Page 47: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/47.jpg)
#azurejpdash.js を使った Video Player<html>
<head><title>HTML5 VIDEO</title><script src="dash.all.js"></script><script>// setup the video element and attach it to the Dash playerfunction setupVideo() { var url =
"http://wams.edgesuite.net/media/MPTExpressionData02/BigBuckBunny_1080p24_IYUV_2ch.ism/manifest(format=mpd-time-csf)";
var context = new Dash.di.DashContext(); var player = new MediaPlayer(context); player.startup(); player.attachView(document.querySelector("#videoplayer")); player.attachSource(url);}
window.addEventListener("load", setupVideo, false);</script>
</head>
<body><video controls id="videoplayer" width="80%" height="80%"></video>
</body></html>
![Page 48: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/48.jpg)
#azurejpメディアの標準化
Application (Player)
• HTML5 with Enhancement• Native
Authorization • Video Authorization Profile of IETE OAuth• IETF Simple Web Discovery
Transport • ISO MPEG Dynamic Adaptive Streaming over HTTP
Media Format• ISO Based Media File Format
• UltraViolet Common File Format, Common Streaming Format
Codec • H.264, HEVC• AAC
Encryption • ISO MPEG Common Encryption
![Page 49: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/49.jpg)
#azurejp“HTML5 Premium Media”
http://blogs.windows.com/msedgedev/2015/07/02/moving-to-html5-premium-media/
業界標準技術への移行をDASH, MSE, EME, CENC
Azure Media Services が現在および将来のメディア配信の基盤
![Page 50: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/50.jpg)
#azurejpOS
Cor
eWindows 10 は DASH ネイティブ対応
PlayReady DRM HW/SW
Media Foundation (DASH support)Microsoft EdgeHTML
Microsoft Edge Windows Web App
Your HTML5 Player
![Page 51: 動画配信の基礎知識](https://reader037.vdocuments.mx/reader037/viewer/2022102323/58e4b3e01a28ab1c1f8b5469/html5/thumbnails/51.jpg)
#azurejpMPEG-DASH ご参考情報• DASH-IF reference player http://dashif.org/reference/players/javascript/index.html
• DemosIE11 test drive (http://ie.microsoft.com/testdrive)Netflix player through IE 11 (http://www.netflix.com/)
• BlogMPEG DASH preview from Windows Azure Media Services by John Deutscher Dynamic Packaging with MPEG-DASH live profile streaming support by Mingfei YanMS Open Tech early contributor to open source dash.js community by Microsoft Open TechMPEG-DASH: Making Tracks Toward Widespread Adoption by Streamingmedia.com
• SessionBuilding Media Streaming Apps and Sites Without Plug-Ins Using MPEG-DASH by Daniel Schneider