H264视频使用src属性。同一视频使用MediaSource API（Chromium）失败 [英] H264 video works using src attribute. Same video fails using the MediaSource API (Chromium)

问题描述

http://www.youtube.com/html5 表示Google Chrome符合MediaSource Extensions标准&安培; H.264。

http://www.youtube.com/html5 indicates that Google Chrome is compliant with MediaSource Extensions & H.264.

我做了一个简单的测试，检查我的视频是否受Chromium支持，使用
< video id ='player'autoplay ='true'>
< source src ='/ test.mp4'type ='video / mp4'/>
< / video>

I make a simple test checking that my video is supported by Chromium, using the <video id='player' autoplay='true'> <source src='/test.mp4' type='video/mp4' /> </video>

视频播放顺利。

第二种方法也可以正常工作，包括通过AJAX加载字节链并将缓冲区转换为URI对象。然后将此URI设置为（video）source.src属性。

A second alternative that also works fine consists in loading through AJAX the byte chain and converting the buffer to a URI object. Then asigning such URI to the (video) source.src attribute.

最后我尝试通过AJAX加载相同的视频并将其注入MediaSource缓冲区。它因错误4而失败。（Source Not supported）。

Finally I try to load the same video through AJAX and inject it into a MediaSource Buffer. It fails with the error 4. (Source Not supported).

使用的代码类似于：

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();
}

我尝试了不同的mp4文件，使用ffmpeg / avconv或MP4Box生成。这一刻不幸运。类似的代码适用于VP8 / WebM测试文件。

I tried different mp4 files, generated either with ffmpeg/avconv or MP4Box. Not luck at this moment. A similar code works fine with VP8/WebM test files.

预先感谢任何帮助/提示或链接！

Thanks in advance for any help/hint or link!

恩里克

推荐答案

全部谢谢你的回答。看起来更新版本的Chrome可以解决问题。

Thanks all for your answers. Looks like newer versions of Chrome fix the problem.

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

I wrongly assumed that if a codec is supported by the browser, it will automatically be supported by MSE. In practice, that's not the case. A browser can support a set of video codecs (h264/webM/theora/...), it can also support MSE, but just a subset of video codecs when "injecting" the video into MSE buffers.

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

The compatibility matrix between MSE and codecs doesn't only depends on the browser but also on the OS. So for example, Google Chrome Supports MSE+h264 on Windows and Android but not (yet?) on Linux. VP9+MSE is supported on Windows and Linux but not on Android.

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

Youtube has a very useful test page to check browser support for MSE & h264/VP9 codecs:

https://www.youtube .com / html5

这篇关于H264视频使用src属性。同一视频使用MediaSource API（Chromium）失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！