HTML5 adaptive video streaming with the media source extensions (MSE). Includes java examples for the MSE and a basic javascript multimedia player.

2. ›
›
›

3. »
›
›

4. »
›
›
»
›
›
»
›
›
»
›
›

5. …

6. »
»
›
›
›
›
›
» ⇒

7. ›
›
›
›
›
›
›

8. https://www.w3.org/TR/media-source/

10. var ms = new window.MediaSource();
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen', function(e) {
...
var sourceBuffer = ms.addSourceBuffer(
'video/mp4; codecs="avc1.4d400d"'
);
sourceBuffer.appendBuffer(videoChunk);
....
}, false);

11. ›
›
›
› new Uint8Array(arrayBuffer);
›

12. var baseUrl = 'https://bitdash-a.akamaihd.
net/content/MI201109210084_1/video/720_2400000/dash/';
var initUrl = baseUrl + 'init.mp4';
var templateUrl = baseUrl + 'segment_$Number$.m4s';
var sourceBuffer;
var index = 0;
var numberOfChunks = 52;
var video = document.querySelector('video');
if (!window.MediaSource) { return; }
var ms = new window.MediaSource();
video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen', onMediaSourceOpen);

13. function onMediaSourceOpen() {
sourceBuffer = ms.addSourceBuffer(
'video/mp4; codecs="avc1.4d401f"');
sourceBuffer.addEventListener('updateend', nextSegment);
GET(initUrl, appendToBuffer);
video.play();
}
function nextSegment() {
var url = templateUrl.replace('$Number$', index);
GET(url, appendToBuffer);
index++;
if (index > numberOfChunks) {
sourceBuffer.removeEventListener('updateend',
nextSegment);
}
}

14. function appendToBuffer(videoChunk) {
if (videoChunk) {
sourceBuffer.appendBuffer(new Uint8Array(videoChunk));
}
}
function GET(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (xhr.status != 200) { return false; }
callback(xhr.response);
};
xhr.send();
}

16. ›
›
›
›
›

17. ›

18. ›
›