Unable to get MediaSource working with mp4 format

Question

Based on the example here

I downloaded the webm file and encoded as an mp4 file which will play locally but I'm unable to use it as a media source.

MP4Box reports the codec to be avc1.64000d,mp4a.40.2 but adding it to the source buffer did not help.

Here is a demo of the problem (I don't expect it to work in firefox as Media Source Extensions are not supported yet)

and here is the code I'm testing with:

 var FILE,CODEC,mediaSource;
            var NUM_CHUNKS = 5;
            var video = document.querySelector('video');
            window.MediaSource = window.MediaSource || window.WebKitMediaSource;
            if (!!!window.MediaSource) {
                alert('MediaSource API is not available');
            }
            function callback() {
                var sourceBuffer = mediaSource.addSourceBuffer(CODEC);
                GET(FILE, function(uInt8Array) {
                    var file = new Blob([uInt8Array], {type: 'video/mp4'});
                    var chunkSize = Math.ceil(file.size / NUM_CHUNKS);
                    var i = 0;
                    (function readChunk_(i) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
                            if (i == NUM_CHUNKS - 1) {
                                mediaSource.endOfStream();
                            } else {
                                if (video.paused) {
                                    video.play();
                                }
                                readChunk_(++i);
                            }
                        };
                        var startByte = chunkSize * i;
                        var chunk = file.slice(startByte, startByte + chunkSize);
                        reader.readAsArrayBuffer(chunk);
                    })(i);
                });
            }
            function GET(url, callback) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.responseType = 'arraybuffer';
                xhr.send();
                xhr.onload = function(e) {
                    if (xhr.status != 200) {
                        alert("Unexpected status code " + xhr.status + " for " + url);
                        return false;
                    }
                    callback(new Uint8Array(xhr.response));
                };
            }
            function start(type) {
                if (type == 'webm') {
                    FILE = 'test.webm';
                    CODEC = 'video/webm; codecs="vorbis,vp8"';
                }
                if (type == 'mp4') {
                    FILE = 'test.mp4';
                    CODEC = 'video/mp4; codecs="avc1.64000d,mp4a.40.2"';
                }
                mediaSource = new MediaSource();
                video.src = window.URL.createObjectURL(mediaSource);
                mediaSource.addEventListener('sourceopen', callback, false);
                mediaSource.addEventListener('webkitsourceopen', callback, false);
                mediaSource.addEventListener('webkitsourceended', function(e) {
                }, false);
            }

Answer 1

The problem is your file. Media source extensions requires fragmented MP4 with the moov(movie header box) at the beginning of the file, in your case it is placed last.

Also there need to be a moof (Movie fragment box) preceding the mdat (media data box). MP4Box is capable of generating DASH compliant fragmented mp4, but I would recommend that you use their latest nightly releases.

MP4Box -dash 1000 -rap -frag-rap test.mp4

This will generate the a correctly structured fragmented mp4 file with the moov placed in the beginning of the file. Each fragment will be 1 second, starting with a key frame.