Skip to content

brainfood / videojs-contrib-hls

Go to a project
Toggle navigation
Toggle navigation pinning
c9f97355 by David LaPalomento
Options

Put together a working minimal media segment example 

Create example binary data that is a valid Media Segment and does not produce decode errors when coupled with an appropriate media segment. Add some free-form notes from media source extensions research so far. Update the testing sandbox player.
1 parent 71a0366f
Expand all
Inline Side-by-side
Showing 3 changed files with 64 additions and 19 deletions
1 # Media Source Extensions Notes
2 A collection of findings experimenting with Media Source Extensions on
3 Chrome 36.
4
5 * Specifying an audio and video codec when creating a source buffer
6 but passing in an initialization segment with only a video track
7 results in a decode error
8
9 ## ISO Base Media File Format (BMFF)
10
11 ### Init Segment
12 - `ftyp`
13 - `moov`
14 - `mvex`
15
16 ### Media Segment
17 The structure of a minimal media segment that actually encapsulates
18 movie data is outlined below:
19
20 - `moof`
21 - `mfhd`
22 - `traf`
23 - `tfhd`
24 - `tfdt`
25 - `trun`
26 - `mdat`
27
28 ### Structure
29
30 sample: time {number}, data {array}
31 chunk: samples {array}
32 track: samples {array}
33 segment: moov {box}, mdats {array} | moof {box}, mdats {array}, data {array}
34
35 track
36 chunk
37 sample
38
39 movie fragment -> track fragment -> [samples]
...\ No newline at end of file ...\ No newline at end of file
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
14 <link rel="stylesheet" href="css/main.css"> 14 <link rel="stylesheet" href="css/main.css">
15 15
16 <script src="js/vendor/modernizr-2.6.2.min.js"></script> 16 <script src="js/vendor/modernizr-2.6.2.min.js"></script>
17 <script src="min-m4s.js"></script>
17 </head> 18 </head>
18 <body> 19 <body>
19 <!--[if lt IE 7]> 20 <!--[if lt IE 7]>
...@@ -60,37 +61,36 @@ ...@@ -60,37 +61,36 @@
60 61
61 62
62 function closed() { 63 function closed() {
63 window.alert("MediaSource Closed."); 64 console.log("MediaSource Closed.");
64 }
65
66 function append(buffer, bytes) {
67 if ("append" in buffer) {
68 buffer.append(bytes);
69 } else if ("appendBuffer" in buffer) {
70 buffer.appendBuffer(bytes);
71 }
72 } 65 }
73 66
67 var done = false;
74 function loadFragment() { 68 function loadFragment() {
69 if (done) {
70 return;
71 }
75 console.log("LOAD FRAGMENT"); 72 console.log("LOAD FRAGMENT");
73 /*
76 var req = new XMLHttpRequest(); 74 var req = new XMLHttpRequest();
77 req.responseType = "arraybuffer"; 75 req.responseType = "arraybuffer";
78 req.open("GET", "./0.m4s", true); 76 req.open("GET", "../fixtures/dash/1-avc1.42c00d.m4s", true);
77 */
79 78
80 79
81 req.onload = function () { 80 //req.onload = function () {
82 console.log("FRAGMENT DONE LOADING"); 81 console.log("FRAGMENT DONE LOADING");
83 82
84 append(sourceBuffer, new Uint8Array(req.response)); 83 sourceBuffer.appendBuffer(new Uint8Array(m4s));
85 video.play(); 84 done = true;
86 }; 85 //};
87 86
87 /*
88 req.onerror = function () { 88 req.onerror = function () {
89 window.alert("Could not load fragment."); 89 window.alert("Could not load fragment.");
90 }; 90 };
91 91
92 req.send(); 92 req.send();
93 93 */
94 } 94 }
95 95
96 function loadInit() { 96 function loadInit() {
...@@ -98,12 +98,12 @@ ...@@ -98,12 +98,12 @@
98 console.log("LOAD INIT"); 98 console.log("LOAD INIT");
99 var req = new XMLHttpRequest(); 99 var req = new XMLHttpRequest();
100 req.responseType = "arraybuffer"; 100 req.responseType = "arraybuffer";
101 req.open("GET", "./Header.m4s", true); 101 req.open("GET", "../fixtures/dash/init.mp4", true);
102 102
103 req.onload = function () { 103 req.onload = function () {
104 console.log("INIT DONE LOADING"); 104 console.log("INIT DONE LOADING");
105 append(sourceBuffer, new Uint8Array(req.response)); 105 sourceBuffer.appendBuffer(new Uint8Array(req.response));
106 loadFragment(); 106 sourceBuffer.addEventListener('update', loadFragment);
107 }; 107 };
108 108
109 req.onerror = function () { 109 req.onerror = function () {
...@@ -117,8 +117,11 @@ ...@@ -117,8 +117,11 @@
117 function opened() { 117 function opened() {
118 118
119 console.log("OPENED"); 119 console.log("OPENED");
120 sourceBuffer = ms.addSourceBuffer('video/mp4;codecs="avc1.4D400D"'); 120 sourceBuffer = ms.addSourceBuffer('video/mp4;codecs="avc1.42c00d"');
121 121
122 sourceBuffer.addEventListener('updateend', console.log.bind(console));
123 sourceBuffer.addEventListener('updatestart', console.log.bind(console));
124 sourceBuffer.addEventListener('update', console.log.bind(console));
122 loadInit(); 125 loadInit();
123 } 126 }
124 127
...@@ -136,6 +139,9 @@ ...@@ -136,6 +139,9 @@
136 139
137 ms.addEventListener('sourceopen', opened, false); 140 ms.addEventListener('sourceopen', opened, false);
138 ms.addEventListener('sourceclose', closed, false); 141 ms.addEventListener('sourceclose', closed, false);
142
143 ms.addEventListener('update', console.log.bind(console));
144 ms.addEventListener('updateend', console.log.bind(console));
139 } 145 }
140 load(); 146 load();
141 </script> 147 </script>
......