如何在视频标签（video tag）上播放ArrayBuffer？

Question

我正在从 HTML 画布中获取图像，并希望将这些图像转换为视频。我经过长时间的搜索，只想将几张图像制作成视频。我成功地将多个图像传递给了一个库引擎，并返回了一个数组缓冲区。

我的问题是：

我该如何获取数组缓冲区并在视频标签中播放它，或者转换它以便能够播放。

根据请求：

//You can simply call:
var frames = [];//array to hold each image/frame url
frames.push(canvas.toDataURL('image/png'));//get the data url from canvas

但我的问题更多地涉及使用ArrayBuffer作为视频标记的URI。

- webecon

---

请提供一些代码，说明您是如何从画布中获取图像的？ - Antonio Narkevich

可能是HTML5从图像生成视频的重复问题。 - Karen Grigoryan

Answer 1

我最终采用了以下解决方案：

const arrayBuffer = null; // your ArrayBuffer goes here
// For example you can fetch it from some URL like 
// const arrayBuffer = await fetch(url).then(r => r.arrayBuffer());
const blob = new Blob([arrayBuffer]);
const video = document.createElement('video');
video.src = URL.createObjectURL(blob);
// You can now insert video into DOM

- pragma

Answer 2

你可以直接使用它，也可以使用mediaStream，然后创建URL对象。这个对象可以传递给视频标签。

- hello world

---

欢迎来到Stack Overflow！请确保在回答中尽可能添加代码示例 :) - brad