Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【开源自荐】FFCreator改进版,像HTML一样写视频,可在线玩 #2577

Open
milkliker opened this issue Aug 20, 2022 · 1 comment

Comments

@milkliker
Copy link

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

但目前还有局限:

  • 没有所见即所得的编辑功能,排版难度高;
  • 排版与样式需要写代码实现,不利于分层与封装;
  • 只能在Node.js环境下运行,不能运行在网页中。

米拉视频的小伙伴们Fork了FFCreator和底层渲染库InkPaint,在此基础上实现了网页端运行,释放出JavaScript的潜力,打通了前端预览和后端烧制。
现在以MIT LICENSE开源。

  • 封装JSON接口,标准化视频描述,将代码逻辑和视频描述分离;
  • 优化时长和排版的自适应能力(提供除px以外,百分比/rpx/vw/vh等单位),让模板对不同分辨率导出和不同尺寸、时长的源素材有更好的支持;
  • 【重点】发挥JS能在浏览器端执行的优势,让FFCreator不仅可以用在后端烧制上,也可以用在前端预览和编辑上,达到前后端一致的效果;
  • 加入更多的功能:滤镜、蒙版、动画等。

基于FFCreator实现的所见即所得播放器,可在线玩: DEMO

比如下面一段简单的XML即可实现文字作为视频蒙版动画的效果

<video x="50vw" y="50vh" height="100vh" src="oceans.mp4">
  <text text="OCEAN" fontSize="100rpx" color="#FFF" x="50vw" y="50vh" asMask="true" duration="4">
    <animate time="2" delay="2">
      <from scale="1"></from>
      <to scale="30" y="1500"></to>
    </animate>
  </text>
</video>

开源链接:
https://github.com/miravideo/FFCreator
https://github.com/miravideo/inkpaint

在线体验:
https://miravideo.github.io/mira-player

@milkliker milkliker changed the title 【开源自荐】FFCreator改进版,像HTML一样写视频 【开源自荐】FFCreator改进版,像HTML一样写视频,附在线DEMO Aug 20, 2022
@milkliker milkliker changed the title 【开源自荐】FFCreator改进版,像HTML一样写视频,附在线DEMO 【开源自荐】FFCreator改进版,像HTML一样写视频,可在线玩 Aug 20, 2022
@milkliker
Copy link
Author

milkliker commented Aug 24, 2022

ps. 目前只支持Chrome/Firefox/Edge,不支持Safari

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants