Download as PDF, PPTX
Uploaded byGaprot
HTML5 + JavaScriptでDRMつきMPEG-DASHを再生させる
動画配信界隈で話題のMPEFG-DASHとは一体どういう技術なのか？どうやって再生させるか？等について紹介します。
![[社内勉強会]ELBとALBと数万スパイク負荷テスト](https://cdn.slidesharecdn.com/ss_thumbnails/elbalb-160822022623-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[Cloud OnAir] Bigtable に迫る！基本機能も含めユースケースまで丸ごと紹介 2018年8月30日 放送](https://cdn.slidesharecdn.com/ss_thumbnails/1111111-180830075720-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
HTML5 + JavaScriptでDRMつきMPEG-DASHを再生させる
- 1.
- 2.
- 3. 目次 1. MPEG-DASHって何 2. DASH再生を行う 3.DRMつきコンテンツを再生する 4. DRMつきMPEG-DASHを再生する 5. 関連ライブラリ
- 4.
- 5. MPEG-DASHとは ・MPEG ・・・ ご存知エムペグ ・DASH ・・・ DynamicAdaptive Streaming over HTTP 回線の速度に合わせて動的にコンテンツのビットレートを変える技術 ✳ 遅い回線では低画質、速い回線では高画質
- 6.
- 7.
- 8. 通常のvideo再生 video要素の src に動画のパスを設定 <videosrc="sample.mp4"></video> 単純な一本の動画ならこれでOK
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. MSE制御サンプルコード(JavaScript) ①HTTPリクエストでmp4ファイル取得 ②バッファオブジェクトのメソッド呼び出してバイナリを読み込ませる var xhr =new XMLHttpRequest(); xhr.open("GET", url, true); xhr.responseType = "arraybuffer"; xhr.setRequestHeader("Range", “bytes=" + rangeStart + "-" + rangeEnd); xhr.send(null); sourceBuffer.append(new Uint8Array(response));
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. それぞれのタグの意味 ・AdaptationSet 音声 or 映像 <?xmlversion="1.0" encoding="utf-8"?> <MPD> <Period> <AdaptationSet> <Representation> <BaseURL>audio_1.mp4</BaseURL> </Representation> <Representation> <BaseURL>audio_2.mp4</BaseURL> </Representation> <Representation> <BaseURL>audio_3.mp4</BaseURL> </Representation> </AdaptationSet> <AdaptationSet> <Representation>
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. 参考資料 W3C MSE (latest)… http://www.w3.org/TR/media-source/ W3C EME (latest) … http://www.w3.org/TR/encrypted-media/ MS公式サイトPlayReady + EME 処理例 … https://msdn.microsoft.com/en- us/library/windows/apps/dn468979.aspx