HTMLMediaElement.srcObject

The srcObject property of the HTMLMediaElement interface sets or returns the object which serves as the source of the media associated with the HTMLMediaElement. The object can be a MediaStream, a MediaSource, a Blob and a File (which inherits from Blob).

As of November 2017, browsers only support MediaStream. For MediaSource, Blob and File, you have to create a URL with URL.createObjectURL() and assign it to HTMLMediaElement.src. See below for an example.

Syntax

var sourceObject = HTMLMediaElement.srcObject;

HTMLMediaElement.srcObject = sourceObject;

Value

MediaStreamMediaSource, Blob, or File object (though see the compatibility table for what is actually supported).

Usage notes

Older versions of the Media Source specification required using createObjectURL() to create an object URL then setting src to that URL. Now you can just set srcObject to the MediaStream directly.

Examples

Basic example

In this example, a media source is assigned to a newly-created <video> element.

const mediaSource = new MediaSource();
const video = document.createElement('video');
video.srcObject = mediaSource;

Supporting fallback to the src property

This version of the example above supports older browser versions that require you to create an object URL and assign it to src if srcObject isn't supported.

const mediaSource = new MediaSource();
const video = document.createElement('video');
try {
  video.srcObject = mediaSource;
} catch (error) {
  video.src = URL.createObjectURL(mediaSource);
}

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'srcObject' in that specification.
Living Standard Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support52 Yes

Yes

18 — 58 moz

?39 ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5252 Yes

Yes

18 — 58 moz

39 ? ?

Document Tags and Contributors

Last updated by: Sheppy,