HTML5将视频/画布标记保存到文件

时间:2012-11-20 07:13:09

标签: html5 html5-video html5-canvas

我有一个页面可以播放来自本地源的4个视频,我将这些视频全部组合到画布中,以便所有显示通过一个元素(我每隔X秒更新画布上的图像)。有什么方法可以将其保存到视频文件中吗?

1 个答案:

答案 0 :(得分:1)

首先:我不推荐以下方法来处理大量数据!!

您可以创建一个大小足以存储整个视频的数组:

//Size: Colour channels * width * height * noOfFrames
//THIS WILL GET BIG!!
var video = new Uint8Array(3*640*480*24);

然后将视频的每一帧存储在数组

现在您可以使用此代码段作为开头将其转换为DataUrl:

var base64String = btoa(String.fromCharCode.apply(null, video));

(http://stackoverflow.com/a/11562550/1554114)

这会给你类似RAW-Video的东西 这是与DataUrl的链接,通过右键单击/另存为.. /“Test.mp4”保存它 (让我们看看SO是否可以处理这个问题:D - 不,它不能:( - 按'编辑'按钮查看它的样子)

在JavaScript中实现h264取决于你;)