MediaSource Video Appending Samples

Quickly thrown together samples of some different ways you can use append (appendBuffer) with MediaSource SourceBuffers.

Make sure to see this blog post for details. This samples are mostly for illustrative / educational purposes, and more robust approaches should consider things like buffer size, garbage collection, adaptive quality, etc. For example, in place of my multi-file examples, you would normally use something like HLS or DASH.

You might also want to consider using an existing <video> loading library, like video.js or Shaka Player.

Again, for a more in-depth discussion, make sure to check out my writeup: joshuatz.com/posts/2020/appending-videos-in-javascript-with-mediasource-buffers/

Demo Files

⚠ Currently, the multi-file demos use files with a WEBM container, with VP8 + Vorbis as the codec, and the other demos use VP9 + Opus. This means that they might not work for you if you are using an older browser, or Safari.

🐛 Firefox has been a little buggy for me with multi-file appends; I swapped over those demos from VP9/Opus to VP8/Vorbis and it has seemed to improve things. sequence mode pretty much only ever works in Chrome, but that is to be expected since that really shouldn't work with multi-track input anyways (and Chrome even warns about this in the log).

• Standard (one file, load via fetch + appendBuffer)
  • This one has the most explanatory code and comments
• Base64 (same as standard, but loads video from base64 string)
• multi-file
  • segments (mode = segments) (requires manual offsetting)
  • sequence (mode = sequence) (auto-offsetting, might be sunset by Chrome)

Live Demos

If you want to run the demos in your browser, the HTML and JS from this repo is deployed here:

mediasource-append-examples.netlify.app

If you are currently on that site, here are links back to:

• The Github Repo
• The Writeup