The .mpd file has a list of the segments with their byte ranges as shown above. To access the segments, you need to parse the mediarange attribute for each line and request it with something like XHR with setRequestHeader to specify the byte range. With this method, there's no server component needed. Here's some code I've been using:
var xhr = new XMLHttpRequest();
// Range is in format of 1234-34567
// url is the .mp4 file path
if (range || url) { // make sure we've got content in our params
xhr.open('GET', url);
xhr.setRequestHeader("Range", "bytes=" + range);
xhr.send();
xhr.responseType = 'arraybuffer';
try {
// watch the ready state
xhr.addEventListener("readystatechange", function () {
if (xhr.readyState == 4) { //wait for video to load
// add response to buffer
try {
// videoSource is a sourceBuffer on your mediaSource object.
videoSource.appendBuffer(new Uint8Array(xhr.response));
videoSource.onreadystatechange = function () {
if (videoSource.readyState == videoSource.done) {
videoElement.play();
}
};
} catch (e) {
// fail quietly
}
}
}, false);