Is it possible to generate a bitstream in JS for a HTML5 video source?

Question

I'd like to dynamically generate a bitstream in JavaScript that is e.g. a large OGG-video. Is it possible to tell the browser to ask a JavaScript function for the bitstream instead of making a HTTP-GET-Request to some location?

The only possible way to feed data to the video-tag, that I found, would contain data:-URLs. But that requires the whole video to be encoded in the document.

This is a bad solution for large videos, that would normally be streamed. AFAIK you can't add more data dynamically to data-URLs.

Does anyone know if this is possible somehow?

Do you mean using a "data:string" - as one can in an img-tag ? (http://stackoverflow.com/questions/1207190/embedding-base64-images) — T4NK3R, Mar 05 '14 at 10:10

score 1 · Answer 1 · answered Mar 30 '12 at 09:29

1

I don't know if is possible with Javascript, but you can probably do something like that with a Java or Javascript (?) player, like Cortado.

http://www.flumotion.net/cortado/

answered Mar 30 '12 at 09:29

Tei

1,400
8
6

Thanks, this is useful. I saw a JavaScript decoder somewhere that draws frames on a canvas. This obviously isn't that fast and there's no sound. But that's all a workaround. Cortado requires Java, for example. – anty Mar 30 '12 at 14:51

score 0 · Accepted Answer · answered Apr 21 '17 at 09:08

This should now be possible with the MediaSource API.

Here is an example from the link above:

var video = document.querySelector('video');

var assetURL = 'frag_bunny.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource();
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
  console.error('Unsupported MIME type or codec: ', mimeCodec);
}

function sourceOpen (_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener('updateend', function (_) {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
};

function fetchAB (url, cb) {
  console.log(url);
  var xhr = new XMLHttpRequest;
  xhr.open('get', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    cb(xhr.response);
  };
  xhr.send();
};

score 0 · Answer 3 · answered Mar 17 '12 at 00:34

If your video is encoded for streaming, it will be downloaded progressively by whatever browser is requesting it. That's just how it works. You will need both OGG and MP4 for

FF/Chrome/IE9.

http://www.mediacollege.com/video/streaming/http.html

"encoded on the document" doesn't make any sense. The video is encoded by your encoder and can further have settings to optimize for streaming (that is it encodes the first XX seconds at a lower bitrate to get started faster).

Is it possible to generate a bitstream in JS for a HTML5 video source?

3 Answers3