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

我想要的是这两个视频应该无缝运行，没有任何间隙。

我遵循将数据附加到源缓冲区的媒体源 API 方法。

我指的是关于此 link 的演示

我修改了那个例子，删除了视频分 block 的部分，还尝试将数据附加到源缓冲区文件中。

我的代码如下:

<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 文件数据混合不一致。

它不是无缝运行的。

最佳答案

也许有点晚了，但我能够弄清楚这一点。您的新视频正在覆盖旧视频，因为它们都从时间 0 开始。您必须指定新视频在追加之前从时间 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 对它接受的视频的结构没有那么令人沮丧地挑剔就好了。除了在 Eric Bidelman's Demo 中使用的相同示例之外，我还没有找到一个单独的示例 .webm。你链接了。

编辑:经过更多测试后，我设置持续时间的方式可能不正确。如果您似乎在每次追加后持续时间呈指数增长，请尝试将 timestampoffset 设置为 0 并且不要更改它。我不知道为什么这似乎可以解决问题，这可能与我生成 webm 文件的方式有关。

关于javascript - 如何使用媒体源 api 将两个视频文件数据附加到源缓冲区？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14108536/