美光科技任命朱文菊为美光半导体（西安）有限责任公司副总裁
06-06
TNTWeb——全称是腾讯新闻前端团队。群里的朋友在Web前端、NodeJS开发、UI设计、移动APP等各大前端领域都有实践和积累。
目前团队主要支持腾讯新闻各项业务的前端开发。除了业务发展之外，还积累了一些前端基础设施，为业务效率和产品创新赋能。
团队倡导开源共建，拥有各类技术专家。团队的Github地址： ，项目地址：FFCreator （前言）先说点什么吧。
当今时代太平盛世，但互联网领域却始终一片混乱。我们今天要说的是短视频领域。
短视频已成为一种越来越流行的媒体传播形式。像微视和抖音这样的应用程序每天都会产生数以千计的精彩短视频。
而这些视频也给产品带来了巨大的流量。随后，如何让用户快速制作出一个短视频；或者说产品平台如何利用现有的图片、视频、音乐素材批量合成大量视频也成为了技术难点。
今天给大家带来的是一个基于node.js的轻量级灵活的短视频生产库。您只需要添加几张图片或视频片段并添加一些背景音乐即可快速生成炫酷的视频片段。
image.pnggithub地址：init，回车即可。代码语言：txt copy mkdir ffcreator-example && cd ffcreator-examplenpm init 接下来继续我们今天包的安装操作 代码语言：txt copy npm install ffcreatooryarn add ffcreato 最重要的是ffcreator依赖于FFnpeg，所以FFmpeg必须被安装。
FFCreatorLite 依赖于 FFmpeg>=0.9 或更高版本。请将FFmpeg设置为全局变量，否则需要使用setFFmpegPath添加FFmpeg本机路径。
（Windows 用户的 ffmpeg 很可能不在您的 %PATH 中，因此您必须设置 %FFMPEG_PATH）。关于安装FFmpeg的教程，我只讲windows和mac。
上面的其他github上有更详细的说明。之所以只讲windows和mac，是因为对于前端开发者来说，大部分都是mac。
，还有部分窗户。对于其他开发者来说，如果想尝试一下，可以去上面的github查看其他环境的安装方法。
Windows：下载、解压、设置环境变量、使用，共四步。参考文档 mac： 一共两部分： 安装homebrew（如果已经安装了可以忽略，直接下一步）： 代码语言： txt copy /bin/bash -c "$(curl -fsSL至此安装ffmpeg参考文档，项目、环境、依赖都已经准备好了，我们可以进行下一步了。
关于使用 ffcreator 是一个节点库，提供了多种构造函数供使用： 代码语言：txt copy - FFScene, // 屏幕，也叫场景 // 创建一个新的显示屏幕 const scene = new FFScene(); // 设置背景色 scene.setBgColor('#6b'); // 设置停留时长 scene.setDuration(8.5); // 设置过渡动画（类型、时间） scene.setTransition('Fat', 1.5); // 设置屏幕添加到视频创建者实例中 Creator.addChild(scene);const text = new FFText({text: 'This is a text', x: , y: 80});// 文本颜色 text.setColor ('#ffffff'); //背景颜色 text.setBackgroundColor('#b1'); //动画显示为fadeIn，动画时长1秒，延迟时间1秒，text.addEffect("fadeIn", 1, 1); //设置文本水平居中 text.alignCenter(); // 设置样式对象 text.setStyle({padding: [4, 12, 6, 12]}); // 将当前文本节点添加到屏幕 scene.addChild(text );//创建图片元素，图片路径为../images/demo.pngconst img = new FFImage({path: '../images/ demo.png'});//设置位置 img.setXY(, ); // 设置缩放比例 img.setScale(2); // 设置旋转 img.setRotate(45); // 设置透明度 img.setOpacity(0.3）； // 设置宽度和高度 img.setWH(, ); // 设置动画效果 // 设置动画效果为slideInDown，动画时长1.2秒，延迟时间0img.addEffect("slideInDown", 1.2, 0); //将当前图片节点添加到屏幕scene.addChild(img);//创建视频元素，视频路径为../videos/demo.mp4，位置在屏幕上//宽度为，高度为 。 const video = new FFVideo({ 路径: videopath, x: , y: , 宽度: , 高度: });设置是否有音乐视频.setAudio(true); // 设置是否循环 video.setLoop(true);//截取播放时长，设置视频播放的开始时间和结束时间 video.setTimes("00:00:43", "00:00:50") ; // 单独设置视频播放开始时间 video.setStartTime("00 :00:43"), // 单独设置视频播放结束时间 video.setEndTime("00:00:50"), // 有许多其他视频方法... // 将当前视频元素添加到屏幕上方 scene.addChild(video); // 创建一个新的相册元素const album = new FFAlbum({ list: [img1, img2, img3, img4], // 专辑图片集合 x: , y: , width: , height: ,}); // 设置相册切换动画 album.setTransition( 'zoomIn'); // 设置单张图片的时长 album.setDuration(2.5); // 设置单个动画的时长 album.setTransTime(1.5);场景.addChild(专辑); // 将当前专辑元素添加到屏幕 scene.addChild(video);FFNode，下面所有类型的基类，可以直接看下面。
FFText，文字元素FFImage，图片元素FFVideo，视频元素FFAlbum，相册元素FFVtuber，虚拟主播图片代码语言：txt copy const vtuber = new FFVtuber({ x: , y: }); // 设置动画时间周期 vtuber. setPeriod([ [0, 3], [0, 3]]);//这里设置路径baby/[d].png和baby/%d.png。两种方法都可用 const vpath = path.join(__dirname, "./avator/baby/[d].png"); // 从 1-7.pngvtuber.setPath(vpath, 1, 7); // 播放速度 vtuber.setSpeed(6); Creator.addVtuber(vtuber );FFSubtitle，字幕元素代码语言：txt copy const content = '在这里使用计算机很酷，它们非常听话，做任何他们被告知的事情......';const subtitle = new FFSubtitle({ text : content, comma : true, // 是否以逗号分隔 backgroundColor: '#9C', // 背景颜色 color: '#fff', // 文本颜色 fontSize: 24 // 字体大小 }); // 设置copy，或者放在conf中 subtitle.setText(content); // 缓存帧 subtitle.frameBuffer = 24; // 设置字幕总时长 subtitle.setDuration(12);场景.addChild(字幕); // 设置语音配音-ttssubtitle.setSpeech(dub); FFTween，除了上述类型的渐变之外，还有示例和运行：FFCreator，//创建示例代码语言：txt copy const Creator = new FFCreator({cacheDir, //缓存目录outputDir, //输出目录output, //输出文件名(FFCreatorCenter中可省略) width: , //视频宽度height : , // 视频高 audioLoop: true, // 音乐循环 fps: 24, // fps 个线程: 4, // 多线程（假）并行渲染 debug: false, // 开启测试模式 defaultOutputOptions: null, / / ffmpeg 输出选项配置});//为创建者实例添加屏幕creator.addChild(scene);//启动创建者的start函数。
Creator.start();FFCreatorCenter, // 核心运行库，通过addTask运行代码语言: txt copy // 这样可以启动多个任务，FFCreatorCenter.addTask(createFFTask)当然不需要使用FFCreatorCenter，直接运行创建FFTask();如果有demo，图片动画：图片动画演示地址、演示源码地址 多图相册：多图相册演示地址、演示源码地址 场景转场：场景转场演示地址、演示源码地址 配音 字幕：配音字幕演示地址、演示源代码地址 视频动画：视频动画演示地址、演示源代码地址写在最后短视频在网上很猖獗，为什么不跟风用代码来实现短视频的创作呢？既然可以用node创建短视频，为什么不结合服务器来实现拖拽组合，直观地生成短视频呢？这些应该都是可以实现的。如果你幸福，请努力让自己更幸福；如果你不快乐，请努力让自己快乐；如果你不快乐，请努力让自己快乐；如果你不快乐，请努力让自己快乐；如果你不快乐，请努力让自己快乐；如果你不快乐，请努力让自己快乐。
总之，工作让我快乐~祝大家工作顺利，开心每一天~如果感觉不错，点星星走吧~Team TNTWeb - 腾讯新闻前端团队，TNTWeb 致力于探索前沿技术行业并提高团队成员的个人能力。
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
标签：
相关文章
06-18
06-21
06-18
06-18
06-08
06-17
06-17
最新文章
【玩转GPU】ControlNet初学者生存指南
【实战】获取小程序中用户的城市信息（附源码）
包雪雪简单介绍Vue.js：开学
Go进阶：使用Gin框架简单实现服务端渲染
线程池介绍及实际案例分享
JMeter 注释 18 - JMeter 常用配置组件介绍
基于Sentry的大数据权限解决方案
【云+社区年度征文集】GPE监控介绍及使用