H264 视频使用 src 属性工作。同一视频使用 MediaSource API (Chromium) 失败

Question

http://www.youtube.com/html5表示 Google Chrome 与 MediaSource Extensions & H.264 兼容。

我使用 <video id='player' autoplay='true'> <source src='/test.mp4' type='video/mp4' /> </视频>

视频播放流畅。

第二种同样有效的替代方法是通过 AJAX 加载字节链并将缓冲区转换为 URI 对象。然后将此类 URI 分配给（视频）source.src 属性。

最后，我尝试通过 AJAX 加载相同的视频并将其注入 MediaSource 缓冲区。它因错误 4 失败。（不支持来源）。

使用的代码类似于：

var mediaSource = new (window.MediaSource || window.WebKitMediaSource)();
window.video = document.getElementById('video1');
window.video.addEventListener("error", function onError(err) {
    alert("window.video error detected:");
    console.dir(window.video.error); window.worker.terminate();
}); 
window.video.pause();
window.video.src = URL.createObjectURL(mediaSource);
var onMediaSourceOpen = function (e) {
    mediaSource.removeEventListener('sourceopen', onMediaSourceOpen);
    window.videoSource = mediaSource.addSourceBuffer('video/mp4;codecs="avc1.4d001e,mp4a.40.2"');
    injectVideoIntoBuffer();
}   

mediaSource.addEventListener('sourceopen', onMediaSourceOpen);

var injectVideoIntoBuffer = function onResponse() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "test.mp4");
    xhr.responseType = 'arraybuffer';
    xhr.addEventListener("readystatechange", function () {
         // Next line raises a MediaError, code: 4, (MEDIA_ERR_SRC_NOT_SUPPORTED)
         videoSource.appendBuffer(new Uint8Array(xhr.response));
          ... 
    }, false);
    xhr.send();
}

我尝试了使用 ffmpeg/avconv 或 MP4Box 生成的不同 mp4 文件。目前运气不好。类似的代码适用于 VP8/WebM 测试文件。

在此先感谢您提供任何帮助/提示或链接！

恩里克

Answer 1

感谢大家的回答。看来新版本的 Chrome 解决了这个问题。

我错误地认为如果浏览器支持某个编解码器，MSE 也会自动支持它。但实际情况并非如此。浏览器可以支持一组视频编解码器（h264/webM/theora/...），它也可以支持 MSE，但在将视频“注入”MSE 缓冲区时仅支持视频编解码器的子集。

MSE 和编解码器之间的兼容性矩阵不仅取决于浏览器，还取决于操作系统。例如，Google Chrome 在 Windows 和 Android 上支持 MSE+h264，但在 Linux 上还不支持（还？）。Windows 和 Linux 支持 VP9+MSE，但 Android 不支持。

YouTube 有一个非常有用的测试页面来检查浏览器对 MSE 和 h264/VP9 编解码器的支持：

https://www.youtube.com/html5