In order for an MP4 video to be streamed to a client over the web, your web server must respond in a very particular way. Many popular web servers natively support doing this, so you won't need to continue reading this if you are using one.

I've used the following in Node.JS and PHP, as well a web server built in C#, but the concepts can be applied to other languages as well.

These are the requirements for MP4 streaming:

  1. Your web server must report the correct Content-Type header (video/mp4).
  2. Your web server must accept byte range requests.
  3. Your web server must not compress the response for the video.

When requesting the video, the client will make a series of requests, each which must be dealt with properly and return the correct data for it to work.

The following is an example of the server code in pseudocode.

fileSize = mp4File.sizeInBytes

length = fileSize
start = 0
end = length - 1

if (request.headers.contains('Content-Range')) {
    // Example header: Content-Range: 0-65535/65535

    // parse that value into 3 variables: start-end/length

    if parseError
        header('HTTP/1.1 416 Requested Range Not Satisfiable')
        return
    else
        header('HTTP/1.1 206 Partial Content')
} else {
    header('HTTP/1.1 200 OK')
}

header('Content-Range: bytes start-end/length')
header('Content-Length: (end - start + 1)')

// write the bytes of the file to the output starting at (start) and ending with (end)