Question

http://www.youtube.com/html5表示Google Chrome符合MediaSource Extensions＆amp; H.264。

我做了一个简单的测试，检查我的视频是否由Chromium支持，使用＆lt; video id ='player'autoplay ='true'＆gt; ＆lt; source src ='/ test.mp4'type ='video / mp4'/＆gt; ＆LT; /视频＆GT;

视频播放顺畅。

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

最后，我尝试通过AJAX加载相同的视频并将其注入MediaSource缓冲区。它因错误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测试文件。

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

恩里克

Answer 1

感谢大家的回答。看起来更新版本的Chrome可以解决问题。

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

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

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

https://www.youtube.com/html5

Answer 2

试试这个：

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

看电影是否有效。

Answer 3

我认为Chrome目前仅支持使用媒体源扩展的WebM。

H264视频使用src属性。同一视频使用MediaSource API（Chromium）失败

3 个答案: