SlideShare a Scribd company logo

HTML5 and Video Streaming Vol.1

Yuki Mizuno, profile picture
Yuki Mizuno

- The document describes the structure and format of MP4 files, which serve as multimedia containers. - MP4 files are based on the ISO Base Media File Format standard and are composed of a series of boxes containing audio, video and metadata. - Common boxes include ftyp, moov, trak, mdia, minf, smhd, vmhd, hdlr and mdat, with the mdat box containing the actual media data.

Technology
1 of 47
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. HTML5 and Video Streaming 1 Vol.1
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.2 ×
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.3 <video src="BigBuckBunny_320x180.mp4"></video>
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License.
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.5 😆
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.6 MP4
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.7 MP4
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.8 HTML5 Media Source Extension Encrypted Media Extension Clear Key Widevine ISO-Base Media File Format Fragmented MP4 HTMLMediaElement MPEG-4 Part 10 Advanced Video Coding MPEG-DASHContent Decryption Module MediaKeySession JSON Web Key WebCrypto Autoplay Policy Media Engagement IndexTimed Text Markup Language Secure Context PlayReady Common Encryption HTTP Live Streaming Adaptive Bitrate Digital Rights Management ECMAScript 2015 Persistence License KeySystem SourceBuffer HEVC FairPlay Streaming 2.0 emsg ID3 WebVTT MPEG-TS TextTrack
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. • Adaptive Bitrate • Content Decryption Module • MediaKeySession • Encrypted Media Extension • Common Encryption • Source Buffer • Media Source Extension • MPEG-DASH • HTTP Live Streaming 9 MP4
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.10 HTML5 Media Source Extension Encrypted Media Extension Clear Key Widevine ISO-Base Media File Format Fragmented MP4 HTMLMediaElement MPEG-4 Part 10 Advanced Video Coding MPEG-DASHContent Decryption Module MediaKeySession JSON Web Key WebCrypto Autoplay Policy Media Engagement IndexTimed Text Markup Language PlayReady Common Encryption HTTP Live Streaming Adaptive Bitrate Digital Rights Management ECMAScript 2015 Persistence License KeySystem SourceBuffer HEVC FairPlay Streaming 2.0 emsg ID3 WebVTT MPEG-TS Secure Context TextTrack
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. History of Movie File 11 And Browser Plug-in
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. FLV 12 1990 2000 20202010 AVI WMV MJPEG MP4 MOV SWF ??? 3GP
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.This slide by mzyy94 and HTML5 icon by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Other icons, don’t meet the threshold of originality, are in the public domain. 1990 2000 20202010 AVI WMV MJPEG MP4 SWF ??? Windows Media Player FLV 3GP Silverlight ™ Microsoft® MOV 2014
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. An MP4 Video 14
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.15 MP4
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. MP4 File Format • A/V Container Format • De facto standard on the Web • Based on ISO BMFF • ISO/IEC 14496-14 Standard • Formed as a series of Boxes MP4 16
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. A/V Container Format 17 MP4 H.264 + AACH.264 + AAC H.264 + MP3 H.265 + AAC AAC
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. De facto standard on the Web 18 All Modern Browsers may Play MP4
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Based on ISO BMFF 19 MOV MP4 3GP ISO Base Media File Format Common +Extension
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. ISO/IEC 14496-14 Standard 20 http://standards.iso.org/ittf/PubliclyAvailableStandards/c068960_ISO_IEC_14496-12_2015.zip Publicly Available Reference number ISO/IEC 14496‐12:2015(E) © ISO/IEC 2015 INTERNATIONAL STANDARD ISO/IEC 14496-12 Fifth edition 2015‐12‐15 Information technology — Coding of audio- visual objects — Part 12: ISO base media file format Technologies de l'information — Codage des objets audiovisuels — Partie 12: Format ISO de base pour les fichiers médias
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. ISO/IEC 14496-12:2015(E) 4 Object-structured File Organization 4.1 File Structure Files are formed as a series of objects, called boxes in this specification. All data is contained in boxes; there is no other data within the file. This includes any initial signature required by the specific file format. – c068960_ISO_IEC_14496-12_2015.pdf p.6 21
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. “Type a quote here.” 22 ISO/IEC 14496-12:2015(E) Figure 1 — Simple interchange file 5.1.3 Content Creation During content creation, a number of areas of the format can be exercised to useful effect, particularly: the ability to store each elementary stream separately (not interleaved), possibly in separate – c068960_ISO_IEC_14496-12_2015.pdf p.9
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.23 !!!!!!!!!"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! | audio.mp4 !!!!!!!!!#!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 00000000 | 0000 001c 6674 7970 6973 6f6d 0000 0200 6973 6f6d 6973 6f32 6d70 3431 0000 0260 ....ftypisom....isomiso2mp41...` 00000020 | 6d6f 6f76 0000 006c 6d76 6864 0000 0000 0000 0000 0000 0000 0000 03e8 0000 002f moov...lmvhd.................../ 00000040 | 0001 0000 0100 0000 0000 0000 0000 0000 0001 0000 0000 0000 0000 0000 0000 0000 ................................ 00000060 | 0001 0000 0000 0000 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0000 ................@............... 00000080 | 0000 0000 0000 0000 0000 0000 0000 0003 0000 01ec 7472 616b 0000 005c 746b 6864 ....................trak...tkhd 000000a0 | 0000 0003 0000 0000 0000 0000 0000 0002 0000 0000 0000 002f 0000 0000 0000 0000 ......................./........ 000000c0 | 0000 0001 0100 0000 0001 0000 0000 0000 0000 0000 0000 0000 0001 0000 0000 0000 ................................ 000000e0 | 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0024 6564 7473 0000 001c ........@..............$edts.... 00000100 | 656c 7374 0000 0000 0000 0001 0000 002f 0000 0000 0001 0000 0000 0164 6d64 6961 elst.........../...........dmdia 00000120 | 0000 0020 6d64 6864 0000 0000 0000 0000 0000 0000 0000 ac44 0000 0800 55c4 0000 ... mdhd...............D....U... 00000140 | 0000 002d 6864 6c72 0000 0000 0000 0000 736f 756e 0000 0000 0000 0000 0000 0000 ...-hdlr........soun............ 00000160 | 536f 756e 6448 616e 646c 6572 0000 0001 0f6d 696e 6600 0000 1073 6d68 6400 0000 SoundHandler.....minf....smhd... 00000180 | 0000 0000 0000 0000 2464 696e 6600 0000 1c64 7265 6600 0000 0000 0000 0100 0000 ........$dinf....dref........... 000001a0 | 0c75 726c 2000 0000 0100 0000 d373 7462 6c00 0000 6773 7473 6400 0000 0000 0000 .url ........stbl...gstsd....... 000001c0 | 0100 0000 576d 7034 6100 0000 0000 0000 0100 0000 0000 0000 0000 0200 1000 0000 ....Wmp4a....................... 000001e0 | 00ac 4400 0000 0000 3365 7364 7300 0000 0003 8080 8022 0002 0004 8080 8014 4015 ..D.....3esds........"........@. 00000200 | 0000 0000 01f4 0000 01f3 f905 8080 8002 1210 0680 8080 0102 0000 0018 7374 7473 ............................stts 00000220 | 0000 0000 0000 0001 0000 0002 0000 0400 0000 001c 7374 7363 0000 0000 0000 0001 ....................stsc........ 00000240 | 0000 0001 0000 0002 0000 0001 0000 001c 7374 737a 0000 0000 0000 0000 0000 0002 ................stsz............ 00000260 | 0000 0173 0000 0174 0000 0014 7374 636f 0000 0000 0000 0001 0000 002c 0000 02ef ...s...t....stco...........,.... 00000280 | 6d64 6174 2110 0520 a41b ffc0 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 mdat!.. ........................ 000002a0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002c0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002e0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000300 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000320 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000340 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000360 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000380 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 37a7 0000 0000 0000 ........................7.......
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. !!!!!!!!!"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! | audio.mp4 !!!!!!!!!#!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 00000000 | 0000 001c 6674 7970 6973 6f6d 0000 0200 6973 6f6d 6973 6f32 6d70 3431 0000 0260 ....ftypisom....isomiso2mp41...` 00000020 | 6d6f 6f76 0000 006c 6d76 6864 0000 0000 0000 0000 0000 0000 0000 03e8 0000 002f moov...lmvhd.................../ 00000040 | 0001 0000 0100 0000 0000 0000 0000 0000 0001 0000 0000 0000 0000 0000 0000 0000 ................................ 00000060 | 0001 0000 0000 0000 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0000 ................@............... 00000080 | 0000 0000 0000 0000 0000 0000 0000 0003 0000 01ec 7472 616b 0000 005c 746b 6864 ....................trak...tkhd 000000a0 | 0000 0003 0000 0000 0000 0000 0000 0002 0000 0000 0000 002f 0000 0000 0000 0000 ......................./........ 000000c0 | 0000 0001 0100 0000 0001 0000 0000 0000 0000 0000 0000 0000 0001 0000 0000 0000 ................................ 000000e0 | 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0024 6564 7473 0000 001c ........@..............$edts.... 00000100 | 656c 7374 0000 0000 0000 0001 0000 002f 0000 0000 0001 0000 0000 0164 6d64 6961 elst.........../...........dmdia 00000120 | 0000 0020 6d64 6864 0000 0000 0000 0000 0000 0000 0000 ac44 0000 0800 55c4 0000 ... mdhd...............D....U... 00000140 | 0000 002d 6864 6c72 0000 0000 0000 0000 736f 756e 0000 0000 0000 0000 0000 0000 ...-hdlr........soun............ 00000160 | 536f 756e 6448 616e 646c 6572 0000 0001 0f6d 696e 6600 0000 1073 6d68 6400 0000 SoundHandler.....minf....smhd... 00000180 | 0000 0000 0000 0000 2464 696e 6600 0000 1c64 7265 6600 0000 0000 0000 0100 0000 ........$dinf....dref........... 000001a0 | 0c75 726c 2000 0000 0100 0000 d373 7462 6c00 0000 6773 7473 6400 0000 0000 0000 .url ........stbl...gstsd....... 000001c0 | 0100 0000 576d 7034 6100 0000 0000 0000 0100 0000 0000 0000 0000 0200 1000 0000 ....Wmp4a....................... 000001e0 | 00ac 4400 0000 0000 3365 7364 7300 0000 0003 8080 8022 0002 0004 8080 8014 4015 ..D.....3esds........"........@. 00000200 | 0000 0000 01f4 0000 01f3 f905 8080 8002 1210 0680 8080 0102 0000 0018 7374 7473 ............................stts 00000220 | 0000 0000 0000 0001 0000 0002 0000 0400 0000 001c 7374 7363 0000 0000 0000 0001 ....................stsc........ 00000240 | 0000 0001 0000 0002 0000 0001 0000 001c 7374 737a 0000 0000 0000 0000 0000 0002 ................stsz............ 00000260 | 0000 0173 0000 0174 0000 0014 7374 636f 0000 0000 0000 0001 0000 002c 0000 02ef ...s...t....stco...........,.... 00000280 | 6d64 6174 2110 0520 a41b ffc0 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 mdat!.. ........................ 000002a0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002c0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002e0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ !!!!!!!!!"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! | audio.mp4 !!!!!!!!!#!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 00000000 | 0000 001c 6674 7970 6973 6f6d 0000 0200 6973 6f6d 6973 6f32 6d70 3431 0000 0260 ....ftypisom....isomiso2mp41...` 00000020 | 6d6f 6f76 0000 006c 6d76 6864 0000 0000 0000 0000 0000 0000 0000 03e8 0000 002f moov...lmvhd.................../ 00000040 | 0001 0000 0100 0000 0000 0000 0000 0000 0001 0000 0000 0000 0000 0000 0000 0000 ................................ 00000060 | 0001 0000 0000 0000 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0000 ................@............... 00000080 | 0000 0000 0000 0000 0000 0000 0000 0003 0000 01ec 7472 616b 0000 005c 746b 6864 ....................trak...tkhd 000000a0 | 0000 0003 0000 0000 0000 0000 0000 0002 0000 0000 0000 002f 0000 0000 0000 0000 ......................./........ 000000c0 | 0000 0001 0100 0000 0001 0000 0000 0000 0000 0000 0000 0000 0001 0000 0000 0000 ................................ 000000e0 | 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0024 6564 7473 0000 001c ........@..............$edts.... 00000100 | 656c 7374 0000 0000 0000 0001 0000 002f 0000 0000 0001 0000 0000 0164 6d64 6961 elst.........../...........dmdia 00000120 | 0000 0020 6d64 6864 0000 0000 0000 0000 0000 0000 0000 ac44 0000 0800 55c4 0000 ... mdhd...............D....U... 00000140 | 0000 002d 6864 6c72 0000 0000 0000 0000 736f 756e 0000 0000 0000 0000 0000 0000 ...-hdlr........soun............ 00000160 | 536f 756e 6448 616e 646c 6572 0000 0001 0f6d 696e 6600 0000 1073 6d68 6400 0000 SoundHandler.....minf....smhd... 00000180 | 0000 0000 0000 0000 2464 696e 6600 0000 1c64 7265 6600 0000 0000 0000 0100 0000 ........$dinf....dref........... 000001a0 | 0c75 726c 2000 0000 0100 0000 d373 7462 6c00 0000 6773 7473 6400 0000 0000 0000 .url ........stbl...gstsd....... 000001c0 | 0100 0000 576d 7034 6100 0000 0000 0000 0100 0000 0000 0000 0000 0200 1000 0000 ....Wmp4a....................... 000001e0 | 00ac 4400 0000 0000 3365 7364 7300 0000 0003 8080 8022 0002 0004 8080 8014 4015 ..D.....3esds........"........@. 00000200 | 0000 0000 01f4 0000 01f3 f905 8080 8002 1210 0680 8080 0102 0000 0018 7374 7473 ............................stts 00000220 | 0000 0000 0000 0001 0000 0002 0000 0400 0000 001c 7374 7363 0000 0000 0000 0001 ....................stsc........ 00000240 | 0000 0001 0000 0002 0000 0001 0000 001c 7374 737a 0000 0000 0000 0000 0000 0002 ................stsz............ 00000260 | 0000 0173 0000 0174 0000 0014 7374 636f 0000 0000 0000 0001 0000 002c 0000 02ef ...s...t....stco...........,.... 00000280 | 6d64 6174 2110 0520 a41b ffc0 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 mdat!.. ........................ 000002a0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002c0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002e0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000300 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000320 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000340 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000360 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000380 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 37a7 0000 0000 0000 ........................7.......24 aligned(8) class FileTypeBox extends Box(‘ftyp’) { unsigned int(32) major_brand; unsigned int(32) minor_version; unsigned int(32) compatible_brands[]; } aligned(8) class MediaHeaderBox extends FullBox(‘mdhd’, version, 0) { if (version==1) { unsigned int(64) creation_time; unsigned int(64) modification_time; unsigned int(32) timescale; unsigned int(64) duration; } else { // version==0 unsigned int(32) creation_time; unsigned int(32) modification_time; unsigned int(32) timescale; unsigned int(32) duration; }
 bit(1) pad=0;
 unsigned int(5)[3] language; } !!!!!!!!!"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! | audio.mp4 !!!!!!!!!#!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 00000000 | 0000 001c 6674 7970 6973 6f6d 0000 0200 6973 6f6d 6973 6f32 6d70 3431 0000 0260 ....ftypisom....isomiso2mp41...` 00000020 | 6d6f 6f76 0000 006c 6d76 6864 0000 0000 0000 0000 0000 0000 0000 03e8 0000 002f moov...lmvhd.................../ 00000040 | 0001 0000 0100 0000 0000 0000 0000 0000 0001 0000 0000 0000 0000 0000 0000 0000 ................................ 00000060 | 0001 0000 0000 0000 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0000 ................@............... 00000080 | 0000 0000 0000 0000 0000 0000 0000 0003 0000 01ec 7472 616b 0000 005c 746b 6864 ....................trak...tkhd 000000a0 | 0000 0003 0000 0000 0000 0000 0000 0002 0000 0000 0000 002f 0000 0000 0000 0000 ......................./........ 000000c0 | 0000 0001 0100 0000 0001 0000 0000 0000 0000 0000 0000 0000 0001 0000 0000 0000 ................................ 000000e0 | 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0024 6564 7473 0000 001c ........@..............$edts.... 00000100 | 656c 7374 0000 0000 0000 0001 0000 002f 0000 0000 0001 0000 0000 0164 6d64 6961 elst.........../...........dmdia 00000120 | 0000 0020 6d64 6864 0000 0000 0000 0000 0000 0000 0000 ac44 0000 0800 55c4 0000 ... mdhd...............D....U... 00000140 | 0000 002d 6864 6c72 0000 0000 0000 0000 736f 756e 0000 0000 0000 0000 0000 0000 ...-hdlr........soun............ 00000160 | 536f 756e 6448 616e 646c 6572 0000 0001 0f6d 696e 6600 0000 1073 6d68 6400 0000 SoundHandler.....minf....smhd... 00000180 | 0000 0000 0000 0000 2464 696e 6600 0000 1c64 7265 6600 0000 0000 0000 0100 0000 ........$dinf....dref........... 000001a0 | 0c75 726c 2000 0000 0100 0000 d373 7462 6c00 0000 6773 7473 6400 0000 0000 0000 .url ........stbl...gstsd....... 000001c0 | 0100 0000 576d 7034 6100 0000 0000 0000 0100 0000 0000 0000 0000 0200 1000 0000 ....Wmp4a....................... 000001e0 | 00ac 4400 0000 0000 3365 7364 7300 0000 0003 8080 8022 0002 0004 8080 8014 4015 ..D.....3esds........"........@. 00000200 | 0000 0000 01f4 0000 01f3 f905 8080 8002 1210 0680 8080 0102 0000 0018 7374 7473 ............................stts 00000220 | 0000 0000 0000 0001 0000 0002 0000 0400 0000 001c 7374 7363 0000 0000 0000 0001 ....................stsc........ 00000240 | 0000 0001 0000 0002 0000 0001 0000 001c 7374 737a 0000 0000 0000 0000 0000 0002 ................stsz............ 00000260 | 0000 0173 0000 0174 0000 0014 7374 636f 0000 0000 0000 0001 0000 002c 0000 02ef ...s...t....stco...........,.... 00000280 | 6d64 6174 2110 0520 a41b ffc0 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 mdat!.. ........................ 000002a0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002c0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002e0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000300 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000320 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000340 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000360 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000380 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 37a7 0000 0000 0000 ........................7.......
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. ftyp moov mvhd trak tkhd mdia mdhd minf trak tkhd mdia mdhd minf mdat Resolution: 1920x1080 Sample Rate: 48000Hz Channel: 2 This slide and block shape by mzyy94 are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License. Metadata A/V content 25 Duration: 9min57sec
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. Streaming Playback 26
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.27 <video src="BigBuckBunny_320x180.mp4"></video> Single MP4 File • Fixed Duration • Static Bitrate • More Buffering
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.28 • Flexible Duration • Adaptive Bitrate • Less Buffering <video src="BigBuckBunny_320x180.mp4"></video> Single MP4 File • Fixed Duration • Static Bitrate • More Buffering
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.29 mpeg-DASH HTTP Live Streaming
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. HTTP Live Streaming • a.k.a. HLS • Developed by Apple • Specified in IETF’s RFC 8216 • Safari and Edge support natively 30 ───────┼────────────────────────────────────────────────── 1 │ #EXTM3U 2 │ #EXT-X-VERSION:4 3 │ #EXT-X-INDEPENDENT-SEGMENTS 4 │ 5 │ #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME= 6 │ #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME= 7 │ #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME= 8 │ #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME= 9 │ #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME= 10 │ 11 │ 12 │ 13 │ #EXT-X-STREAM-INF:BANDWIDTH=1808281,AVERAGE-BANDW 14 │ https: //p-events-delivery.akamaized.net/3004qzusa 15 │ #EXT-X-I-FRAME-STREAM-INF:BANDWIDTH=851340,AVERAG 16 │ 17 │ #EXT-X-STREAM-INF:BANDWIDTH=7673072,AVERAGE-BANDW 18 │ https: //p-events-delivery.akamaized.net/3004qzusa 19 │ #EXT-X-I-FRAME-STREAM-INF:BANDWIDTH=3783736,AVERA 20 │ 21 │ #EXT-X-STREAM-INF:BANDWIDTH=5781204,AVERAGE-BANDW 22 │ https: //p-events-delivery.akamaized.net/3004qzusa 23 │ #EXT-X-I-FRAME-STREAM-INF:BANDWIDTH=2837802,AVERA 24 │ 25 │ #EXT-X-STREAM-INF:BANDWIDTH=4362301,AVERAGE-BANDW 26 │ https: //p-events-delivery.akamaized.net/3004qzusa 27 │ #EXT-X-I-FRAME-STREAM-INF:BANDWIDTH=2128350,AVERA 28 │ 29 │ #EXT-X-STREAM-INF:BANDWIDTH=3416367,AVERAGE-BANDW 30 │ https: //p-events-delivery.akamaized.net/3004qzusa
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. • Dynamic Adaptive Streaming over HTTP • Developed under MPEG • Specified in ISO/IEC 23009-1:2014 • Edge supports playback natively 31 mpeg-DASH ───────┼────────────────────────────────────────────────── 1 │ <?xml version="1.0"?> 2 │ <!-- MPD file Generated with GPAC version 0.5.1-D 3 │ <MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBuf 4 │ <ProgramInformation moreInformationURL="http: //g 5 │ <Title>Spring_3000k_dash.mpd generated by GPAC 6 │ </ProgramInformation> 7 │ 8 │ <Period id="" duration="PT0H2M45.76S"> 9 │ <AdaptationSet segmentAlignment="true" maxWidth 10 │ <Representation id="1" mimeType="video/mp4" co 11 │ <BaseURL>Spring_3000k_track1_dashinit.mp4 </Ba 12 │ <SegmentBase indexRangeExact="true" indexRang 13 │ </Representation> 14 │ <Representation id="2" mimeType="video/mp4" co 15 │ <BaseURL>Spring_5000k_track1_dashinit.mp4 </Ba 16 │ <SegmentBase indexRangeExact="true" indexRang 17 │ </Representation> 18 │ <Representation id="3" mimeType="video/mp4" co 19 │ <BaseURL>Spring_7500k_track1_dashinit.mp4 </Ba 20 │ <SegmentBase indexRangeExact="true" indexRang 21 │ </Representation> 22 │ <Representation id="4" mimeType="video/mp4" co 23 │ <BaseURL>Spring_10000k_track1_dashinit.mp4 </B 24 │ <SegmentBase indexRangeExact="true" indexRang 25 │ </Representation> 26 │ <Representation id="5" mimeType="video/mp4" co 27 │ <BaseURL>Spring_15000k_track1_dashinit.mp4 </B 28 │ <SegmentBase indexRangeExact="true" indexRang 29 │ </Representation> 30 │ <Representation id="6" mimeType="video/mp4" co
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.32 mpeg-DASH HTTP Live Streaming MPD M3U8 Manifest • MP4 • WEBM • MPEG-TS • MP4 • MPEG-TS
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License. <video src="blob:http://example.com/ac8bef67-c5c4-4a1f-9b3f-7394dbe0ed75"></video> init.mp4 seg-01.m4s seg-02.m4s seg-03.m4s seg-04.m4s seg-05.m4s ・ ・ ・ Manifest <video src=“blob:http://example.com/ac8bef67-c5c4-4a1f-9b3f-7394dbe0ed75”></video>
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Fragmented MP4 34 init.mp4 seg-01.m4s seg-02.m4s seg-03.m4s seg-04.m4s seg-05.m4s ・ ・ ・
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License. Normal MP4 ftyp moov mvhd trak tkhd mdia mdhd minf trak tkhd mdia mdhd minf mdat Metadata A/V content ftyp moov mvhd trak tkhd mdia mdhd minf trak tkhd mdia mdhd minf moof mdat moof mdat moof mdat moof mdat moof mdat moof mdat Fragmented MP4
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License. ftyp moov mvhd trak tkhd mdia mdhd minf trak tkhd mdia mdhd minf moof mdat moof mdat moof mdat moof mdat moof mdat moof mdat Fragmented MP4 https://w3c.github.io/media-source/isobmff-byte-stream-format.html BigBuckBunny_320x180.mp4
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License. ftyp moov mvhd trak tkhd mdia mdhd minf trak tkhd mdia mdhd minf moof mdat moof mdat moof mdat moof mdat moof mdat moof mdat Fragmented MP4 init.mp4 seg-01.m4s seg-02.m4s seg-03.m4s seg-04.m4s seg-05.m4s seg-06.m4s
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.38 init.mp4 seg-01.m4s seg-02.m4s seg-03.m4s seg-04.m4s seg-05.m4s seg-06.m4s How to Play? Media Source Extensions
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. Media Source Extensions 39
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.40 MP4 MP4 MP4
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Media Source Extensions 41 <video src=“blob:http://example.com/ac8bef67-c5c4-4a1f-9b3f-7394dbe0ed75”></video> new MediaSource()mediaSource URL.createObjectURL(mediaSource)Binding sourceBuffer mediaSource.addSourceBuffer(mimeType)Create Source sourceBuffer.appendBuffer(buf)Appending
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. • Adaptive Bitrate • Content Decryption Module • MediaKeySession • Encrypted Media Extension • Common Encryption • Source Buffer • Media Source Extension • MPEG-DASH • HTTP Live Streaming 42 MP4 Streaming Protocol Media Source Extensions DRM
This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.43 • Flexible Duration • Adaptive Bitrate • Less Buffering • Fixed Duration • Static Bitrate • More Buffering <video src="BigBuckBunny_320x180.mp4"></video> Single MP4 File
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Flexible Duration 44 init.mp4 seg-01.m4s seg-02.m4s seg-86.m4s seg-87.m4s Duration: 9min57sec init.mp4 seg-01.m4s seg-02.m4s seg-03.m4s seg-04.m4s Duration: 0 ・ ・ ・ ・ ・ ・ Infinite !
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Adaptive Bitrate 45 240p 360p 540p 720p 1080p 2160p init 01 02 03 04 05 06 07 Source Buffer
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Less Buffering 46 Waiting… Done! Can Play!
This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Upcoming • Learn All APIs so as to play Web Streaming • How to create Streaming Media • DRM Handcrafting • Deep Dive into Adaptive Bitrate • Browser Video Feature Implementation Comparison 47 And more..

More Related Content

PDF
Multimedia Services: Video
Dani Gutiérrez Porset
 
PDF
An intoroduction to Multimedia
Zahra Sadeghi
 
ODP
A gentle introduction to video encoding [diveintomark]
Choon Keat Chew
 
PPTX
Image and Video formates
Prerak Shirpur
 
PPTX
Windows7: Video Improvements
wonderu
 
PPT
Android Media Player Development
Talentica Software
 
PPT
Gra T585 Windows 7的视频改善 Anantha Kancherla
exherb
 
PPTX
Telecommunications: Motion Video
Napier University
 
Multimedia Services: Video
Dani Gutiérrez Porset
 
An intoroduction to Multimedia
Zahra Sadeghi
 
A gentle introduction to video encoding [diveintomark]
Choon Keat Chew
 
Image and Video formates
Prerak Shirpur
 
Windows7: Video Improvements
wonderu
 
Android Media Player Development
Talentica Software
 
Gra T585 Windows 7的视频改善 Anantha Kancherla
exherb
 
Telecommunications: Motion Video
Napier University
 

Similar to HTML5 and Video Streaming Vol.1 (20)

PPTX
A short history of video coding
Iain Richardson
 
PPT
Week 4 LBSC 690 Information Technology
Videoguy
 
PDF
1_MWS2018_Tutorial1_Pham_Internet Delivered Media.pdf
AliIssa53
 
PPT
DILG Movie Maker Tutorial Notes
Servus Technologies, Inc.
 
PPTX
File Format - Animation Courses, Ahmedabad
Animation Courses, Ahmedabad
 
PDF
Dynamic Adaptive Streaming over HTTP: From Content Creation to Consumption
Alpen-Adria-Universität
 
PPTX
MPEG-DASH Dataset MMSys 2012
Alpen-Adria-Universität
 
PPTX
Dynamic Adaptive Streaming over HTTP Dataset
Stefan Lederer / bitmovin.net
 
PDF
Interactive Content Authoring for A153 ATSC Mobile Digital Television Employi...
Brad Fortner
 
ODP
video tools
Narendra Sisodiya
 
PPTX
List of Files Format
Daivik Narayan
 
PPTX
File Formats
Mark Rotondella
 
TXT
Readme
David Sting
 
PDF
Building video application on windows 8 with Windows Azure Media Services
Mingfei Yan
 
PPTX
multimedia data and file format
ALOK SAHNI
 
PPTX
Chap62
dkd_woohoo
 
PPT
Slide
Videoguy
 
PDF
Riffmci
Stanley Ho
 
PDF
MIDP: Music and Sound
Jussi Pohjolainen
 
PPS
Multimedia in Higher Education
learning20
 
A short history of video coding
Iain Richardson
 
Week 4 LBSC 690 Information Technology
Videoguy
 
1_MWS2018_Tutorial1_Pham_Internet Delivered Media.pdf
AliIssa53
 
DILG Movie Maker Tutorial Notes
Servus Technologies, Inc.
 
File Format - Animation Courses, Ahmedabad
Animation Courses, Ahmedabad
 
Dynamic Adaptive Streaming over HTTP: From Content Creation to Consumption
Alpen-Adria-Universität
 
MPEG-DASH Dataset MMSys 2012
Alpen-Adria-Universität
 
Dynamic Adaptive Streaming over HTTP Dataset
Stefan Lederer / bitmovin.net
 
Interactive Content Authoring for A153 ATSC Mobile Digital Television Employi...
Brad Fortner
 
video tools
Narendra Sisodiya
 
List of Files Format
Daivik Narayan
 
File Formats
Mark Rotondella
 
Readme
David Sting
 
Building video application on windows 8 with Windows Azure Media Services
Mingfei Yan
 
multimedia data and file format
ALOK SAHNI
 
Chap62
dkd_woohoo
 
Slide
Videoguy
 
Riffmci
Stanley Ho
 
MIDP: Music and Sound
Jussi Pohjolainen
 
Multimedia in Higher Education
learning20
 
Ad

More from Yuki Mizuno (9)

PDF
地デジを理解したつもりになる回
Yuki Mizuno
 
PDF
Xavier NXのカーネルとVMの話
Yuki Mizuno
 
PDF
HDMI探検隊
Yuki Mizuno
 
PDF
# TELETEXT
Yuki Mizuno
 
PDF
Subscriber Identity Module
Yuki Mizuno
 
PDF
実践イカパケット解析α
Yuki Mizuno
 
PDF
実践イカパケット解析
Yuki Mizuno
 
PDF
CTFの話 - coinsLT #10
Yuki Mizuno
 
PDF
ノーゲーム・ノーライフ[Games on Linux] - Kernel/VM北陸1
Yuki Mizuno
 
地デジを理解したつもりになる回
Yuki Mizuno
 
Xavier NXのカーネルとVMの話
Yuki Mizuno
 
HDMI探検隊
Yuki Mizuno
 
# TELETEXT
Yuki Mizuno
 
Subscriber Identity Module
Yuki Mizuno
 
実践イカパケット解析α
Yuki Mizuno
 
実践イカパケット解析
Yuki Mizuno
 
CTFの話 - coinsLT #10
Yuki Mizuno
 
ノーゲーム・ノーライフ[Games on Linux] - Kernel/VM北陸1
Yuki Mizuno
 
Ad

Recently uploaded (20)

PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PPTX
Tartificialntelligence_presentation.pptx
ry7r52mzb4
 
PDF
NewMind AI Weekly Chronicles - August'25-Week II
NewMind AI
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
MatthewLewis227954
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PDF
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PDF
Getting Started with Data Integration: FME Form 101
Safe Software
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Tartificialntelligence_presentation.pptx
ry7r52mzb4
 
NewMind AI Weekly Chronicles - August'25-Week II
NewMind AI
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
Group 1 Presentation -Planning and Decision Making .pptx
MatthewLewis227954
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
Approach and Philosophy of On baking technology
30anthuong17
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
Teaching material agriculture food technology
LiaRayya
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
Getting Started with Data Integration: FME Form 101
Safe Software
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
Encapsulation theory and applications.pdf
gurumoop
 

HTML5 and Video Streaming Vol.1

  • 1. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. HTML5 and Video Streaming 1 Vol.1
  • 2. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.2 ×
  • 3. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.3 <video src="BigBuckBunny_320x180.mp4"></video>
  • 4. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License.
  • 5. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.5 😆
  • 6. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.6 MP4
  • 7. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.7 MP4
  • 8. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.8 HTML5 Media Source Extension Encrypted Media Extension Clear Key Widevine ISO-Base Media File Format Fragmented MP4 HTMLMediaElement MPEG-4 Part 10 Advanced Video Coding MPEG-DASHContent Decryption Module MediaKeySession JSON Web Key WebCrypto Autoplay Policy Media Engagement IndexTimed Text Markup Language Secure Context PlayReady Common Encryption HTTP Live Streaming Adaptive Bitrate Digital Rights Management ECMAScript 2015 Persistence License KeySystem SourceBuffer HEVC FairPlay Streaming 2.0 emsg ID3 WebVTT MPEG-TS TextTrack
  • 9. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. • Adaptive Bitrate • Content Decryption Module • MediaKeySession • Encrypted Media Extension • Common Encryption • Source Buffer • Media Source Extension • MPEG-DASH • HTTP Live Streaming 9 MP4
  • 10. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.10 HTML5 Media Source Extension Encrypted Media Extension Clear Key Widevine ISO-Base Media File Format Fragmented MP4 HTMLMediaElement MPEG-4 Part 10 Advanced Video Coding MPEG-DASHContent Decryption Module MediaKeySession JSON Web Key WebCrypto Autoplay Policy Media Engagement IndexTimed Text Markup Language PlayReady Common Encryption HTTP Live Streaming Adaptive Bitrate Digital Rights Management ECMAScript 2015 Persistence License KeySystem SourceBuffer HEVC FairPlay Streaming 2.0 emsg ID3 WebVTT MPEG-TS Secure Context TextTrack
  • 11. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. History of Movie File 11 And Browser Plug-in
  • 12. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. FLV 12 1990 2000 20202010 AVI WMV MJPEG MP4 MOV SWF ??? 3GP
  • 13. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.This slide by mzyy94 and HTML5 icon by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Other icons, don’t meet the threshold of originality, are in the public domain. 1990 2000 20202010 AVI WMV MJPEG MP4 SWF ??? Windows Media Player FLV 3GP Silverlight ™ Microsoft® MOV 2014
  • 14. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. An MP4 Video 14
  • 15. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.15 MP4
  • 16. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. MP4 File Format • A/V Container Format • De facto standard on the Web • Based on ISO BMFF • ISO/IEC 14496-14 Standard • Formed as a series of Boxes MP4 16
  • 17. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. A/V Container Format 17 MP4 H.264 + AACH.264 + AAC H.264 + MP3 H.265 + AAC AAC
  • 18. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. De facto standard on the Web 18 All Modern Browsers may Play MP4
  • 19. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Based on ISO BMFF 19 MOV MP4 3GP ISO Base Media File Format Common +Extension
  • 20. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. ISO/IEC 14496-14 Standard 20 http://standards.iso.org/ittf/PubliclyAvailableStandards/c068960_ISO_IEC_14496-12_2015.zip Publicly Available Reference number ISO/IEC 14496‐12:2015(E) © ISO/IEC 2015 INTERNATIONAL STANDARD ISO/IEC 14496-12 Fifth edition 2015‐12‐15 Information technology — Coding of audio- visual objects — Part 12: ISO base media file format Technologies de l'information — Codage des objets audiovisuels — Partie 12: Format ISO de base pour les fichiers médias
  • 21. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. ISO/IEC 14496-12:2015(E) 4 Object-structured File Organization 4.1 File Structure Files are formed as a series of objects, called boxes in this specification. All data is contained in boxes; there is no other data within the file. This includes any initial signature required by the specific file format. – c068960_ISO_IEC_14496-12_2015.pdf p.6 21
  • 22. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. “Type a quote here.” 22 ISO/IEC 14496-12:2015(E) Figure 1 — Simple interchange file 5.1.3 Content Creation During content creation, a number of areas of the format can be exercised to useful effect, particularly: the ability to store each elementary stream separately (not interleaved), possibly in separate – c068960_ISO_IEC_14496-12_2015.pdf p.9
  • 23. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.23 !!!!!!!!!"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! | audio.mp4 !!!!!!!!!#!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 00000000 | 0000 001c 6674 7970 6973 6f6d 0000 0200 6973 6f6d 6973 6f32 6d70 3431 0000 0260 ....ftypisom....isomiso2mp41...` 00000020 | 6d6f 6f76 0000 006c 6d76 6864 0000 0000 0000 0000 0000 0000 0000 03e8 0000 002f moov...lmvhd.................../ 00000040 | 0001 0000 0100 0000 0000 0000 0000 0000 0001 0000 0000 0000 0000 0000 0000 0000 ................................ 00000060 | 0001 0000 0000 0000 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0000 ................@............... 00000080 | 0000 0000 0000 0000 0000 0000 0000 0003 0000 01ec 7472 616b 0000 005c 746b 6864 ....................trak...tkhd 000000a0 | 0000 0003 0000 0000 0000 0000 0000 0002 0000 0000 0000 002f 0000 0000 0000 0000 ......................./........ 000000c0 | 0000 0001 0100 0000 0001 0000 0000 0000 0000 0000 0000 0000 0001 0000 0000 0000 ................................ 000000e0 | 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0024 6564 7473 0000 001c ........@..............$edts.... 00000100 | 656c 7374 0000 0000 0000 0001 0000 002f 0000 0000 0001 0000 0000 0164 6d64 6961 elst.........../...........dmdia 00000120 | 0000 0020 6d64 6864 0000 0000 0000 0000 0000 0000 0000 ac44 0000 0800 55c4 0000 ... mdhd...............D....U... 00000140 | 0000 002d 6864 6c72 0000 0000 0000 0000 736f 756e 0000 0000 0000 0000 0000 0000 ...-hdlr........soun............ 00000160 | 536f 756e 6448 616e 646c 6572 0000 0001 0f6d 696e 6600 0000 1073 6d68 6400 0000 SoundHandler.....minf....smhd... 00000180 | 0000 0000 0000 0000 2464 696e 6600 0000 1c64 7265 6600 0000 0000 0000 0100 0000 ........$dinf....dref........... 000001a0 | 0c75 726c 2000 0000 0100 0000 d373 7462 6c00 0000 6773 7473 6400 0000 0000 0000 .url ........stbl...gstsd....... 000001c0 | 0100 0000 576d 7034 6100 0000 0000 0000 0100 0000 0000 0000 0000 0200 1000 0000 ....Wmp4a....................... 000001e0 | 00ac 4400 0000 0000 3365 7364 7300 0000 0003 8080 8022 0002 0004 8080 8014 4015 ..D.....3esds........"........@. 00000200 | 0000 0000 01f4 0000 01f3 f905 8080 8002 1210 0680 8080 0102 0000 0018 7374 7473 ............................stts 00000220 | 0000 0000 0000 0001 0000 0002 0000 0400 0000 001c 7374 7363 0000 0000 0000 0001 ....................stsc........ 00000240 | 0000 0001 0000 0002 0000 0001 0000 001c 7374 737a 0000 0000 0000 0000 0000 0002 ................stsz............ 00000260 | 0000 0173 0000 0174 0000 0014 7374 636f 0000 0000 0000 0001 0000 002c 0000 02ef ...s...t....stco...........,.... 00000280 | 6d64 6174 2110 0520 a41b ffc0 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 mdat!.. ........................ 000002a0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002c0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002e0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000300 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000320 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000340 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000360 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000380 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 37a7 0000 0000 0000 ........................7.......
  • 24. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. !!!!!!!!!"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! | audio.mp4 !!!!!!!!!#!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 00000000 | 0000 001c 6674 7970 6973 6f6d 0000 0200 6973 6f6d 6973 6f32 6d70 3431 0000 0260 ....ftypisom....isomiso2mp41...` 00000020 | 6d6f 6f76 0000 006c 6d76 6864 0000 0000 0000 0000 0000 0000 0000 03e8 0000 002f moov...lmvhd.................../ 00000040 | 0001 0000 0100 0000 0000 0000 0000 0000 0001 0000 0000 0000 0000 0000 0000 0000 ................................ 00000060 | 0001 0000 0000 0000 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0000 ................@............... 00000080 | 0000 0000 0000 0000 0000 0000 0000 0003 0000 01ec 7472 616b 0000 005c 746b 6864 ....................trak...tkhd 000000a0 | 0000 0003 0000 0000 0000 0000 0000 0002 0000 0000 0000 002f 0000 0000 0000 0000 ......................./........ 000000c0 | 0000 0001 0100 0000 0001 0000 0000 0000 0000 0000 0000 0000 0001 0000 0000 0000 ................................ 000000e0 | 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0024 6564 7473 0000 001c ........@..............$edts.... 00000100 | 656c 7374 0000 0000 0000 0001 0000 002f 0000 0000 0001 0000 0000 0164 6d64 6961 elst.........../...........dmdia 00000120 | 0000 0020 6d64 6864 0000 0000 0000 0000 0000 0000 0000 ac44 0000 0800 55c4 0000 ... mdhd...............D....U... 00000140 | 0000 002d 6864 6c72 0000 0000 0000 0000 736f 756e 0000 0000 0000 0000 0000 0000 ...-hdlr........soun............ 00000160 | 536f 756e 6448 616e 646c 6572 0000 0001 0f6d 696e 6600 0000 1073 6d68 6400 0000 SoundHandler.....minf....smhd... 00000180 | 0000 0000 0000 0000 2464 696e 6600 0000 1c64 7265 6600 0000 0000 0000 0100 0000 ........$dinf....dref........... 000001a0 | 0c75 726c 2000 0000 0100 0000 d373 7462 6c00 0000 6773 7473 6400 0000 0000 0000 .url ........stbl...gstsd....... 000001c0 | 0100 0000 576d 7034 6100 0000 0000 0000 0100 0000 0000 0000 0000 0200 1000 0000 ....Wmp4a....................... 000001e0 | 00ac 4400 0000 0000 3365 7364 7300 0000 0003 8080 8022 0002 0004 8080 8014 4015 ..D.....3esds........"........@. 00000200 | 0000 0000 01f4 0000 01f3 f905 8080 8002 1210 0680 8080 0102 0000 0018 7374 7473 ............................stts 00000220 | 0000 0000 0000 0001 0000 0002 0000 0400 0000 001c 7374 7363 0000 0000 0000 0001 ....................stsc........ 00000240 | 0000 0001 0000 0002 0000 0001 0000 001c 7374 737a 0000 0000 0000 0000 0000 0002 ................stsz............ 00000260 | 0000 0173 0000 0174 0000 0014 7374 636f 0000 0000 0000 0001 0000 002c 0000 02ef ...s...t....stco...........,.... 00000280 | 6d64 6174 2110 0520 a41b ffc0 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 mdat!.. ........................ 000002a0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002c0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002e0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ !!!!!!!!!"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! | audio.mp4 !!!!!!!!!#!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 00000000 | 0000 001c 6674 7970 6973 6f6d 0000 0200 6973 6f6d 6973 6f32 6d70 3431 0000 0260 ....ftypisom....isomiso2mp41...` 00000020 | 6d6f 6f76 0000 006c 6d76 6864 0000 0000 0000 0000 0000 0000 0000 03e8 0000 002f moov...lmvhd.................../ 00000040 | 0001 0000 0100 0000 0000 0000 0000 0000 0001 0000 0000 0000 0000 0000 0000 0000 ................................ 00000060 | 0001 0000 0000 0000 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0000 ................@............... 00000080 | 0000 0000 0000 0000 0000 0000 0000 0003 0000 01ec 7472 616b 0000 005c 746b 6864 ....................trak...tkhd 000000a0 | 0000 0003 0000 0000 0000 0000 0000 0002 0000 0000 0000 002f 0000 0000 0000 0000 ......................./........ 000000c0 | 0000 0001 0100 0000 0001 0000 0000 0000 0000 0000 0000 0000 0001 0000 0000 0000 ................................ 000000e0 | 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0024 6564 7473 0000 001c ........@..............$edts.... 00000100 | 656c 7374 0000 0000 0000 0001 0000 002f 0000 0000 0001 0000 0000 0164 6d64 6961 elst.........../...........dmdia 00000120 | 0000 0020 6d64 6864 0000 0000 0000 0000 0000 0000 0000 ac44 0000 0800 55c4 0000 ... mdhd...............D....U... 00000140 | 0000 002d 6864 6c72 0000 0000 0000 0000 736f 756e 0000 0000 0000 0000 0000 0000 ...-hdlr........soun............ 00000160 | 536f 756e 6448 616e 646c 6572 0000 0001 0f6d 696e 6600 0000 1073 6d68 6400 0000 SoundHandler.....minf....smhd... 00000180 | 0000 0000 0000 0000 2464 696e 6600 0000 1c64 7265 6600 0000 0000 0000 0100 0000 ........$dinf....dref........... 000001a0 | 0c75 726c 2000 0000 0100 0000 d373 7462 6c00 0000 6773 7473 6400 0000 0000 0000 .url ........stbl...gstsd....... 000001c0 | 0100 0000 576d 7034 6100 0000 0000 0000 0100 0000 0000 0000 0000 0200 1000 0000 ....Wmp4a....................... 000001e0 | 00ac 4400 0000 0000 3365 7364 7300 0000 0003 8080 8022 0002 0004 8080 8014 4015 ..D.....3esds........"........@. 00000200 | 0000 0000 01f4 0000 01f3 f905 8080 8002 1210 0680 8080 0102 0000 0018 7374 7473 ............................stts 00000220 | 0000 0000 0000 0001 0000 0002 0000 0400 0000 001c 7374 7363 0000 0000 0000 0001 ....................stsc........ 00000240 | 0000 0001 0000 0002 0000 0001 0000 001c 7374 737a 0000 0000 0000 0000 0000 0002 ................stsz............ 00000260 | 0000 0173 0000 0174 0000 0014 7374 636f 0000 0000 0000 0001 0000 002c 0000 02ef ...s...t....stco...........,.... 00000280 | 6d64 6174 2110 0520 a41b ffc0 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 mdat!.. ........................ 000002a0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002c0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002e0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000300 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000320 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000340 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000360 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000380 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 37a7 0000 0000 0000 ........................7.......24 aligned(8) class FileTypeBox extends Box(‘ftyp’) { unsigned int(32) major_brand; unsigned int(32) minor_version; unsigned int(32) compatible_brands[]; } aligned(8) class MediaHeaderBox extends FullBox(‘mdhd’, version, 0) { if (version==1) { unsigned int(64) creation_time; unsigned int(64) modification_time; unsigned int(32) timescale; unsigned int(64) duration; } else { // version==0 unsigned int(32) creation_time; unsigned int(32) modification_time; unsigned int(32) timescale; unsigned int(32) duration; }
 bit(1) pad=0;
 unsigned int(5)[3] language; } !!!!!!!!!"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! | audio.mp4 !!!!!!!!!#!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 00000000 | 0000 001c 6674 7970 6973 6f6d 0000 0200 6973 6f6d 6973 6f32 6d70 3431 0000 0260 ....ftypisom....isomiso2mp41...` 00000020 | 6d6f 6f76 0000 006c 6d76 6864 0000 0000 0000 0000 0000 0000 0000 03e8 0000 002f moov...lmvhd.................../ 00000040 | 0001 0000 0100 0000 0000 0000 0000 0000 0001 0000 0000 0000 0000 0000 0000 0000 ................................ 00000060 | 0001 0000 0000 0000 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0000 ................@............... 00000080 | 0000 0000 0000 0000 0000 0000 0000 0003 0000 01ec 7472 616b 0000 005c 746b 6864 ....................trak...tkhd 000000a0 | 0000 0003 0000 0000 0000 0000 0000 0002 0000 0000 0000 002f 0000 0000 0000 0000 ......................./........ 000000c0 | 0000 0001 0100 0000 0001 0000 0000 0000 0000 0000 0000 0000 0001 0000 0000 0000 ................................ 000000e0 | 0000 0000 0000 0000 4000 0000 0000 0000 0000 0000 0000 0024 6564 7473 0000 001c ........@..............$edts.... 00000100 | 656c 7374 0000 0000 0000 0001 0000 002f 0000 0000 0001 0000 0000 0164 6d64 6961 elst.........../...........dmdia 00000120 | 0000 0020 6d64 6864 0000 0000 0000 0000 0000 0000 0000 ac44 0000 0800 55c4 0000 ... mdhd...............D....U... 00000140 | 0000 002d 6864 6c72 0000 0000 0000 0000 736f 756e 0000 0000 0000 0000 0000 0000 ...-hdlr........soun............ 00000160 | 536f 756e 6448 616e 646c 6572 0000 0001 0f6d 696e 6600 0000 1073 6d68 6400 0000 SoundHandler.....minf....smhd... 00000180 | 0000 0000 0000 0000 2464 696e 6600 0000 1c64 7265 6600 0000 0000 0000 0100 0000 ........$dinf....dref........... 000001a0 | 0c75 726c 2000 0000 0100 0000 d373 7462 6c00 0000 6773 7473 6400 0000 0000 0000 .url ........stbl...gstsd....... 000001c0 | 0100 0000 576d 7034 6100 0000 0000 0000 0100 0000 0000 0000 0000 0200 1000 0000 ....Wmp4a....................... 000001e0 | 00ac 4400 0000 0000 3365 7364 7300 0000 0003 8080 8022 0002 0004 8080 8014 4015 ..D.....3esds........"........@. 00000200 | 0000 0000 01f4 0000 01f3 f905 8080 8002 1210 0680 8080 0102 0000 0018 7374 7473 ............................stts 00000220 | 0000 0000 0000 0001 0000 0002 0000 0400 0000 001c 7374 7363 0000 0000 0000 0001 ....................stsc........ 00000240 | 0000 0001 0000 0002 0000 0001 0000 001c 7374 737a 0000 0000 0000 0000 0000 0002 ................stsz............ 00000260 | 0000 0173 0000 0174 0000 0014 7374 636f 0000 0000 0000 0001 0000 002c 0000 02ef ...s...t....stco...........,.... 00000280 | 6d64 6174 2110 0520 a41b ffc0 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 mdat!.. ........................ 000002a0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002c0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 000002e0 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000300 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000320 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000340 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000360 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 ................................ 00000380 | 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 37a7 0000 0000 0000 ........................7.......
  • 25. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. ftyp moov mvhd trak tkhd mdia mdhd minf trak tkhd mdia mdhd minf mdat Resolution: 1920x1080 Sample Rate: 48000Hz Channel: 2 This slide and block shape by mzyy94 are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License. Metadata A/V content 25 Duration: 9min57sec
  • 26. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. Streaming Playback 26
  • 27. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.27 <video src="BigBuckBunny_320x180.mp4"></video> Single MP4 File • Fixed Duration • Static Bitrate • More Buffering
  • 28. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.28 • Flexible Duration • Adaptive Bitrate • Less Buffering <video src="BigBuckBunny_320x180.mp4"></video> Single MP4 File • Fixed Duration • Static Bitrate • More Buffering
  • 29. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.29 mpeg-DASH HTTP Live Streaming
  • 30. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. HTTP Live Streaming • a.k.a. HLS • Developed by Apple • Specified in IETF’s RFC 8216 • Safari and Edge support natively 30 ───────┼────────────────────────────────────────────────── 1 │ #EXTM3U 2 │ #EXT-X-VERSION:4 3 │ #EXT-X-INDEPENDENT-SEGMENTS 4 │ 5 │ #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME= 6 │ #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME= 7 │ #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME= 8 │ #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME= 9 │ #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME= 10 │ 11 │ 12 │ 13 │ #EXT-X-STREAM-INF:BANDWIDTH=1808281,AVERAGE-BANDW 14 │ https: //p-events-delivery.akamaized.net/3004qzusa 15 │ #EXT-X-I-FRAME-STREAM-INF:BANDWIDTH=851340,AVERAG 16 │ 17 │ #EXT-X-STREAM-INF:BANDWIDTH=7673072,AVERAGE-BANDW 18 │ https: //p-events-delivery.akamaized.net/3004qzusa 19 │ #EXT-X-I-FRAME-STREAM-INF:BANDWIDTH=3783736,AVERA 20 │ 21 │ #EXT-X-STREAM-INF:BANDWIDTH=5781204,AVERAGE-BANDW 22 │ https: //p-events-delivery.akamaized.net/3004qzusa 23 │ #EXT-X-I-FRAME-STREAM-INF:BANDWIDTH=2837802,AVERA 24 │ 25 │ #EXT-X-STREAM-INF:BANDWIDTH=4362301,AVERAGE-BANDW 26 │ https: //p-events-delivery.akamaized.net/3004qzusa 27 │ #EXT-X-I-FRAME-STREAM-INF:BANDWIDTH=2128350,AVERA 28 │ 29 │ #EXT-X-STREAM-INF:BANDWIDTH=3416367,AVERAGE-BANDW 30 │ https: //p-events-delivery.akamaized.net/3004qzusa
  • 31. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. • Dynamic Adaptive Streaming over HTTP • Developed under MPEG • Specified in ISO/IEC 23009-1:2014 • Edge supports playback natively 31 mpeg-DASH ───────┼────────────────────────────────────────────────── 1 │ <?xml version="1.0"?> 2 │ <!-- MPD file Generated with GPAC version 0.5.1-D 3 │ <MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBuf 4 │ <ProgramInformation moreInformationURL="http: //g 5 │ <Title>Spring_3000k_dash.mpd generated by GPAC 6 │ </ProgramInformation> 7 │ 8 │ <Period id="" duration="PT0H2M45.76S"> 9 │ <AdaptationSet segmentAlignment="true" maxWidth 10 │ <Representation id="1" mimeType="video/mp4" co 11 │ <BaseURL>Spring_3000k_track1_dashinit.mp4 </Ba 12 │ <SegmentBase indexRangeExact="true" indexRang 13 │ </Representation> 14 │ <Representation id="2" mimeType="video/mp4" co 15 │ <BaseURL>Spring_5000k_track1_dashinit.mp4 </Ba 16 │ <SegmentBase indexRangeExact="true" indexRang 17 │ </Representation> 18 │ <Representation id="3" mimeType="video/mp4" co 19 │ <BaseURL>Spring_7500k_track1_dashinit.mp4 </Ba 20 │ <SegmentBase indexRangeExact="true" indexRang 21 │ </Representation> 22 │ <Representation id="4" mimeType="video/mp4" co 23 │ <BaseURL>Spring_10000k_track1_dashinit.mp4 </B 24 │ <SegmentBase indexRangeExact="true" indexRang 25 │ </Representation> 26 │ <Representation id="5" mimeType="video/mp4" co 27 │ <BaseURL>Spring_15000k_track1_dashinit.mp4 </B 28 │ <SegmentBase indexRangeExact="true" indexRang 29 │ </Representation> 30 │ <Representation id="6" mimeType="video/mp4" co
  • 32. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.32 mpeg-DASH HTTP Live Streaming MPD M3U8 Manifest • MP4 • WEBM • MPEG-TS • MP4 • MPEG-TS
  • 33. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License. <video src="blob:http://example.com/ac8bef67-c5c4-4a1f-9b3f-7394dbe0ed75"></video> init.mp4 seg-01.m4s seg-02.m4s seg-03.m4s seg-04.m4s seg-05.m4s ・ ・ ・ Manifest <video src=“blob:http://example.com/ac8bef67-c5c4-4a1f-9b3f-7394dbe0ed75”></video>
  • 34. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Fragmented MP4 34 init.mp4 seg-01.m4s seg-02.m4s seg-03.m4s seg-04.m4s seg-05.m4s ・ ・ ・
  • 35. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License. Normal MP4 ftyp moov mvhd trak tkhd mdia mdhd minf trak tkhd mdia mdhd minf mdat Metadata A/V content ftyp moov mvhd trak tkhd mdia mdhd minf trak tkhd mdia mdhd minf moof mdat moof mdat moof mdat moof mdat moof mdat moof mdat Fragmented MP4
  • 36. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License. ftyp moov mvhd trak tkhd mdia mdhd minf trak tkhd mdia mdhd minf moof mdat moof mdat moof mdat moof mdat moof mdat moof mdat Fragmented MP4 https://w3c.github.io/media-source/isobmff-byte-stream-format.html BigBuckBunny_320x180.mp4
  • 37. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Big Buck Bunny is licensed under a Creative Commons Attribution 3.0 Unported License. ftyp moov mvhd trak tkhd mdia mdhd minf trak tkhd mdia mdhd minf moof mdat moof mdat moof mdat moof mdat moof mdat moof mdat Fragmented MP4 init.mp4 seg-01.m4s seg-02.m4s seg-03.m4s seg-04.m4s seg-05.m4s seg-06.m4s
  • 38. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.38 init.mp4 seg-01.m4s seg-02.m4s seg-03.m4s seg-04.m4s seg-05.m4s seg-06.m4s How to Play? Media Source Extensions
  • 39. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License. Media Source Extensions 39
  • 40. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License.40 MP4 MP4 MP4
  • 41. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Media Source Extensions 41 <video src=“blob:http://example.com/ac8bef67-c5c4-4a1f-9b3f-7394dbe0ed75”></video> new MediaSource()mediaSource URL.createObjectURL(mediaSource)Binding sourceBuffer mediaSource.addSourceBuffer(mimeType)Create Source sourceBuffer.appendBuffer(buf)Appending
  • 42. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. • Adaptive Bitrate • Content Decryption Module • MediaKeySession • Encrypted Media Extension • Common Encryption • Source Buffer • Media Source Extension • MPEG-DASH • HTTP Live Streaming 42 MP4 Streaming Protocol Media Source Extensions DRM
  • 43. This slide by mzyy94 is licensed under a Creative Commons Attribution 4.0 International License.43 • Flexible Duration • Adaptive Bitrate • Less Buffering • Fixed Duration • Static Bitrate • More Buffering <video src="BigBuckBunny_320x180.mp4"></video> Single MP4 File
  • 44. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Flexible Duration 44 init.mp4 seg-01.m4s seg-02.m4s seg-86.m4s seg-87.m4s Duration: 9min57sec init.mp4 seg-01.m4s seg-02.m4s seg-03.m4s seg-04.m4s Duration: 0 ・ ・ ・ ・ ・ ・ Infinite !
  • 45. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Adaptive Bitrate 45 240p 360p 540p 720p 1080p 2160p init 01 02 03 04 05 06 07 Source Buffer
  • 46. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Less Buffering 46 Waiting… Done! Can Play!
  • 47. This slide by mzyy94 and Icons by Font Awesome are licensed under a Creative Commons Attribution 4.0 International License. Upcoming • Learn All APIs so as to play Web Streaming • How to create Streaming Media • DRM Handcrafting • Deep Dive into Adaptive Bitrate • Browser Video Feature Implementation Comparison 47 And more..