javascript - Media Source Api not working for a custom webm file (Chrome Version 23.0.1271.97 m)

Question

I am referring a media source api demo given on this link

It is working fine for the given test webm file but when i tried to change the name of the file to a custom webm file the code stopped working.

It is generating following error : Uncaught Error: INVALID_STATE_ERR: DOM Exception 11 at following code : sourceBuffer.append(new Uint8Array(e.target.result));

To check whether the custom webm file is working i have created a test page in which i have defined a video tag having source of that custom webm file. When i ran the code it is working fine.

I am unable to understand the reason for this strange behavior.

Answer 1

The most likely problem is your WebM file has Clusters that don't start with a keyframe.

In Chrome dev-channel builds (ie Chrome 25 or later), you can verify this with the following steps.

1. Open chrome:media-internals in another tab.
2. Return to the tab with your test page and reload it.
3. When the error occurs again, switch back to chrome:media-internals tab and look for the bottom entry under the "Active media players:" header. It should have the same blob: URL that you passed to the video element src attribute.
4. Click on the blob: URL to expand the player data.
5. Click on the "Log:" entry to expose the player logging data.
6. Search for entries that have "MEDIA_SOURCE_ERROR" in the "Event:" column. These entries should provide information about what is wrong with the content passed to the browser.

If you see a message that says something like "Media segment did not begin with keyframe." then it means your file has Clusters that don't start with a keyframe. This is common with content that is generated by FFmpeg. You can fix your file in one of the following ways:

1. Run the sample_muxer program mentioned in section 2.2.5 of the WebM adaptive streaming guide
2. Run the mse_webm_remuxer program I wrote as part of my mse-tools project.