11

我有两个视频名称 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 文件数据的混合不一致。

它没有无缝运行。

4

3 回答 3

11

也许有点晚了，但我能够弄清楚这一点。您的新视频正在覆盖旧视频，因为它们都从时间 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 的演示中使用的那个之外，我还没有找到一个可以工作的示例 .webm 。

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

于 2013-08-02T21:40:15.620 回答
3

只需将 sourceBuffer 的模式设置为'sequence'（默认似乎是'segments'）

来自文档：https ://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/mode

序列：将片段附加到 SourceBuffer 的顺序决定了它们的播放顺序。为遵守此顺序的段自动生成段时间戳。

在我的应用程序中，我只是在将源缓冲区添加到媒体源之后设置它：

// Create media source for the stream, and create the source buffer when ready
let self = this;
this._mediaSource = new MediaSource();
this._mediaSource.addEventListener('sourceopen', function () {
  self._sourceBuffer = self.mediaSource.addSourceBuffer(environment.recordingMimeType);
  self._sourceBuffer.mode = 'sequence'; // This is the relevant part
  self._sourceBuffer.addEventListener('error', function (ev) {
    console.error("Source buffer error ??");
    console.error(ev);
  });
});
于 2020-06-08T10:41:52.960 回答
1

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

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

于 2013-01-01T07:49:26.920 回答