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