如何使用媒体源api将两个视频文件数据附加到源缓冲区？

Question

我有两个视频名称v11.webm和v12.webm.

我想要的是这两个视频应该无缝地运行.

我遵循媒体源api方法将数据附加到源缓冲区.

我指的是这个链接上给出的演示

我已修改该示例并删除了分块视频的部分,并尝试将数据附加到源缓冲区文件.

我的代码如下:

<script>

var video = document.querySelector('video');

window.MediaSource = window.MediaSource || window.WebKitMediaSource;
if (!!!window.MediaSource) {
  alert('MediaSource API is not available');
}

var mediaSource = new MediaSource();

video.src = window.URL.createObjectURL(mediaSource);

mediaSource.addEventListener('webkitsourceopen', function(e) {

    var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');  

    for(i=1;i<=2;i++)
    {
        (function(i){

          GET('v1'+i+'.webm', function(uInt8Array) {
              var file = new Blob([uInt8Array], {type: 'video/webm'});

              var reader = new FileReader();
              reader.onload = function(e) {
                sourceBuffer.append(new Uint8Array(e.target.result));            
              };
              reader.readAsArrayBuffer(file);

          });
        })(i);
    }

}, false);

mediaSource.addEventListener('webkitsourceended', function(e) {
  logger.log('mediaSource readyState: ' + this.readyState);
}, false);

function GET(url, callback) {
 // alert(url);
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer';
  xhr.send();

  xhr.onload = function(e) {
    if (xhr.status != 200) {
      alert("Unexpected status code " + xhr.status + " for " + url);
      return false;
    }
    callback(new Uint8Array(xhr.response));
  };
}
</script>

现在代码没有按预期工作.

v11.webm和v12.webm文件数据混合不一致.

它没有无缝运行.

Answer 1

也许有点晚了,但我能够弄清楚这一点.您的新视频会覆盖旧视频,因为它们都是在时间0开始.您必须指定新视频在附加X之前的时间X开始,因此您的'webkitsourceopen'事件函数应为:

/* forget the sourcebuffer variable, we'll just manipulate mediaSource */
mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

/* it seems ok to set initial duration 0 */
var duration = 0;
var totalVideos = 2;

/* use this type of loop to ensure that that a single video
   is downloaded and appended before moving on to the next video,
   mediasource seems picky about these being in order */
var i = 0;
(function readChunk_(i){

    /* the GET function already returns a Uint8Array.
       the demo you linked reads it in filereader in order to manipulate it;
       you just want to immediately append it */
    GET('v1' + (i + 1) + '.webm', function(uint8Array){

        if(i == totalVideos) {
            mediaSource.endOfStream();
        } else {

            /* assuming your videos are put together correctly
               (i.e. duration is correct), set the timestamp offset
               to the length of the total video */
            mediaSource.sourceBuffers[0].timestampOffset = duration;

            mediaSource.sourceBuffers[0].append(uint8Array);

            /* set new total length */
            duration = mediaSource.duration;

            readChunk(++i);
        }
    });
})(i);

现在,如果只有MediaSource对它所接受的视频结构不那么挑剔.我还没有找到一个样本.webm,除了你链接的Eric Bidelman演示中使用的那个样本之外.

编辑:经过更多测试后,我设置持续时间的方式可能不正确.如果您在每次追加后似乎达到指数持续时间增长,请尝试将timestampoffset设置为0而不更改它.我不知道为什么这似乎解决了它,它可能是我如何生成webm文件的问题.

Answer 2

我在您的代码中缺少的是：mediaSource.endOfStream();

您能详细说明一下混合不一致的问题吗？