Web app or Windows
Store app using
JavaScript and HTML
MSE and EME
Trident / IE
DRM
MF
Full Profile
ISO Base media file
format Main (MP4)
MPEG2 TS
Simple
MPEG-2
TS
Main
ISO BMFF
On
Demand
ISO
BMFF
Live
Mime Type
(ftyp)
Movie
Metadata
(moov)
Segment
Index
(sidx)
Movie
Frag #1
(moof)
Media
Data #1
(mdat)
Movie
Frag #2
(moof)
Media
Data #2
(mdat)
....
Mime Type
(ftyp)
Movie
Metadata
(moov)
Segment
Index
(sidx)
PT: 0
PT: 3
PT: 6
Movie
Frag #1
(moof)
Media
Data #1
(mdat)
Movie
Frag #2
(moof)
Media
Data #2
(mdat)
....
Mime Type
(ftyp)
Movie
Metadata
(moov)
Segment
Index
(sidx)
Movie
Frag #1
(moof)
Media
Data #1
(mdat)
Movie
Frag #2
(moof)
Media
Data #2
(mdat)
....
<ContentProtection schemeIdUri="urn:mpeg:dash…" value="cenc"/>
<ContentProtection schemeIdUri="urn:mpeg:da…" value="cenc"/>
Setup
HTTP
Server
1. Create
MediaSource
and set it as src
to the video tag
2. Add source
buffers for audio
and video
3. Download and
append init
segments to
each of them
JavaScript App
JavaScript
mediaSource
<video>
new MediaSource()
video.src = URL.creatObjectURL(mediaSource)
sourceopen event
sourceBuffer
Video
addSourceBuffer( video/mp4 )
XHR to get initSegment
appendBuffer(initSegment_video_quality1)
'updateend' event
'loadedmetadata' event
Playback
HTTP
Server
1. Download and
append data
segment to each
source buffer
2. Keep downloading
and appending as
content plays
3. Also keep removing
to control your buffer
JavaScript App
JavaScript
mediaSource
<video>
XHR to get dataSegment
appendBuffer(dataSegment1_video_quality1)
updateend event
canplay event
play()
XHR to get dataSegment
appendBuffer(dataSegment2_video_quality1)
updateend event
remove(sourceBufferVideo.buffered.start(0), video.currentTime - MAX_BUFFER)
updateend event
sourceBuffer
Video
Switch streams
HTTP
Server
1. Download and
append init
segment for new
quality level
2. Download and
append data
segments at the
new quality level
JavaScript App
JavaScript
mediaSource
<video>
XHR to get initSegment
appendBuffer(initSegment_video_quality2)
'updateend' event
XHR to get dataSegment
appendBuffer(dataSegment3_video_quality2)
updateend event
sourceBuffer
Video
Seek
HTTP
Server
1. currentTime on video
tag being set to new
position
2. Map currentTime to
data segments and
download these
3. Append data
segments for the new
position
JavaScript App
JavaScript
mediaSource
<video>
video.currentTime = a new time position (mapped to dataSegment10)
'seeking' event
map video.currentTime to dataSegment10
XHR to get dataSegment
appendBuffer(dataSegment10_video_quality2)
updateend event
'seeked' event
sourceBuffer
Video
http://ie.microsoft.com/testdrive
Protected Content
1. In response to
msneedKey event,
create MSMediaKeys
object and set it on
the video tag
2. Create a
MediaKeySession
using init data from
msneedkey event
3. In resonse to
mskeymessage event
acquire license from
server and update
mediaKeySession
with response
License
Cloud
Server
JavaScript
mediaKeys
mediaKeySession
<video>
'msneedKey' event w/ initData
new MSMediaKeys("com.microsoft.playready")
msSetMediaKeys(mediaKeys)
createSession(type, initData,...)
'mskeymessage' event w/ key request + default URL + session ID
License Challenge
License Response
update(licenseResponse)
'mskeyadded' event
'canplay' event
play()
Content
Playback
http://dashif.org/reference/players/javascript/index.h
tml
https://github.com/Dash-Industry-Forum/dash.js
Attributes likely to change
http://standards.iso.org/ittf/PubliclyAvailableStandards/index.html
https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html
https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html
http://standards.iso.org/ittf/PubliclyAvailableStandards/index.html
http://www.3gpp.org/ftp/Inbox/LSs_from_external_bodies/ISO_IEC_JTC1_SG29_WG11/29n12313.zip
https://github.com/Dash-Industry-Forum/dash.js/wiki
http://dashif.org/reference/players/javascript/0.2.3/index.html
http://playerframework.codeplex.com/