Submit Search
Upload
HTML5 + JavaScriptでDRMつきMPEG-DASHを再生させる
•
21 likes
•
24,711 views
Gaprot
Follow
動画配信界隈で話題のMPEFG-DASHとは一体どういう技術なのか?どうやって再生させるか?等について紹介します。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 42
Download now
Download to read offline
Recommended
HTML5時代のネット動画技術〜良い子悪い子普通の子(増補改訂版)
HTML5時代のネット動画技術〜良い子悪い子普通の子(増補改訂版)
Teiichi Ota
ライブストリーミングの基礎知識
ライブストリーミングの基礎知識
kumaryu
動画配信の基礎知識
動画配信の基礎知識
Daiyu Hatakeyama
AbemaTVの動画配信を支えるサーバーサイドシステム
AbemaTVの動画配信を支えるサーバーサイドシステム
yuichiro nakazawa
インターネットにおける動画配信の仕組み
インターネットにおける動画配信の仕組み
Ryosuke Kubo
HLSについて知っていることを話します
HLSについて知っていることを話します
Moriyoshi Koizumi
ストリーミングのげんざい
ストリーミングのげんざい
Tetsuya Morimoto
5分でわかるGoのポインタ
5分でわかるGoのポインタ
Y N
Recommended
HTML5時代のネット動画技術〜良い子悪い子普通の子(増補改訂版)
HTML5時代のネット動画技術〜良い子悪い子普通の子(増補改訂版)
Teiichi Ota
ライブストリーミングの基礎知識
ライブストリーミングの基礎知識
kumaryu
動画配信の基礎知識
動画配信の基礎知識
Daiyu Hatakeyama
AbemaTVの動画配信を支えるサーバーサイドシステム
AbemaTVの動画配信を支えるサーバーサイドシステム
yuichiro nakazawa
インターネットにおける動画配信の仕組み
インターネットにおける動画配信の仕組み
Ryosuke Kubo
HLSについて知っていることを話します
HLSについて知っていることを話します
Moriyoshi Koizumi
ストリーミングのげんざい
ストリーミングのげんざい
Tetsuya Morimoto
5分でわかるGoのポインタ
5分でわかるGoのポインタ
Y N
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
DeNA
HTML5でDRMってアリなの?〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
HTML5でDRMってアリなの?〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
Teiichi Ota
AbemaTV が対峙する技術的課題と開発の現場
AbemaTV が対峙する技術的課題と開発の現場
Yusuke Goto
動画配信プラットフォーム on AWS
動画配信プラットフォーム on AWS
Amazon Web Services Japan
目grep入門 +解説
目grep入門 +解説
murachue
僕がつくった 70個のうちの48個のWebサービス達
僕がつくった 70個のうちの48個のWebサービス達
Yusuke Wada
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
オススメの標準・準標準パッケージ20選
オススメの標準・準標準パッケージ20選
Takuya Ueda
より高品質なメディアサービスを目指す ABEMA の技術進化
より高品質なメディアサービスを目指す ABEMA の技術進化
Yusuke Goto
HTTPを理解する
HTTPを理解する
IIJ
Twitterのsnowflakeについて
Twitterのsnowflakeについて
moai kids
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Yahoo!デベロッパーネットワーク
HTTP2 最速実装 〜入門編〜
HTTP2 最速実装 〜入門編〜
Kaoru Maeda
DeNAの大規模ライブ配信基盤を支える技術
DeNAの大規模ライブ配信基盤を支える技術
DeNA
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
Goss入門
Goss入門
ShuyaMotouchi1
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
mganeko
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
mganeko
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
DeNA
HTML5 VIDEO on Chromecast
HTML5 VIDEO on Chromecast
Katsumi Onishi
Perl で作るメディアストリーミングサーバー
Perl で作るメディアストリーミングサーバー
Hideo Kimura
More Related Content
What's hot
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
DeNA
HTML5でDRMってアリなの?〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
HTML5でDRMってアリなの?〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
Teiichi Ota
AbemaTV が対峙する技術的課題と開発の現場
AbemaTV が対峙する技術的課題と開発の現場
Yusuke Goto
動画配信プラットフォーム on AWS
動画配信プラットフォーム on AWS
Amazon Web Services Japan
目grep入門 +解説
目grep入門 +解説
murachue
僕がつくった 70個のうちの48個のWebサービス達
僕がつくった 70個のうちの48個のWebサービス達
Yusuke Wada
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
オススメの標準・準標準パッケージ20選
オススメの標準・準標準パッケージ20選
Takuya Ueda
より高品質なメディアサービスを目指す ABEMA の技術進化
より高品質なメディアサービスを目指す ABEMA の技術進化
Yusuke Goto
HTTPを理解する
HTTPを理解する
IIJ
Twitterのsnowflakeについて
Twitterのsnowflakeについて
moai kids
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Yahoo!デベロッパーネットワーク
HTTP2 最速実装 〜入門編〜
HTTP2 最速実装 〜入門編〜
Kaoru Maeda
DeNAの大規模ライブ配信基盤を支える技術
DeNAの大規模ライブ配信基盤を支える技術
DeNA
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
Goss入門
Goss入門
ShuyaMotouchi1
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
mganeko
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
mganeko
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
DeNA
What's hot
(20)
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
HTML5でDRMってアリなの?〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
HTML5でDRMってアリなの?〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
AbemaTV が対峙する技術的課題と開発の現場
AbemaTV が対峙する技術的課題と開発の現場
動画配信プラットフォーム on AWS
動画配信プラットフォーム on AWS
目grep入門 +解説
目grep入門 +解説
僕がつくった 70個のうちの48個のWebサービス達
僕がつくった 70個のうちの48個のWebサービス達
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
オススメの標準・準標準パッケージ20選
オススメの標準・準標準パッケージ20選
より高品質なメディアサービスを目指す ABEMA の技術進化
より高品質なメディアサービスを目指す ABEMA の技術進化
HTTPを理解する
HTTPを理解する
Twitterのsnowflakeについて
Twitterのsnowflakeについて
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
HTTP2 最速実装 〜入門編〜
HTTP2 最速実装 〜入門編〜
DeNAの大規模ライブ配信基盤を支える技術
DeNAの大規模ライブ配信基盤を支える技術
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Goss入門
Goss入門
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
WebSocketのキホン
WebSocketのキホン
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
Similar to HTML5 + JavaScriptでDRMつきMPEG-DASHを再生させる
HTML5 VIDEO on Chromecast
HTML5 VIDEO on Chromecast
Katsumi Onishi
Perl で作るメディアストリーミングサーバー
Perl で作るメディアストリーミングサーバー
Hideo Kimura
Azure Media Services 大全
Azure Media Services 大全
Daiyu Hatakeyama
HTML5ビデオ導入編
HTML5ビデオ導入編
Yuki Naotori
HTTPとサーバ技術の最新動向
HTTPとサーバ技術の最新動向
Kazuho Oku
Amazon Elastic Transcoder(初心者向け 超速マスター編)JAWSUG大阪
Amazon Elastic Transcoder(初心者向け 超速マスター編)JAWSUG大阪
崇之 清水
ABEMA を次のフェーズへ進化させる技術への取り組み
ABEMA を次のフェーズへ進化させる技術への取り組み
Yusuke Goto
ゆるふわLinux-HA 〜PostgreSQL編〜
ゆるふわLinux-HA 〜PostgreSQL編〜
Taro Matsuzawa
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
mganeko
2015圧縮ゼミ
2015圧縮ゼミ
Takeshi Fujiwara
Hadoop splittable-lzo-compression
Hadoop splittable-lzo-compression
Daiki Sato
NABShow報告:マルチCDNと最新ストリーミングプロトコル
NABShow報告:マルチCDNと最新ストリーミングプロトコル
Tomohiro Matsuzawa
IT エンジニアのための 流し読み Windows 10 - Windows のネットワーク最適化機能
IT エンジニアのための 流し読み Windows 10 - Windows のネットワーク最適化機能
TAKUYA OHTA
Yahoo! JAPAN MeetUp #8 (インフラ技術カンファレンス)セッション②
Yahoo! JAPAN MeetUp #8 (インフラ技術カンファレンス)セッション②
Yahoo!デベロッパーネットワーク
Azure vs aws比較 エンコード ace用
Azure vs aws比較 エンコード ace用
裕之 木下
第1回 html5j TV部 勉強会 MPEG-DASH向けの動画配信。
第1回 html5j TV部 勉強会 MPEG-DASH向けの動画配信。
Daiyu Hatakeyama
Hbbtv v2-for-w3 ckeio-workshop
Hbbtv v2-for-w3 ckeio-workshop
Yoshiharu Dewa
[de:code 2018] ビデオ体験を進化させよう!Media Services で安定した配信のコツと Video AI のポイント
[de:code 2018] ビデオ体験を進化させよう!Media Services で安定した配信のコツと Video AI のポイント
Mourad EL AZHARI
[db tech showcase Tokyo 2015] D13:PCIeフラッシュで、高可用性高性能データベースシステム?! by 株式会社HGSTジ...
[db tech showcase Tokyo 2015] D13:PCIeフラッシュで、高可用性高性能データベースシステム?! by 株式会社HGSTジ...
Insight Technology, Inc.
【 Unity道場 1月 ~LWRPとシェーダー~】軽量レンダーパイプライン、Light Weight Renderer Pipeline…とは
【 Unity道場 1月 ~LWRPとシェーダー~】軽量レンダーパイプライン、Light Weight Renderer Pipeline…とは
Unity Technologies Japan K.K.
Similar to HTML5 + JavaScriptでDRMつきMPEG-DASHを再生させる
(20)
HTML5 VIDEO on Chromecast
HTML5 VIDEO on Chromecast
Perl で作るメディアストリーミングサーバー
Perl で作るメディアストリーミングサーバー
Azure Media Services 大全
Azure Media Services 大全
HTML5ビデオ導入編
HTML5ビデオ導入編
HTTPとサーバ技術の最新動向
HTTPとサーバ技術の最新動向
Amazon Elastic Transcoder(初心者向け 超速マスター編)JAWSUG大阪
Amazon Elastic Transcoder(初心者向け 超速マスター編)JAWSUG大阪
ABEMA を次のフェーズへ進化させる技術への取り組み
ABEMA を次のフェーズへ進化させる技術への取り組み
ゆるふわLinux-HA 〜PostgreSQL編〜
ゆるふわLinux-HA 〜PostgreSQL編〜
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
2015圧縮ゼミ
2015圧縮ゼミ
Hadoop splittable-lzo-compression
Hadoop splittable-lzo-compression
NABShow報告:マルチCDNと最新ストリーミングプロトコル
NABShow報告:マルチCDNと最新ストリーミングプロトコル
IT エンジニアのための 流し読み Windows 10 - Windows のネットワーク最適化機能
IT エンジニアのための 流し読み Windows 10 - Windows のネットワーク最適化機能
Yahoo! JAPAN MeetUp #8 (インフラ技術カンファレンス)セッション②
Yahoo! JAPAN MeetUp #8 (インフラ技術カンファレンス)セッション②
Azure vs aws比較 エンコード ace用
Azure vs aws比較 エンコード ace用
第1回 html5j TV部 勉強会 MPEG-DASH向けの動画配信。
第1回 html5j TV部 勉強会 MPEG-DASH向けの動画配信。
Hbbtv v2-for-w3 ckeio-workshop
Hbbtv v2-for-w3 ckeio-workshop
[de:code 2018] ビデオ体験を進化させよう!Media Services で安定した配信のコツと Video AI のポイント
[de:code 2018] ビデオ体験を進化させよう!Media Services で安定した配信のコツと Video AI のポイント
[db tech showcase Tokyo 2015] D13:PCIeフラッシュで、高可用性高性能データベースシステム?! by 株式会社HGSTジ...
[db tech showcase Tokyo 2015] D13:PCIeフラッシュで、高可用性高性能データベースシステム?! by 株式会社HGSTジ...
【 Unity道場 1月 ~LWRPとシェーダー~】軽量レンダーパイプライン、Light Weight Renderer Pipeline…とは
【 Unity道場 1月 ~LWRPとシェーダー~】軽量レンダーパイプライン、Light Weight Renderer Pipeline…とは
More from Gaprot
AR開発高速化!「CFA」作りました!
AR開発高速化!「CFA」作りました!
Gaprot
Unity + iOS/Android VR ことはじめ
Unity + iOS/Android VR ことはじめ
Gaprot
1201 ギャップロ軍団企画書
1201 ギャップロ軍団企画書
Gaprot
Speech Framework
Speech Framework
Gaprot
SiriKit iOS10
SiriKit iOS10
Gaprot
Proactive Suggestions
Proactive Suggestions
Gaprot
New Notification API in iOS 10
New Notification API in iOS 10
Gaprot
iOS 10 new Camera
iOS 10 new Camera
Gaprot
Aiマッシュアップ委員会 仕様説明資料
Aiマッシュアップ委員会 仕様説明資料
Gaprot
GoF のデザインパターンじゃないけど、よくあるパターン
GoF のデザインパターンじゃないけど、よくあるパターン
Gaprot
Java の Collection 関連について整理してみました
Java の Collection 関連について整理してみました
Gaprot
Salmon Hunt
Salmon Hunt
Gaprot
SONY Camera Remote API
SONY Camera Remote API
Gaprot
「バグあるある」と「仕様変更あるある」一挙大放出SP!
「バグあるある」と「仕様変更あるある」一挙大放出SP!
Gaprot
More from Gaprot
(14)
AR開発高速化!「CFA」作りました!
AR開発高速化!「CFA」作りました!
Unity + iOS/Android VR ことはじめ
Unity + iOS/Android VR ことはじめ
1201 ギャップロ軍団企画書
1201 ギャップロ軍団企画書
Speech Framework
Speech Framework
SiriKit iOS10
SiriKit iOS10
Proactive Suggestions
Proactive Suggestions
New Notification API in iOS 10
New Notification API in iOS 10
iOS 10 new Camera
iOS 10 new Camera
Aiマッシュアップ委員会 仕様説明資料
Aiマッシュアップ委員会 仕様説明資料
GoF のデザインパターンじゃないけど、よくあるパターン
GoF のデザインパターンじゃないけど、よくあるパターン
Java の Collection 関連について整理してみました
Java の Collection 関連について整理してみました
Salmon Hunt
Salmon Hunt
SONY Camera Remote API
SONY Camera Remote API
「バグあるある」と「仕様変更あるある」一挙大放出SP!
「バグあるある」と「仕様変更あるある」一挙大放出SP!
Recently uploaded
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Recently uploaded
(12)
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
HTML5 + JavaScriptでDRMつきMPEG-DASHを再生させる
1.
HTML5 + JavaScriptで DRMつきMPEG-DASHを再生させる
2.
何の話? ・動画配信界隈で話題の MPEG-DASHとは何なのか?どういう技術なのか? → 万人向け ・どうやって再生させるのか → エンジニア向け
3.
目次 1. MPEG-DASHって何 2. DASH再生を行う 3.
DRMつきコンテンツを再生する 4. DRMつきMPEG-DASHを再生する 5. 関連ライブラリ
4.
1.MPEG-DASHって何
5.
MPEG-DASHとは ・MPEG ・・・ ご存知エムペグ ・DASH ・・・ Dynamic
Adaptive Streaming over HTTP 回線の速度に合わせて動的にコンテンツのビットレートを変える技術 ✳ 遅い回線では低画質、速い回線では高画質
6.
MPEG-DASHの利点 回線速い→高画質 回線遅い→低画質 ストリーミング中の回線ビットレート低下による動画停止などを軽減できる 単なるHTTPサーバで実装できる 再生用コンテンツURLが一つ
7.
2.DASH再生を行う
8.
通常のvideo再生 video要素の src に動画のパスを設定 <video
src="sample.mp4"></video> 単純な一本の動画ならこれでOK
9.
MPEG-DASHの場合 エンコード済みの動画ファイルがビットレートごとに存在する! sample_512.mp4 : 低ビットレート sample_1024.mp4 : 中 sample_2048.mp4 : 高 これら三つを、ご家庭のインターネットの回線状況にあわせて 動的に切り替えながら再生する(JavaScript)
10.
どうやって?
11.
イメージ図:普通の再生(固定ビットレート) ブラウザから動画に直アクセスしてvideo要素に表示 mp4
12.
イメージ図:DASH再生 video要素と動画の間にバッファをかませる mp4 mp4 mp4 DASH再生用 のバッファ
13.
イメージ図:DASH(可変ビットレート) mp4 mp4 mp4 DASH再生用 のバッファ 回線状況に応じて、バッファに入れる動画を変える
14.
イメージ図:DASH(可変ビットレート) mp4 mp4 mp4 DASH再生用 のバッファ この制御をJavaScriptで行う!
15.
すごく便利なDASH用バッファ mp4 mp4 mp4 DASH再生用 のバッファ ・バイナリファイルを突っ込むだけで 再生可能にしてくれる ・同じ再生時刻の違うビットレートの バイナリを入れても問題なし ここらへんの仕組み=MSE (Media Source
Extensions) 名前:SourceBuffer
16.
MSE制御 mp4 mp4 mp4 一本の可変ビットレート動画であるかのように再生できる mp4
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.
3.DRMつきコンテンツを再生する
19.
暗号化されたコンテンツを復号する手段が必要 DRMつきmp4 HTML単体では DRMコンテンツを再生できない ?
20.
DRMつきmp4 HTML単体では DRMコンテンツを再生できない CDM (コンテンツ暗号解除モジュール) を使えば復号できる CDM
21.
いろいろあるCDM PlayReady用CDM CDMはDRMの種類によって中身が違う ・PlayReady ・Widevine ・Adobe Primetime Widevine用CDM Primetime用CDM
22.
いろいろあるCDM PlayReady用CDM Widevine用CDM Primetime用CDM 全部同じように使うためのAPI仕様 → EME
23.
CDMとEME PlayReady用CDM EMEのおかげでDRMの種類によらず復号処理ができる Widevine用CDM Primetime用CDM EME EME EME
24.
どのように実装するのか
25.
DRMつきmp4 EMEでのライセンス解決 CDM(EME)を使ってライセンスサーバから復号用の鍵を取得 PlayReady用CDM EME ライセンスサーバ ① ② ③ ④ ⑤
26.
DRMつきmp4 EMEでのライセンス解決 CDM(EME)を使ってライセンスサーバから復号用の鍵を取得 PlayReady用CDM EME ライセンスサーバ ここの制御をJavaScriptで行う!① ② ③ ④ ⑤
27.
EME制御(長いのでコードは省略) ①DRM動画を読み込むと、EME処理開始のイベントが発生 ②EMEの鍵リクエストAPIを呼ぶ ③EMEのイベントでライセンスサーバへのリクエスト内容が通知される ④HTTPリクエストで③の内容をライセンスサーバへ送る ⑤サーバから受け取ったライセンスをEMEのAPIに渡す
28.
4.DRMつきMPEG-DASHを再生させる
29.
DRMつきMPEG-DASH PlayReady用CDM EME ライセンスサーバ mp4 mp4 mp4 DASH再生用 のバッファ MSEとEMEを組み合わせるだけ
30.
DRMつきMPEG-DASH PlayReady用CDM EME ライセンスサーバ mp4 mp4 mp4 DASH再生用 のバッファ 赤枠部分をJSで制御! MSE EME
31.
MPDファイルの実態
32.
構成 MPD対応プレーヤー MPD マニフェスト MP4 MP4 MP4 サーバ
33.
構成 MPD対応プレーヤー MPD マニフェスト MP4 MP4 MP4 サーバ HTML5 プレーヤから アクセスされるもの コンテンツの実体 HTTP
34.
MPEG-DASHの実体 → XMLファイル <?xml version="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>
35.
それぞれのタグの意味 ・Period トップレベル要素 開始時間 動画の長さ シーン、チャプター、広告を分ける <?xml version="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>
36.
それぞれのタグの意味 ・AdaptationSet 音声 or 映像 <?xml
version="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.
それぞれのタグの意味 ・Representation 同じコンテンツを違うエンコードされたもの スクリーンサイズ 動画ビットレート コーデック 回線速度で切り替えるのはココ <?xml version="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>
38.
関連ライブラリ
39.
ライブラリ ・dash.js … https://github.com/Dash-Industry-Forum/dash.js/wiki 一番有名なMPEG-DASH再生ライブラリ これを入れて素直に動いたら最高! ・bitdash … http://www.dash-player.com/ 有償
40.
注意点 ・MSE、EMEはバージョンがいくつもありバージョンごとにAPIの仕様が結構違う ブラウザに実装されているバージョンに注意しましょう 例)MSE(2012年ころ)のappendメソッド → 最近のバージョンでは appendBufferメソッドになってる
41.
まとめ ・JavaScriptをがんばって粘り強く実装する ・アダプティブストリーミングをする仕組みがMSE … バッファにつっこむ ・DRM処理をするAPIがEME … ライセンスサーバとのやりとり ・MSE + EME
でDRMつきMPEG-DASH再生
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
Download now