MPEG-DASH and fragmented mp4

Question

My understanding of fragmented mp4 is that it is a single file, but internally it is structured as fragments. Can someone explain to me how these fragments can be addressed in the .mpd file for DASH? The .mpd files that I've seen seem to address various segments with separate urls, but a fragmented mp4, I imagine, would have to be addressed by byte offsets into the same url. How does the browser then know what times correspond to what byte ranges?

Answer 1

Here's a example mpd for MPEG DASH main profile. The mp4 file described by this mpd is a fragmented mp4. As you see :

<SegmentURL media="bunny_15s_200kbit/bunny_200kbit_dashNonSeg.mp4" mediaRange="868-347185"/>
<SegmentURL media="bunny_15s_200kbit/bunny_200kbit_dashNonSeg.mp4" mediaRange="347186-664464"/>

At <SegmentURL> element, the fragments can be addressed into the same url, and you can find byte offsets at @mediaRange attribute.

Answer 2

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);