MediaSource()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The MediaSource() constructor of the MediaSource interface constructs and returns a new MediaSource object with no associated source buffers.

Syntax

var mediaSource = new MediaSource();

Parameters

None.

Example

The following snippet is taken from a simple example written by Nick Desaulniers (view the full demo live, or download the source for further investigation.)

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

...

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
MediaSource
31
23-31
12
42
11
Only works on Windows 8+.
15
8
4.4.3
33
41
14
13
Exposed in Mobile Safari on iPad but not on iPhone.
2.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/MediaSource