Select or set URL:

URL:

Download/Playback Controls

Play Load Media Info Add and Initialize All Source Buffers Initialize Source Buffers Load Media Data & Play Stop Media Download Reset
Playback Rate

1

Number of Media Samples per Segment for MSE appendBuffer

1000

Number of TextTrack Samples per Extraction Callback

1

Instructions

To run this demo (in Chrome or Firefox), you should:

1. Select an existing file or enter a URL.
   Be careful to select a video hosted on a server which allows this page to fetch those videos using XHR (i.e. using CORS) or run Chrome in command line with the --test-type and --disable-web-security switches.
2. Optionally change some settings:
   • Download Settings:
     • Select a chunk size for the download of the media file. 0 means fetching the whole file in one XHR.
     • Select the timeout between two chunk downloads (the associated bitrate is computed and displayed)
     • You can alternatively select the real-time download: the timeout for download is computed based on the buffer state and playback rate
   • Segmentation Settings: change the number of frames used to created a media segment. A small number means a lot of processing for the browser via MSE. A large number means additional latency before the initial playback.
   • Debug Settings:
     • Save Results: will download a file on your computer for each created segment !
     • Log level: error, warning, info or debug messages are output in the debug console.
3. Then either hit the "Play" button and let the file download and play, or control individually each step:
   1. Hit the "Load Media Info" button. Chunks will be downloaded until there is enough data to display the file information.
   2. Once the file information is displayed, select the tracks you want to play. For each track a SourceBuffer or a TextTrack is created.
   3. Once your tracks are selected, initialize the Source Buffers with the "Initialize Source Buffers" button. (You can also hit the "Add and Initialize All Source Buffers". This will select all tracks and try to create a SourceBuffer for it. Might not work for all files!)
   4. Then hit the "Load Media Data & Play" button to resume the download and let the playback start.
4. At any time, you can:
   • hit the "Stop Media Download" button and then "Load Media Data & Play" again when ready.
   • hit the "Reset" button to select a different URL.
   • seek into the video using the timeline.
   • change the playback rate of the video.

Notes

• The Media Source API in Chrome has some limitations, which you might encounter when playing with this demo:
  • It does not support more than 1 video and 1 audio
  • It does not support adding new SourceBuffers once the existing SourceBuffers are initialized. But you can remove some, even during playback.

Feedback

To get the code of this demo, or to send patchs or feedback, check out the Git Hub Repository.