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.

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
Methods
Properties

Events

The MediaSource object has these events.

Event	Description
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.

Method	Description
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.

Property	Access type	Description
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.

HTML


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