6

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

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>

The video plays smoothly.

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.

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).

The code used is similar to:

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

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!

Enrique

4

3 回答 3

4

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

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

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

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

https://www.youtube.com/html5

于 2014-10-28T09:20:42.530 回答
1

尝试这个：

var injectVideoIntoBuffer = function onResponse() {
   var xhr = new XMLHttpRequest();
   xhr.open('GET', "test.mp4");
   xhr.responseType = 'arraybuffer';
   xhr.addEventListener("readystatechange", function () {
       if (xhr.readyState == xhr.DONE) {
           videoSource.appendBuffer(new Uint8Array(xhr.response));
       }
      ... 
   }, false);

可能是您只附加了 mp4 的片段。如果来自 AJAX 请求的片段是整个 mp4 原子，即 moov、moof、mdat，这将很好。但我认为情况可能并非如此。

如果仍然失败，您可以尝试再次对电影进行转码：（注意！这将删除声音）

ffmpeg -an -codec:v libx264 -profile:v baseline -level 3 -b:v 2000k -i in.mp4 out.mp4

和 MP4Box：

MP4Box -dash 10000 -rap -frag-rap out.mp4

就是看电影好不好。

于 2014-03-22T12:36:52.653 回答
0

我认为 Chrome 目前可能只支持带有媒体源扩展的 WebM。

于 2014-10-26T23:47:41.840 回答