Demonstration of MP4Box.js

HTML5 video beyond the MSE API

Select or set URL:
Controls
1
Download Settings
1000000
1000
Segmentation Settings 1000
Debug Settings

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

Feedback

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