How to play arraybuffer on video tag?

Question

I'm getting images from html canvas and would like to convert these images into a video. Search long and hard. Just want to take a couple of images and make them into a video. I manage to pass multiple images to a library engine and it return me a arraybuffer.

My question:

How can I take a arraybuffer and play it in a video tag or convert it so it can play.

On Request:

//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

But my question concern more of using arraybuffer as a uri for a video tag.

Could you please provide some code of how you are getting the images from canvas? — Antonio Narkevich, Feb 19 '18 at 17:40
Possible duplicate of [HTML5 generating video from images](https://stackoverflow.com/questions/28717016/html5-generating-video-from-images) — Karen Grigoryan, Feb 19 '18 at 18:59

score 4 · Answer 1 · answered Oct 01 '21 at 09:03

I ended up using the following solution:

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

score 1 · Answer 2 · answered Nov 07 '19 at 14:38

1

You can directly use it, You can use mediaStream and then create URL object. Which can be passed to video tag

answered Nov 07 '19 at 14:38

hello world

11
1

4

Welcome to Stack Overflow! Be sure to add a code sample to your answers wherever possible :) – brad Nov 07 '19 at 14:55

How to play arraybuffer on video tag?

2 Answers2