Skip to main content
MediaSource object

Represents a source of media data (audio or video) for a media element.

Important  This object is not supported in Internet Explorer 11 on Windows 7.

This object tracks the readyState for the source, as well as a list of SourceBuffer objects that can be used to add media data to the presentation.

IE11

Syntax

var mediaSrc = new MediaSource(); 

DOM Information

Inheritance Hierarchy

The MediaSource does not inherit from any class or interface.

Members

The MediaSource object has these types of members:

Events

The MediaSource object has these events.

EventDescription
sourceclose

Occurs when the media source is ended.

sourceended

Occurs when the media source is ended.

sourceopen

Occurs when the media source is opened.

 

Methods

The MediaSource object has these methods.

MethodDescription
addEventListener

Registers an event handler for the specified event type.

addSourceBuffer

Creates a new SourceBuffer and adds it to the SourceBuffers property of the MediaSource.

dispatchEvent

Sends an event to the current element.

endOfStream

Used to indicate that the end of the stream has been reached.

isTypeSupported (MediaSource)

Verifies if the MediaSource supports creating SourceBuffer objects for the specified MIME type.

removeEventListener

Removes an event handler that the addEventListener method registered.

removeSourceBuffer

Removes a source buffer from the MediaSource object.

 

Properties

The MediaSource object has these properties.

PropertyAccess typeDescription

activeSourceBuffers

Read-only

Gets the list of source buffers that are currently providing media data.

duration (MediaSource)

Read/write

Gets or sets the duration in seconds for the media.

readyState

Read-only

Gets the current state of the MediaSource.

sourceBuffers

Read-only

Gets the SourceBuffer objects that are attached to the MediaSource.

 

Remarks

MediaSource is part of the W3C Media Source Extensions (MSE) standard. MSE enables developers to dynamically build media using buffers for the media source instead of having to use fixed files.

MSE can be used in scenarios such as video splicing, live streaming, and adaptive streaming solutions.

The MediaSource manages the c of the source as well as the SourceBufferList, which is comprised of SourceBuffer objects, associated with the MediaSource.

To associate a MediaSource object with a media element, set the src of the audio or video object to the MediaSource.

W3C Media Source Extensions spec.

Examples

This example gets a video object, creates a new MediaSource object, and assigns the MediaSource to the src (source) of the video object. See a complete example online.


// Create mediaSource and initialize video 
function setupVideo() {
  clearLog(); // Clear console log

  //  Create the media source 
  if (window.MediaSource) {
    mediaSource = new window.MediaSource();
   } else {
    log("mediasource or syntax not supported");
    return;
  }
  var url = URL.createObjectURL(mediaSource);
  videoElement.pause();
  videoElement.src = url;
  videoElement.width = width;
  videoElement.height = height;

  // Wait for event that tells us that our media source object is 
  //   ready for a buffer to be added.
  mediaSource.addEventListener('sourceopen', function (e) {
    try {
      videoSource = mediaSource.addSourceBuffer('video/mp4');
      initVideo(initialization, file);           
    } catch (e) {
      log('Exception calling addSourceBuffer for video', e);
      return;
    }
  },false);

See also

Building a simple MPEG-DASH streaming player