I have this web page (see code), the script runs without errors and the chunks are showed in the console as Uint8Arrays but the video do not show-up. On the server side the 13 .mp4 videos are present.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video</title>
<!--<link rel="stylesheet" href="styles.css">-->
</head>
<body>
<div class="content">
<h1>My Video</h1>
<video id="video" width="640" height="480" type="video/mp4" autoplay muted decoration></video>
<script>
'use strict';
var video = document.querySelector('video');
var i = 0;
var url = "0.mp4";
if (!window.MediaSource) {
alert('The MediaSource API is not available on this platform');
}
var mediaSource = new MediaSource();
var sourceBuffer;
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
sourceBuffer =
mediaSource.addSourceBuffer('video/mp4'); // ; codecs="h264"
get(url, MyCallback);
});
function MyCallback(chunk)
{
console.log(chunk);
sourceBuffer.appendBuffer(chunk);
if (video.paused) {
video.play(); // Start playing after 1st chunk is appended.
}
i++;
if(i===14)
i = 0;
url = i.toString()+".mp4";
get(url, MyCallback);
}
function get(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.send();
xhr.onload = function() {
if (xhr.status !== 200) {
alert('Unexpected status code ' + xhr.status + ' for ' + url);
return false;
}
callback(new Uint8Array(xhr.response));
};
}
</script>
</div>
</body>
</html>type here
I did try to set the video scr= one of those mp4 and it was playing correctly, just to say the mp4 format seems good for firefox.