15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 像写HTML一样编写视频:FFCreator网页端预览的改造

像写HTML一样编写视频:FFCreator网页端预览的改造

时间:2023-07-03 04:30:02 | 来源:网站运营

时间:2023-07-03 04:30:02 来源:网站运营

像写HTML一样编写视频:FFCreator网页端预览的改造:FFCreator是腾讯新闻前端团队开源的一个视频生成库。基于Node.js,利用WebGL来渲染图像,ffmpeg烧制,有简单的JavaScript的API可以帮助程序员快速的生成视频。



如果你还不知道FFCreator,可以先移步这里了解: github.com/tnfe/FFCreator

本站上也能找到不少介绍:
自动化批量合成视频,FFCreator。基于node.js的轻量视频制作库。


FFCreator目前还有些局限,比如:

所以我们fork了FFCreator,并在基础上进行了非常大的改动(这也是不能再提PR合并到源仓库的原因),在新的前端FFCreator的基础上,可以直接用XML和JSON的格式来书写【视频描述】,并直接可在网页端预览播放
感兴趣的小伙伴可以访问这个DEMO玩玩: MiraPlayer



采用JSON格式,树形结构描述的视频如下:

const video_data = { "type": "canvas", "width": 1280, "height": 720, "children": [ { "type": "video", "src": "/src/video1.mp4", "width": "100vw", "ss": 10, "to": 20, }, { "type": "video", "src": "/src/video2.mp4", "height": "100vh", }, ],};我们可以简单的把树形结构的节点想象为HTML里的DOM节点。 每个节点都有type和children属性,以及节点类型所对应的属性。 为了便于理解和编写测试,我们也引入了MiraML(XML格式)作为补充,上面的JSON等同于以下:

<miraml> <canvas width="1280" height="720"> <video src="/src/video1.mp4" width="100vw" ss="10" to="20"></video> <video src="/src/video2.mp4" height="100vh"></video> </canvas></miraml>引入树形结构的目的是:

  1. 父子节点关系,可用于处理时间依赖
  2. 与DOM节点逻辑类似,便于理解
开源地址: FFCreator
如果遇到问题也可以扫码入群:



关键词:改造,视频,编写

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭