媒体源 Api 不适用于自定义 webm 文件（Chrome 版本 23.0.1271.97 m）

我指的是对此给出的媒体源 api 演示link http://html5-demos.appspot.com/static/media-source.html

它对于给定的测试 webm 文件工作正常，但是当我尝试将文件名更改为自定义 webm 文件时，代码停止工作。

它正在生成以下错误：Uncaught Error: INVALID_STATE_ERR: DOM Exception 11在以下代码中：sourceBuffer.append(new Uint8Array(e.target.result));

为了检查自定义 webm 文件是否正常工作，我创建了一个测试页面，在其中定义了一个具有该自定义 webm 文件源的视频标签。 当我运行代码时，它工作正常。

我无法理解这种奇怪行为的原因。

最可能的问题是您的 WebM 文件具有不以关键帧开头的簇。

在 Chrome 开发通道版本（即 Chrome 25 或更高版本）中，您可以通过以下步骤验证这一点。

1. 在另一个选项卡中打开 chrome:media-internals。
2. 返回包含测试页的选项卡并重新加载它。
3. 当错误再次发生时，切换回 chrome:media-internals 选项卡并查找“活动媒体播放器：”标题下的底部条目。它应该具有与您传递给视频元素 src 属性相同的 blob: URL。
4. 单击 blob: URL 以展开玩家数据。
5. 单击“日志：”条目以公开玩家日志数据。
6. 搜索“事件：”列中包含“MEDIA_SOURCE_ERROR”的条目。这些条目应提供有关传递给浏览器的内容有什么问题的信息。

如果您看到类似“媒体片段未以关键帧开始”的消息。那么这意味着您的文件具有不以关键帧开头的簇。这对于 FFmpeg 生成的内容很常见。您可以通过以下方式之一修复文件：

1. 运行2.2.5节中提到的sample_muxer程序WebM 自适应流媒体指南 https://sites.google.com/a/webmproject.org/wiki/adaptive-streaming/instructions-to-playback-a-webm-dash-presentation
2. 运行我作为我的一部分编写的 mse_webm_remuxer 程序MSE工具 http://github.com/acolwell/mse-tools项目。