Monday, February 26, 2024
-3
rated 0 times [  4] [ 7]  / answers: 1 / hits: 17549  / 10 Years ago, thu, april 10, 2014, 12:00:00

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

More From » google-chrome

 Answers
12

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.


[#71512] Wednesday, April 9, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
aliah

Total Points: 118
Total Questions: 132
Total Answers: 94

Location: Tajikistan
Member since Fri, Sep 11, 2020
4 Years ago
;