Question

我已经编写了一个VideoBuffer类来加载webm视频片段。当在视频元素中作为blob打开时，或者直接在单独的浏览器选项卡中，每个段都单独工作，但是当将它们附加到源缓冲区时，我似乎无法使其工作。

没有抛出任何错误或异常，MediaSource的就绪状态被关闭，SourceBufferList被清空。我基于this working example上的代码，其主要区别在于我将每个xhr响应附加到缓冲区而不是附加来自FileReader的结果。

为什么这不起作用或我应该如何调试的任何想法？

var EventEmitter = require("events").EventEmitter;

function VideoBuffer(options) {
  this.video = options.video;
  this.source = new MediaSource();
  this.video.src = URL.createObjectURL(this.source);
  this.url = options.url;
  this.segment = 0;
  this.time = 0;
  this.duration = options.duration;
  this.segments = Math.ceil(this.duration/10);
  this.preset = options.preset;
  this.source.addEventListener("sourceopen", this.onSourceOpen.bind(this));
  this.source.addEventListener("sourceended", this.onSourceEnded.bind(this));
  this.video.addEventListener("progress", this.onVideoProgress.bind(this));

  this.on("error", function(err){
    try {
      throw err;
    } catch (e) {
      console.error(e.stack);
    }
  });
}

VideoBuffer.prototype = Object.create(EventEmitter.prototype);

VideoBuffer.prototype.onSourceOpen = function (e) {
  this.debug("Source opened:", this.source);
  var buffer = this.source.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
  buffer.addEventListener("updatestart", this.onBufferUpdateStart.bind(this));
  buffer.addEventListener("update", this.onBufferUpdate.bind(this));
  buffer.addEventListener("updateend", this.onBufferUpdateEnd.bind(this));
  this.debug("Added source buffer:", buffer);
  this.emit("source:open", e);
};

VideoBuffer.prototype.onSourceEnded = function (e) {
  this.debug("Source ended:", this.mediaSource);
  this.emit("source:ended", e);
};

VideoBuffer.prototype.onBufferUpdateStart = function (e) {
  this.emit("buffer:updatestart", e);
};

VideoBuffer.prototype.onBufferUpdate = function (e) {
  this.emit("buffer:update", e);
};

VideoBuffer.prototype.onBufferUpdateEnd = function (e) {
  this.emit("buffer:updateend", e);
  if (this.segment === 0) {
    this.debug("Got first segment, starting playback");
    this.debug(this);
    this.video.play();
  }
};

VideoBuffer.prototype.onVideoProgress = function (e) {
  this.debug("Video progress:", e);
  this.segment++;
  this.loadNextSegment();
}

VideoBuffer.prototype.loadNextSegment = function () {
  var url = this.url
    .replace("%segment", this.segment)
    .replace("%time", this.time)
    .replace("%preset", this.preset);

  this.debug("Loading segment:", this.segment, url);

  this.request = new XMLHttpRequest();
  this.request.responseType = "arraybuffer";
  this.request.open("GET", url, true);
  this.request.onload = this.onRequestLoad.bind(this);
  this.request.send(null);
}

VideoBuffer.prototype.onRequestLoad = function(e) {
  if (this.request.status != 200) {
    this.emit("error", new Error("Unexpected status code"));
    return false;
  }
  var ms = this.source;
  var sb = ms.sourceBuffers.length ? ms.sourceBuffers[0] : false;
  var buffer = new Uint8Array(this.request.response);

  this.debug("Got segment:", buffer.length, "bytes");

  if (buffer.length && sb) {
    try {
      this.debug("Appending segment to source buffer");
      sb.appendBuffer(buffer);
    } catch (e) {
      this.emit("error", new Error(e));
      return false;
    }
    if (this.segment === this.segments) {
      ms.endOfStream();
      return;
    }
  } else {
    this.emit("error", new Error("Empty response or missing source buffer"));
  }
}

VideoBuffer.prototype.play = function (time) {
  this.time = 0;
  this.segment = Math.floor(this.time/10);
  this.loadNextSegment();
};

VideoBuffer.prototype.debug = (function () {
  return console.log.bind(console);
}());

module.exports = VideoBuffer;

注意：上面的代码加载了browserify，这就是为什么它是CommonJS模块。

Gist适合喜欢和/或希望尝试的人。

Answer 1

你确定没有错误吗？尝试摆脱onRequestLoad中的try / catch。

我怀疑正在发生的事情是，当SourceBuffer属性仍为updating时，您正试图附加到true个实例。

每次追加SourceBuffer时，都需要做一些工作，暂时无法接受新的块。最好的方法是使用某种排队机制，或者等到发送下一个XHR之前updateend事件触发。

无法附加到源缓冲区

1 个答案: