javascript - XMLHTTPrequest 纯文本到 blob(视频)

Question

我使用此代码实现了从 php 获取视频:

var some_video_element = document.querySelector('video')
var req = new XMLHttpRequest();
req.onload = function () {
    var blob_uri = URL.createObjectURL(this.response);
    some_video_element.src = blob_uri;
    some_video_element.addEventListener('oncanplaythrough', (e) => {
       URL.revokeObjectURL(blob_uri);
    });
};
req.open("get", "vid.php", true);
req.overrideMimeType('blob');
req.send(null);

但是，加载时间很长，所以我想在获得数据后立即显示数据。来自 Mozilia ，表明我们可以使用 plain 或 ""作为 mime 来获取正在进行的文本。但是，我无法使用 blob 将纯文本/文本转换为视频/mp4。目前，这是不起作用的代码。我尝试在某些部分可用而其余部分仍在下载时获取视频。

var some_video_element = document.querySelector('video')
var req = new XMLHttpRequest();
req.onprogress = function () {
    var text = b64toBlob(Base64.encode(this.response), "video/mp4");
    var blob_uri = URL.createObjectURL(text);
    some_video_element.src = blob_uri;
    some_video_element.addEventListener('oncanplaythrough', (e) => {
       URL.revokeObjectURL(blob_uri);
    });
};
req.onload = function () {
    var text = b64toBlob(this.response, "video/mp4");
    var blob_uri = URL.createObjectURL(text);
    some_video_element.src = blob_uri;
    some_video_element.addEventListener('oncanplaythrough', (e) => {
       URL.revokeObjectURL(blob_uri);
    });
};
req.open("get", "vid.php", true);
req.overrideMimeType('text\/plain');
req.send(null);

谢谢。 注意:此 JavaScript 正在获取此 php 代码:https://codesamplez.com/programming/php-html5-video-streaming-tutorial 但是echo数据已经被echo base64_encode(data)改变了；

Answer 1

如果您使用 Fetch API您可以使用 ReadableStream 形式的响应来代替 XMLHttpRequest可以输入 SourceBuffer 。这将允许视频在开始加载后立即播放，而不是等待完整文件下载。这不需要任何特殊的视频容器格式、后端处理或第三方库。

const vid = document.getElementById('vid');
const format = 'video/webm; codecs="vp8,vorbis"';
const mediaSource = new MediaSource();
let sourceBuffer = null;

mediaSource.addEventListener('sourceopen', event => {
  sourceBuffer = mediaSource.addSourceBuffer(format);
  fetch('https://bes.works/dev/samples/test.webm')
  .then(response => process(response.body.getReader()))
  .catch(err => console.error(err));
}); vid.src = URL.createObjectURL(mediaSource);

function process(stream) {
  return new Response(
    new ReadableStream({
      start(controller) {
        async function read() {
          let { done, value } = await stream.read();
          if (done) { controller.close(); return; }
          sourceBuffer.appendBuffer(value);
          sourceBuffer.addEventListener(
            'updateend', event => read(),
            { once: true }
          );
        } read();
      }
    })
  );
}

video { width: 300px; }

<video id="vid" controls></video>