7wu1wm0 发表于 3 天前

进击吧！百家号在线视频编辑器技术


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_gif/6nWVkbiaAIRKhic0TfeV1ykD0l9uHD5Lmw6sZPojl3CibbtOZpYE9gcb4PicicaNd0vF7wt5ib6fnx8PlicSock8HyibSw/640?wx_fmt=gif&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">导读：</span></strong><span style="color: black;">随着移动互联网的发展，视频化浪潮借着5G的东风扑面而来。然而众多用户在进行视频化创作的过程中，被传统视频编辑器<span style="color: black;">繁杂</span>的功能和陡峭的学习曲线劝退。为此，百度百家号业务<span style="color: black;">开发</span>团队结合用户的<span style="color: black;">实质</span>创作<span style="color: black;">需要</span>，<span style="color: black;">研发</span>出一款简单易用的在线视频编辑和发布工具——百家号在线视频编辑器。本文将细致地介绍这一编辑器的技术原理，架构和演进方向，并从一角揭示百度内部的技术合作与创新机制。</span></span></p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">前言</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">随着移动互联网的快速发展，人们越来越习惯于在手机上观看视频内容。百家号<span style="color: black;">做为</span>手百的内容生产平台，需要为作者<span style="color: black;">供给</span>简单易用的视频编辑和发布工具。</span><span style="color: black;">在线视频编辑器正是在这种<span style="color: black;">需要</span>下应运而生。</span><span style="color: black;">这篇内容将细致地介绍百家号视频编辑器所采用的技术。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">名词解释</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">BOS：</span></strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">百度对象存储BOS（Baidu Object Storage）<span style="color: black;">供给</span>稳定、安全、<span style="color: black;">有效</span>以及高扩展存储服务</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">VOD：</span></strong><span style="color: black;">视频点播服务，本文特指百度VideoWorks（原VOD 音视频点播服务）</span></p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">01</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个在线视频编辑器都要实现<span style="color: black;">那些</span>功能？</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">编辑器的<span style="color: black;">基本</span>功能</span></h2><span style="color: black;"><span style="color: black;">咱们</span>调查了本地视频编辑器，列举出<span style="color: black;">有些</span>视频编辑器必须要实现的功能：</span><span style="color: black;">素材源文件管理，加载和编辑</span><span style="color: black;">多轨道编辑器</span><span style="color: black;">拖拽操作（添加/删除素材, 添加/删除效果, 快速剪辑, 切换轨道 等）</span><span style="color: black;">音视频轨道分离</span><span style="color: black;">素材效果（浮雕、怀旧等），转场动画（淡入淡出、</span><span style="color: black;">螺旋等），素材动画（单点缩放、模拟晃动等）</span><span style="color: black;">字幕编辑和嵌入</span><span style="color: black;">视频预览</span><span style="color: black;">多种格式渲染导出</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">在线编辑器的独特功能</span></h2><span style="color: black;">一款在线视频编辑器，<span style="color: black;">一样</span><span style="color: black;">亦</span>要实现<span style="color: black;">以上</span>功能，只是<span style="color: black;">详细</span>实现上有所<span style="color: black;">区别</span>，例如：</span><span style="color: black;">素材管理：要实现素材源文件的上传和删除</span><span style="color: black;">视频预览：由前端js实现的简单预览</span><span style="color: black;">导出：在线视频编辑器<span style="color: black;">重点</span>为百家号发布器服务，<span style="color: black;">因此呢</span>不导出视频文件，而是接入视频发布流程</span><span style="color: black;"><span style="color: black;">另外</span>，依托于百度和百家号技术体系，还<span style="color: black;">能够</span>实现音频转字幕，字幕合成音频，百家号图文内容转视频等额外功能。</span>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">02</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">怎样</span>实现一个在线视频编辑器？</p>

    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">后端技术选型</span></h2><span style="color: black;">FFmpeg是业界最常用的视频编解码集成框架，不仅功能强大，<span style="color: black;">况且</span>编解码效率很高。<span style="color: black;">因此呢</span>，后端服务采用FFmpeg<span style="color: black;">做为</span>视频编解码底层。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">FFmpeg介绍</span></h2><span style="color: black;">FFmpeg是一个自由软件，<span style="color: black;">能够</span>运行音频和视频多种格式的录影、转换、流功能。<span style="color: black;">包括</span>了libavcodec——一个用于多个项目中音频和视频的解码器库，以及libavformat——一个音频与视频格式转换库。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0kstqibcPooxfFlY6qfLYIQjxgwhkfQwW2maeenphgRW6gL0X7cYAyTbnTw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">△图 1 ffmpeg</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">FFmpeg特性</span></h2><span style="color: black;">自由软件，代码开源；</span><span style="color: black;">自带众多滤镜（插件），能满足现<span style="color: black;">周期</span><span style="color: black;">所有</span>业务<span style="color: black;">需要</span>；</span><span style="color: black;">支持第三方滤镜（插件），能满足<span style="color: black;">将来</span>业务<span style="color: black;">需要</span>；</span><span style="color: black;">支持自定义编译，支持动态编译，尽可能降低内存占用；</span><span style="color: black;">支持远程文件（http、ftp等）<span style="color: black;">做为</span>输入，减少本地磁盘占用；</span><span style="color: black;">支持GPU编解码，降低CPU占用，<span style="color: black;">提高</span>编解码速度(本业务咱时未<span style="color: black;">运用</span>GPU集群）；</span><span style="color: black;">语法简单，便于二次封装或组装。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">命令行用法</span></h2><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0kstoQYqZexTFicwek6wglgAeWakPkxs0ZDfyGoMYJ1nAbhhry8f5tpNlUg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">△图 2 ffmpeg命令行用法</span><span style="color: black;">例<span style="color: black;">1</span>: ffmpeg -i <span style="color: black;">in</span>.wmv -vcodec libxvid <span style="color: black;">out</span>.mp4</span><span style="color: black;">例<span style="color: black;">2</span>: ffmpeg -framerate <span style="color: black;">1</span> -t <span style="color: black;">1</span> -loop <span style="color: black;">1</span> -i <span style="color: black;">"http://pic.rmb.bdstatic.com/2b18b480a1f2d15e3667e01c45dfc157.jpeg"</span> -vcodec libx264 -pix_fmt yuv420p -y test.mp4</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">FFmpeg滤镜基本规则</span></h2><span style="color: black;">FFmpeg中的Filter（avfilter）<span style="color: black;">一般</span>翻译为<strong style="color: blue;">过滤器/滤镜，</strong>滤镜的<span style="color: black;">功效</span><span style="color: black;">便是</span>过滤（Filtering)）。</span><span style="color: black;">任何对解码后的多<span style="color: black;">媒介</span>资源进行的编辑操作均<span style="color: black;">能够</span><span style="color: black;">叫作</span>作广义上的Filtering，而进行这些操作的组件和插件，<span style="color: black;">便是</span>滤镜。</span><span style="color: black;">例如，<strong style="color: blue;">音频升降调/速、视频插帧/抽帧、剪裁/截取/合并/叠加</strong>等等。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0kstlluOgENIddkdPYKrjq3ic7tvveQ5E2yWVaWa8UjL8SrtJV8rQiaibd9LA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">△图 3 FFmpeg转码和Filter过程</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><span style="color: black;">基本</span>滤镜及其示意图</span></h2><span style="color: black;"><span style="color: black;">基本</span>滤镜<span style="color: black;">运用</span>非常简单，只要在输入文件（及选项）和输出文件（及选项）之间，<span style="color: black;">运用</span>-vf来添加需要的滤镜<span style="color: black;">就可</span>。例如：</span><span style="color: black;">缩放scale（</span><span style="color: black;">静态</span><span style="color: black;">）</span><span style="color: black;"><span style="color: black;">ffmpeg</span> -i video_1080p.mp4 -vf scale=w=<span style="color: black;">640</span>:h=<span style="color: black;">360</span>video_360p.mp4</span><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0kstzlcUNmfVGfbTsViaUORsV5bs0zeDQTqvW7PnDGHNGsN9Ug8IJYO1F3g/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">△图 4 scale示意图</span></span><span style="color: black;">缩放平移zoompan（动态）</span><span style="color: black;"><span style="color: black;">ffmpeg</span> -framerate <span style="color: black;">1</span> -t <span style="color: black;">1</span> -loop <span style="color: black;">1</span>-i <span style="color: black;">"http://pic.rmb.bdstatic.com/2b18b480a1f2d15e3667e01c45dfc157.jpeg"</span>-vf<span style="color: black;">"zoompan=z=if(eq(on,0),1,if(lt(zoom,1.25),zoom+0.0005,1.25)):d=16.06*25:x=if(lt(zoom,1.25),0,(x-1)):y=if(lt(zoom,1.25),0,(y+1)):s=1024x720"</span> -y tmp.mp4</span><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0kstoGtHIlR9cMwqZDLlfT7SiccZHCPrU7tQECLiaiaR863DicTXcX3P4C50PA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">△图 5 zoompan示意图</span></span><span style="color: black;">模糊boxblur</span><span style="color: black;"><span style="color: black;">ffmpeg</span> -i tmp.mp4 -filter_complex <span style="color: black;">"boxblur=luma_radius=min(h,w)/30:luma_power=2"</span> -y boxblur.mp4 模糊虚化</span><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0kstv8Gcs1AibI9BBK9JBEAqrbqbTib4TIzgcsMaCD9ZUyprOXlKQb1qPb2w/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">△图 6 boxblur示意图</span></span><span style="color: black;">叠加overlay</span><span style="color: black;">ffmpeg -i tmp.mp4 -i watermark.png -filter_complex "[<span style="color: black;">1:v</span>]scale=-2:48[<span style="color: black;">logo</span>];[<span style="color: black;">0:v</span>][<span style="color: black;">logo</span>]overlay=48:48" -y watermark.mp4 左上logo</span><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0kstaJUHjmLvQZUKTImKaRLtBSnjdHrnEq9Hcdibm6DPfBIlic8vTOejrqbA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">△图 7 overlay示意图</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">FFmpeg管道式语法</span></h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">规则：</span></h3><span style="color: black;">用&nbsp;来命名流</span><span style="color: black;">滤镜之间用&nbsp;,&nbsp;分隔</span><span style="color: black;">流之间用&nbsp;;&nbsp;分隔</span><span style="color: black;">第i个输入命为</span><span style="color: black;"><span style="color: black;">第1</span>个输入文件的视频流和音频流为&nbsp;和</span><span style="color: black;">最后一个流名可省略</span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">举例：</span></h3><span style="color: black;"><span style="color: black;">-filter_complex</span> <span style="color: black;">" split; //复制并分离成front和back两条流 //背景流 scale=1280:-2, //等比例缩放到输出宽度1280 boxblur=luma_radius=min(h,w)/30:luma_power=2, //模糊 crop=iw:720; //剪裁到1280:720 scale=-2:720; //等比例缩放到输出高度720 overlay=(W-w)/2:(H-h)/2 //叠加"</span></span><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0kst8BewRt35v0Fllib58XAjLGcV3U7GPic6IxVclztG9HcoEC9dZgOnHEfg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">△图 8 管道化滤镜流示意图</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><span style="color: black;">实质</span>效果：</span></h3><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0kstIvDG7uCThk5ONPiafxsUJBIJE6EQAOZKqZ6PSLG2Y7qBq8tia00OkvHw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">△图 9 管道化滤镜流执行结果</span></span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">前端技术选型</span></h2><span style="color: black;">前端界面<span style="color: black;">运用</span>React框架实现，快速预览功能基于浏览器的html5音视频播放器实现，<span style="color: black;">经过</span>html标签传递<span style="color: black;">调节</span>参数给播放器，实现简单的负片、</span><span style="color: black;">浮雕、黑白等播放效果，<span style="color: black;">经过</span>在视频上叠加动图的方式模拟转场效果。</span><span style="color: black;">受限于前端预览<span style="color: black;">方法</span>的性能和<span style="color: black;">繁杂</span>度，前端快速预览只能展现部分编辑效果。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前后端功能边界及交互</p>
      </span></h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;">前后端功能边界</strong></span></h3><span style="color: black;">进行<span style="color: black;">详细</span>的功能<span style="color: black;">研发</span>之前，需要<span style="color: black;">按照</span><span style="color: black;">需要</span>和技术能力特点划分前后端功能边界，例如：</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">前端界面实现</span></strong></span><span style="color: black;">用户与视频编辑器的交互</span><span style="color: black;">视频简单预览（受限于前后端技术栈差异和<span style="color: black;">运用</span>的资源差异，预览效果与<span style="color: black;">最后</span>结果可能不尽相同）</span><span style="color: black;">将用户在编辑界面操作的结果转换成时间轴数据结构</span><span style="color: black;">...</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">后端服务实现</span></strong></span><span style="color: black;">时间轴转译成FFmpeg命令</span><span style="color: black;">视频产出后调用视频发布流程</span><span style="color: black;">...</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">需要前后端<span style="color: black;">一起</span>实现</span></strong></span><span style="color: black;">字幕&nbsp;&nbsp;&lt;==&gt; 音频</span><span style="color: black;">素材上传</span><span style="color: black;">...</span><span style="color: black;"><span style="color: black;">按照</span><span style="color: black;">咱们</span>的功能<span style="color: black;">需要</span>和前后端的功能划分，百家号在线视频编辑器的用户界面大致划分成3个区域：</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">黄线</span></strong></span><span style="color: black;">内的功能区</span><strong style="color: blue;"><span style="color: black;">绿线</span></strong><span style="color: black;">内的多轨道编辑区</span><strong style="color: blue;"><span style="color: black;">红线</span></strong><span style="color: black;">内的快速预览区</span><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0kstjPkVqGPa2JjO0a12b6QdibWD3QcRETW0eEEQV3EEeK26sOz29kgicrhQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">△图 10 百家号在线视频编辑器界面分区</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">时间轴数据结构</span></strong></span></h3><span style="color: black;">为了能在前后端之间进行交互，需要定义一种数据结构，这种数据结构要既便于前端多轨道编辑器的加载，修改和存储，又便于后端提取结构化数据。</span><span style="color: black;"><span style="color: black;">咱们</span>定义了一种时间轴数据结构，时间轴中的轨道与多轨道编辑器中的轨道一一对应：</span><span style="color: black;">{<span style="color: black;">"timeline"</span>:{<span style="color: black;">"video_track"</span>: [ <span style="color: black;">//视频轨道{"start": 0.0, //<span style="color: black;">起始</span>时间"end": 1.5, //结束时间 = start + duration * speed"type": "video", //<span style="color: black;">能够</span>是视频video, <span style="color: black;">照片</span>image, 转场动画transition, 黑屏blank"height": 720,"width": 1280,"in_effect": "fade_in", //入场效果"out_effect": "fade_out", //退出效果"style": "negative", // 效果: 负片,模糊,浮雕,黑白 等等"duration": 1.5, //时长"speed": 1, //播放速度"animation": "zoompan", //视频资源的动画效果, 如镜头晃动, 平移放大等"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp4"}],"audio_track": [ //音频轨道{"start": 0.0, //<span style="color: black;">起始</span>时间"end": 1.5, //结束时间 = start + duration * speed"type": "video", //<span style="color: black;">能够</span>是视频video(视频音轨), 音频audio, 空白静音slience"in_effect": "fade_in", //入场效果"out_effect": "fade_out", //退出效果"style": "jazz", // 效果: 爵士, 摇滚, 人声 等等平衡器效果"duration": 1.5, //时长"speed": 1, //播放速度"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp3","auto_subtitle": true, //语音转字幕}],"subtitle": [ //字幕轨道{"start": 0.0, //<span style="color: black;">起始</span>时间"end": 1.5, //结束时间 = start + duration * speed"type": "video", //<span style="color: black;">能够</span>是视频video(视频音轨), 音频audio, 空白静音slience"style": "Arial,23,yellow,white", // 效果: 字体,<span style="color: black;">体积</span>,颜色,描边颜色"duration": 1.5, //时长"text": "这是一条字幕","pos_x": 100, //字幕定位"pos_y": 200, //字幕定位"tts": true, //<span style="color: black;">运用</span>字幕合成语音}],"watermark": [ //水印,特图{"start": 0.0, //<span style="color: black;">起始</span>时间"end": 1.5, //结束时间 = start + duration * speed"style": "transparent", //<span style="color: black;">能够</span>是透明transparent, 负片 等效果"style_params": "0.8", //效果的<span style="color: black;">详细</span>参数, 如透明度等"duration": 1.5, //时长"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.png","pos_x": 100, //贴图定位"pos_y": 200, //贴图定位"height": 100, //贴图高度"width": 100, //贴图宽度}]},"author_info":{}, //作者信息"extra":{}, //其他信息}</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">异<span style="color: black;">步骤</span>用和轮询</span></strong></span></h3><span style="color: black;">当用户在完成编辑工作后，需点击"<span style="color: black;">保留</span>"按钮提交。<span style="color: black;">此时</span>前端会将多轨道编辑器内所有资源要素封装成时间轴结构传递给后端服务。后端服务接到时间轴结构后会进行转译，并调用FFmpeg进行视频编解码。</span><span style="color: black;">后端这一<span style="color: black;">周期</span>的工作是计算密集型的，<span style="color: black;">一般</span>需要消耗时间轴长度2-5倍的时间来完成视频<span style="color: black;">最后</span>合成。<span style="color: black;">因此呢</span>点击"<span style="color: black;">保留</span>"按钮后，前端采用异<span style="color: black;">步骤</span>用 + <span style="color: black;">定时</span>轮询状态的方式<span style="color: black;">检测</span>后端视频合成<span style="color: black;">是不是</span>完成。</span><span style="color: black;">后</span><span style="color: black;">端时间轴转译</span><span style="color: black;">流程</span><span style="color: black;">前面提到后端服务要对前端传递来的时间轴进行转译，转写成FFmpeg命令。</span><span style="color: black;">这一步的<span style="color: black;">重点</span>流程如下图所示：</span><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0kstnU6cAzDZoNR5OLHhrgIld3qfq9XnG1dkULUgEtmqCVwhr5SAEfictbA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">△图 11 时间轴转译FFmpeg命令程图</span>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">03</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">百家号在线视频编辑器的<span style="color: black;">详细</span>实现</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">百家号视频编辑器整体架构</span></h2><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOicpJlPicliaEqh9CncUrK0ksticB4zmWqK9VR89ict6PZF2ezqcicwI1DkC9GKkpxdWrB3sDicZic5R1K5bw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">△图 12 整体架构</span></span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">用户界面和服务接口</span></h2><span style="color: black;"><span style="color: black;">日前</span>视频编辑器<span style="color: black;">供给</span>了两种<span style="color: black;">运用</span><span style="color: black;">办法</span>：面向<span style="color: black;">最后</span>用户的图形界面和面向<span style="color: black;">研发</span>者的服务接口。</span><span style="color: black;">其中图形界面集成在百家号内容创作后台，现已对部分百家号作者开放，而<span style="color: black;">经过</span>接口<span style="color: black;">供给</span>的音频转码，视频合并等服务<span style="color: black;">亦</span><span style="color: black;">已然</span>应用到了百家号线上服务<span style="color: black;">其中</span>。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">业务层：时间轴转译</span></h2><span style="color: black;">在业务层中，为了隔离内<span style="color: black;">外边</span>网络请求，添加了UI层模块，用于处理来自于图形界面的视频编辑请求。Service模块是基于PHP<span style="color: black;">研发</span>的编辑器核心模块，<span style="color: black;">重点</span><span style="color: black;">功效</span>是将图形界面和服务接口这两种类型的请求打平，将时间轴数据结构转译出能够直接执行的FFmpeg命令，并送给离线调度模块执行。</span><span style="color: black;">业务层Service模块在转译时<span style="color: black;">重点</span>完<span style="color: black;">成为了</span>如下工作：</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><span style="color: black;">照片</span>视频化</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">blur：</span></strong></span><span style="color: black;">传入视频/<span style="color: black;">照片</span>比例和尺寸可能与<span style="color: black;">最后</span>输出结果不一致，如手机竖屏拍摄的视频、网上下载的<span style="color: black;">照片</span>等等。之前业内<span style="color: black;">针对</span><span style="color: black;">区别</span>比例的视频，要么留黑边，要么局部裁剪。随着手机短视频的兴起，<span style="color: black;">此刻</span>流行的做法是如图13所示,，用模糊放大的背景图代替黑边。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">zoompan：</span></strong></span><span style="color: black;"><span style="color: black;">针对</span>传入的静态<span style="color: black;">照片</span>，<span style="color: black;">一般</span>要将<span style="color: black;">照片</span>运动起来，使画面不至于太死板，<span style="color: black;">得到</span>更好的展现效果。</span></p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">视频连接及转场</span></h2><span style="color: black;"><strong style="color: blue;"><span style="color: black;">concat：</span></strong></span><span style="color: black;">将传入的个<span style="color: black;">照片</span>/视频流进行合并，连接成一条更长的视频轨。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">overlay：</span></strong></span><span style="color: black;">在视频和视频相连接的时刻，添加一层转场动画，避免生硬的直接画面切换。</span><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">△图 13 overlay添加过场动画</span></span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">音频</span></h2><span style="color: black;">将传入的多段视频伴音/配音/TTS朗读接合成一条长音轨。</span><span style="color: black;"><span style="color: black;">按照</span>用户<span style="color: black;">选取</span>添加BGM，使视频更有氛围。</span><span style="color: black;">处理淡入淡出，避免生硬切换。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">生产工具<span style="color: black;">提高</span>生产力</span></h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">字幕</span></strong></span></h3><span style="color: black;">添加ass特效字幕头。</span><span style="color: black;"><span style="color: black;">按照</span>时间轴中的文本，生成ass字幕文件。</span><span style="color: black;">将ass字幕文件压制到视频流中。</span><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">△图 14 特效字幕头</span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">&nbsp;组装</span></strong></span></h3><span style="color: black;">将所有滤镜命令用管道式滤镜流方式组合，生成滤镜流脚本。</span><span style="color: black;">将滤镜流脚本与生成的ass字幕<span style="color: black;">同期</span>分别上传到BOS上，便于后续FFmpeg命令直接读取和执行。</span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">其他</span></strong></span></h3><span style="color: black;">需要在空白位置添加特定长度的空白视频/音频，<span style="color: black;">保准</span>产出视频的时间轴与视频编辑器界面的时间轴一致。</span><span style="color: black;">对较长的文本，需要精细拆分，以<span style="color: black;">保准</span>每段字幕都与TTS朗读同步（这一<span style="color: black;">过程</span>在UI层进行计算）。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">内部服务</span></h2><span style="color: black;">在业务层中，<span style="color: black;">触及</span>到用户信息、物料信息、语音合成等<span style="color: black;">各样</span><span style="color: black;">查找</span>和调用，这些功能均由百家号和百度内部服务<span style="color: black;">供给</span>。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">离线调度</span></h2><span style="color: black;">Dispatch是一个分布式的任务调度系统，负责在多个实例（</span><span style="color: black;">或容器内）<span style="color: black;">平衡</span>地执行FFmpeg请求，将生成资源上传BOS/VOD，回调Service层模块返回任务调度的执行结果。</span><span style="color: black;">FFmpeg是一套开源的、完善的音视频流转编码自由软件，负责<span style="color: black;">最后</span>执行FFmpeg命令，生成音视频文件。</span>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">03</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">离线调度框架：实现分布式FFmpeg调度</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">Dispatch架构图</span></h2><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">△图 15 Dispatch架构</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">Dispatch实现原理</span></h2><span style="color: black;">实例<span style="color: black;">起步</span>时，Redis Hash数据结构注册自己，member=ip，value =&nbsp;当前队列长度：当前状态：更新时间戳；</span><span style="color: black;">任何一个接收到Service层模块的请求后，<span style="color: black;">倘若</span>自己当前队列长度为0，直接本地执行，否则将请求转发给队列最短的正常实例；</span><span style="color: black;">转发请求前先要从Redis获取所有Dispatch数据，解析所有实例的 ip、队列长度、状态、更新时间戳，<span style="color: black;">按照</span>规则<span style="color: black;">选取</span>一个最佳实例转发请求；</span><span style="color: black;">消费队列中的请求时，调用FFmpeg从BOS上获取输入文件，管道化滤镜流脚本，ass字幕文件, <span style="color: black;">而后</span>执行道化滤镜流脚本，在本地磁盘生成产出文件，并上传BOS/VOD；</span><span style="color: black;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">按照</span>请求参数，回调Service层模块接口，更新任务状态。</p>
    </span>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">05</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">图文转视频技术项目：依托于视频编辑器后端服务的技术性尝试</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">以场景为单元编辑视频</span></h2><span style="color: black;">相比视频编辑器，图文转视频项目的用户界面取消了时间轴，转而采用"场景（Scene）"这一概念。即一张图+一段话便是一个场景，视频<span style="color: black;">便是</span>由场景串接起来的。</span><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">△图 16 以场景为单元创建视频（设计稿）</span></span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><span style="color: black;">文案</span>落地页URL转视频</span></h2><span style="color: black;">得益于场景这一简单概念，<span style="color: black;">能够</span>将落地页URL简单地转成场景，从而让图文/图集作者<span style="color: black;">能够</span>一键<span style="color: black;">起始</span>视频内容的编辑和创作。</span><span style="color: black;">图17展示了这一创作过程的流程图。</span><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">△图17 URL转视频流程</span></span><span style="color: black;">当转成时间轴之后，<span style="color: black;">就可</span>调用视频编辑器的接口，生成和发布视频。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">图文转视频Demo</span></h2><span style="color: black;">文末会附上几个图文转视频项目在技术验证时生成的视频，以展现<span style="color: black;">实质</span>效果。</span><span style="color: black;">
      <div style="color: black; text-align: left; margin-bottom: 10px;">
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">关闭</div>
                            <div style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">观看<span style="color: black;">更加多</span></strong></div>
                            <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">更加多</span></div>
                        </div>
                  </div>
                </div>
            </div>
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">退出全屏</div>
                        </div>
                  </div>
                </div>
            </div>
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">
                              <div style="color: black; text-align: left; margin-bottom: 10px;">
                                    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">视频加载失败，请刷新页面再试</p><a style="color: black;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAqCAMAAADhynmdAAAAQlBMVEUAAACcnJycnJycnJyoqKicnJycnJycnJycnJycnJyfn5+cnJydnZ2enp6kpKSdnZ2cnJyenp6cnJycnJycnJybm5t8KrXMAAAAFXRSTlMAyeb3CNp3tJRvHIEtJhBgqztWRJ+p5TqGAAABCklEQVQ4y5WTi27DIAxFAUMhgTzX8/+/urB2pdKI0x0pSoRuruyLbf7gF3PBaDE6X44LyY0D1SJQsfd9PpMM/CJx60v8SmV1HMSi1lKyA1n0jnwWSO08l04uJbxpBmTrpDtbGB6fmxC6Tc4BHv9aZDJdJsHW9w43Jez9x8T5M4l31WZsJn2bsYY+nUum2lQkGIVANPZ4FCLWOJImSTgjZE2SkU9crmu57mj9JBc93Qzj9R1d3HSG5bN5MRsnUzcGKK8Ns02z+Da7rYQE4bUE2PG1C6kVnkCyf0pwX8/jwbyxCLhcHpKTFkvkwK3pRmXtRrVFoTGYLvN+t0EUl0qrRaF1pFBz0anp/ptvNB4SY1XDAVMAAAAASUVORK5CYII=" style="width: 50%; margin-bottom: 20px;"> 刷新 </a>
                              </div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA5CAMAAAC7xnO3AAAAY1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+aRQ2gAAAAIXRSTlMAOx20pMJbzBQNTDGTh2ohLCZmeUF2hEmXCFdxUquef4yHE17nAAACnklEQVRIx9WW2xqiIBSFRc1AUATJU1a+/1MOm0NYKvnNXM260ZLftRcbqCQinOLI0yiY/iXKuUZPjx5Fk+6RhF1yHiVF0wC6IZfr9fqIkpRqdNyQ9AoiUU8g+YZ8Xn96YmNKvkhkLMskKgEo/yJzaxkXeZsGsjeWKEIFU/FBZgA+D5yEwGtTgR0J18lYUvdcLZ1YkUjLf+a0saYYSG/J3Hury+WSkTCjCETtF6Mvd8QGJMZSWIfsAlKhWGRl5zQ1ZNBDgy/zzvvFavWUK7SyTRs+rsiUZS/4LHIHyo8VgBx7vDkKx2WhPS7dD1Q6cNlu2dTa0gMys4bz/vJR6ph8ADgcVcSVUkfnhzJTc6gRj8fbCOHk30UI2KC+V4gKjskJQqC5frFHli0kafogFIfFkAXVCSqdAFVR8pmtVCWiXCtaarbWpGtQAYx7sjf2GCbfjFRQpH7lTLucveSMBE7+Z6VqViT2/PVs0d7hPk9TUcTaUuVaT8k/f/v6SXOgyG7InZaSvM8vj/309LrbvpSAORDH2/kWGyHhm/u5AYUc8qdFBRRrsV749bRv6I5x1OY50GZUUxQz9aGplAXZcOQ1DL3vwsTyvHQ2YWgjZV2rDTmxYRjUuoBvcQDr7QRLBiiNzJ4BawG3FLtTmEMGBigTRyC2oIKht1vbwLWrKmXKBZal+yApDGhm4q5JCVdNdrZeQBe8B44WnE2NGmxrR1bCvMugHdkhSwMWI9wjIGeosnPlJmNrst6PQrpeFkBSyAmkdD016DYqAVC6HHcNtnCPgazcuytAd5IqB/qYtq4bkP7vnEaL3W4KH9/HhKBAKl8XFUlMIWYIek4hZgh6UtjHBLVA4pPkCKRf9jOQ5Kwp1UvPDyb3qkPJaRG8Ln7f8Q8Bki/Kj5IYnQAAAABJRU5ErkJggg==" style="width: 50%; margin-bottom: 20px;">
                            </div>
                        </div>
                  </div>
                </div>
            </div>
      </div>
      <div style="color: black; text-align: left; margin-bottom: 10px;">
            <div style="color: black; text-align: left; margin-bottom: 10px;"> <a style="color: black;"> 视频详情 </a> </div>
      </div>
    </span><span style="color: black;">
      <div style="color: black; text-align: left; margin-bottom: 10px;">
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">关闭</div>
                            <div style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">观看<span style="color: black;">更加多</span></strong></div>
                            <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">更加多</span></div>
                        </div>
                  </div>
                </div>
            </div>
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">退出全屏</div>
                        </div>
                  </div>
                </div>
            </div>
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">
                              <div style="color: black; text-align: left; margin-bottom: 10px;">
                                    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">视频加载失败，请刷新页面再试</p><a style="color: black;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAqCAMAAADhynmdAAAAQlBMVEUAAACcnJycnJycnJyoqKicnJycnJycnJycnJycnJyfn5+cnJydnZ2enp6kpKSdnZ2cnJyenp6cnJycnJycnJybm5t8KrXMAAAAFXRSTlMAyeb3CNp3tJRvHIEtJhBgqztWRJ+p5TqGAAABCklEQVQ4y5WTi27DIAxFAUMhgTzX8/+/urB2pdKI0x0pSoRuruyLbf7gF3PBaDE6X44LyY0D1SJQsfd9PpMM/CJx60v8SmV1HMSi1lKyA1n0jnwWSO08l04uJbxpBmTrpDtbGB6fmxC6Tc4BHv9aZDJdJsHW9w43Jez9x8T5M4l31WZsJn2bsYY+nUum2lQkGIVANPZ4FCLWOJImSTgjZE2SkU9crmu57mj9JBc93Qzj9R1d3HSG5bN5MRsnUzcGKK8Ns02z+Da7rYQE4bUE2PG1C6kVnkCyf0pwX8/jwbyxCLhcHpKTFkvkwK3pRmXtRrVFoTGYLvN+t0EUl0qrRaF1pFBz0anp/ptvNB4SY1XDAVMAAAAASUVORK5CYII=" style="width: 50%; margin-bottom: 20px;"> 刷新 </a>
                              </div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA5CAMAAAC7xnO3AAAAY1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+aRQ2gAAAAIXRSTlMAOx20pMJbzBQNTDGTh2ohLCZmeUF2hEmXCFdxUquef4yHE17nAAACnklEQVRIx9WW2xqiIBSFRc1AUATJU1a+/1MOm0NYKvnNXM260ZLftRcbqCQinOLI0yiY/iXKuUZPjx5Fk+6RhF1yHiVF0wC6IZfr9fqIkpRqdNyQ9AoiUU8g+YZ8Xn96YmNKvkhkLMskKgEo/yJzaxkXeZsGsjeWKEIFU/FBZgA+D5yEwGtTgR0J18lYUvdcLZ1YkUjLf+a0saYYSG/J3Hury+WSkTCjCETtF6Mvd8QGJMZSWIfsAlKhWGRl5zQ1ZNBDgy/zzvvFavWUK7SyTRs+rsiUZS/4LHIHyo8VgBx7vDkKx2WhPS7dD1Q6cNlu2dTa0gMys4bz/vJR6ph8ADgcVcSVUkfnhzJTc6gRj8fbCOHk30UI2KC+V4gKjskJQqC5frFHli0kafogFIfFkAXVCSqdAFVR8pmtVCWiXCtaarbWpGtQAYx7sjf2GCbfjFRQpH7lTLucveSMBE7+Z6VqViT2/PVs0d7hPk9TUcTaUuVaT8k/f/v6SXOgyG7InZaSvM8vj/309LrbvpSAORDH2/kWGyHhm/u5AYUc8qdFBRRrsV749bRv6I5x1OY50GZUUxQz9aGplAXZcOQ1DL3vwsTyvHQ2YWgjZV2rDTmxYRjUuoBvcQDr7QRLBiiNzJ4BawG3FLtTmEMGBigTRyC2oIKht1vbwLWrKmXKBZal+yApDGhm4q5JCVdNdrZeQBe8B44WnE2NGmxrR1bCvMugHdkhSwMWI9wjIGeosnPlJmNrst6PQrpeFkBSyAmkdD016DYqAVC6HHcNtnCPgazcuytAd5IqB/qYtq4bkP7vnEaL3W4KH9/HhKBAKl8XFUlMIWYIek4hZgh6UtjHBLVA4pPkCKRf9jOQ5Kwp1UvPDyb3qkPJaRG8Ln7f8Q8Bki/Kj5IYnQAAAABJRU5ErkJggg==" style="width: 50%; margin-bottom: 20px;">
                            </div>
                        </div>
                  </div>
                </div>
            </div>
      </div>
      <div style="color: black; text-align: left; margin-bottom: 10px;">
            <div style="color: black; text-align: left; margin-bottom: 10px;"> <a style="color: black;"> 视频详情 </a> </div>
      </div>
    </span><span style="color: black;">
      <div style="color: black; text-align: left; margin-bottom: 10px;">
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">关闭</div>
                            <div style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">观看<span style="color: black;">更加多</span></strong></div>
                            <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">更加多</span></div>
                        </div>
                  </div>
                </div>
            </div>
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">退出全屏</div>
                        </div>
                  </div>
                </div>
            </div>
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">
                              <div style="color: black; text-align: left; margin-bottom: 10px;">
                                    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">视频加载失败，请刷新页面再试</p><a style="color: black;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAqCAMAAADhynmdAAAAQlBMVEUAAACcnJycnJycnJyoqKicnJycnJycnJycnJycnJyfn5+cnJydnZ2enp6kpKSdnZ2cnJyenp6cnJycnJycnJybm5t8KrXMAAAAFXRSTlMAyeb3CNp3tJRvHIEtJhBgqztWRJ+p5TqGAAABCklEQVQ4y5WTi27DIAxFAUMhgTzX8/+/urB2pdKI0x0pSoRuruyLbf7gF3PBaDE6X44LyY0D1SJQsfd9PpMM/CJx60v8SmV1HMSi1lKyA1n0jnwWSO08l04uJbxpBmTrpDtbGB6fmxC6Tc4BHv9aZDJdJsHW9w43Jez9x8T5M4l31WZsJn2bsYY+nUum2lQkGIVANPZ4FCLWOJImSTgjZE2SkU9crmu57mj9JBc93Qzj9R1d3HSG5bN5MRsnUzcGKK8Ns02z+Da7rYQE4bUE2PG1C6kVnkCyf0pwX8/jwbyxCLhcHpKTFkvkwK3pRmXtRrVFoTGYLvN+t0EUl0qrRaF1pFBz0anp/ptvNB4SY1XDAVMAAAAASUVORK5CYII=" style="width: 50%; margin-bottom: 20px;"> 刷新 </a>
                              </div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA5CAMAAAC7xnO3AAAAY1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+aRQ2gAAAAIXRSTlMAOx20pMJbzBQNTDGTh2ohLCZmeUF2hEmXCFdxUquef4yHE17nAAACnklEQVRIx9WW2xqiIBSFRc1AUATJU1a+/1MOm0NYKvnNXM260ZLftRcbqCQinOLI0yiY/iXKuUZPjx5Fk+6RhF1yHiVF0wC6IZfr9fqIkpRqdNyQ9AoiUU8g+YZ8Xn96YmNKvkhkLMskKgEo/yJzaxkXeZsGsjeWKEIFU/FBZgA+D5yEwGtTgR0J18lYUvdcLZ1YkUjLf+a0saYYSG/J3Hury+WSkTCjCETtF6Mvd8QGJMZSWIfsAlKhWGRl5zQ1ZNBDgy/zzvvFavWUK7SyTRs+rsiUZS/4LHIHyo8VgBx7vDkKx2WhPS7dD1Q6cNlu2dTa0gMys4bz/vJR6ph8ADgcVcSVUkfnhzJTc6gRj8fbCOHk30UI2KC+V4gKjskJQqC5frFHli0kafogFIfFkAXVCSqdAFVR8pmtVCWiXCtaarbWpGtQAYx7sjf2GCbfjFRQpH7lTLucveSMBE7+Z6VqViT2/PVs0d7hPk9TUcTaUuVaT8k/f/v6SXOgyG7InZaSvM8vj/309LrbvpSAORDH2/kWGyHhm/u5AYUc8qdFBRRrsV749bRv6I5x1OY50GZUUxQz9aGplAXZcOQ1DL3vwsTyvHQ2YWgjZV2rDTmxYRjUuoBvcQDr7QRLBiiNzJ4BawG3FLtTmEMGBigTRyC2oIKht1vbwLWrKmXKBZal+yApDGhm4q5JCVdNdrZeQBe8B44WnE2NGmxrR1bCvMugHdkhSwMWI9wjIGeosnPlJmNrst6PQrpeFkBSyAmkdD016DYqAVC6HHcNtnCPgazcuytAd5IqB/qYtq4bkP7vnEaL3W4KH9/HhKBAKl8XFUlMIWYIek4hZgh6UtjHBLVA4pPkCKRf9jOQ5Kwp1UvPDyb3qkPJaRG8Ln7f8Q8Bki/Kj5IYnQAAAABJRU5ErkJggg==" style="width: 50%; margin-bottom: 20px;">
                            </div>
                        </div>
                  </div>
                </div>
            </div>
      </div>
      <div style="color: black; text-align: left; margin-bottom: 10px;">
            <div style="color: black; text-align: left; margin-bottom: 10px;"> <a style="color: black;"> 视频详情 </a> </div>
      </div>
    </span><span style="color: black;">
      <div style="color: black; text-align: left; margin-bottom: 10px;">
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">关闭</div>
                            <div style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">观看<span style="color: black;">更加多</span></strong></div>
                            <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">更加多</span></div>
                        </div>
                  </div>
                </div>
            </div>
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">退出全屏</div>
                        </div>
                  </div>
                </div>
            </div>
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;">
                              <div style="color: black; text-align: left; margin-bottom: 10px;">
                                    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">视频加载失败，请刷新页面再试</p><a style="color: black;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAqCAMAAADhynmdAAAAQlBMVEUAAACcnJycnJycnJyoqKicnJycnJycnJycnJycnJyfn5+cnJydnZ2enp6kpKSdnZ2cnJyenp6cnJycnJycnJybm5t8KrXMAAAAFXRSTlMAyeb3CNp3tJRvHIEtJhBgqztWRJ+p5TqGAAABCklEQVQ4y5WTi27DIAxFAUMhgTzX8/+/urB2pdKI0x0pSoRuruyLbf7gF3PBaDE6X44LyY0D1SJQsfd9PpMM/CJx60v8SmV1HMSi1lKyA1n0jnwWSO08l04uJbxpBmTrpDtbGB6fmxC6Tc4BHv9aZDJdJsHW9w43Jez9x8T5M4l31WZsJn2bsYY+nUum2lQkGIVANPZ4FCLWOJImSTgjZE2SkU9crmu57mj9JBc93Qzj9R1d3HSG5bN5MRsnUzcGKK8Ns02z+Da7rYQE4bUE2PG1C6kVnkCyf0pwX8/jwbyxCLhcHpKTFkvkwK3pRmXtRrVFoTGYLvN+t0EUl0qrRaF1pFBz0anp/ptvNB4SY1XDAVMAAAAASUVORK5CYII=" style="width: 50%; margin-bottom: 20px;"> 刷新 </a>
                              </div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA5CAMAAAC7xnO3AAAAY1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+aRQ2gAAAAIXRSTlMAOx20pMJbzBQNTDGTh2ohLCZmeUF2hEmXCFdxUquef4yHE17nAAACnklEQVRIx9WW2xqiIBSFRc1AUATJU1a+/1MOm0NYKvnNXM260ZLftRcbqCQinOLI0yiY/iXKuUZPjx5Fk+6RhF1yHiVF0wC6IZfr9fqIkpRqdNyQ9AoiUU8g+YZ8Xn96YmNKvkhkLMskKgEo/yJzaxkXeZsGsjeWKEIFU/FBZgA+D5yEwGtTgR0J18lYUvdcLZ1YkUjLf+a0saYYSG/J3Hury+WSkTCjCETtF6Mvd8QGJMZSWIfsAlKhWGRl5zQ1ZNBDgy/zzvvFavWUK7SyTRs+rsiUZS/4LHIHyo8VgBx7vDkKx2WhPS7dD1Q6cNlu2dTa0gMys4bz/vJR6ph8ADgcVcSVUkfnhzJTc6gRj8fbCOHk30UI2KC+V4gKjskJQqC5frFHli0kafogFIfFkAXVCSqdAFVR8pmtVCWiXCtaarbWpGtQAYx7sjf2GCbfjFRQpH7lTLucveSMBE7+Z6VqViT2/PVs0d7hPk9TUcTaUuVaT8k/f/v6SXOgyG7InZaSvM8vj/309LrbvpSAORDH2/kWGyHhm/u5AYUc8qdFBRRrsV749bRv6I5x1OY50GZUUxQz9aGplAXZcOQ1DL3vwsTyvHQ2YWgjZV2rDTmxYRjUuoBvcQDr7QRLBiiNzJ4BawG3FLtTmEMGBigTRyC2oIKht1vbwLWrKmXKBZal+yApDGhm4q5JCVdNdrZeQBe8B44WnE2NGmxrR1bCvMugHdkhSwMWI9wjIGeosnPlJmNrst6PQrpeFkBSyAmkdD016DYqAVC6HHcNtnCPgazcuytAd5IqB/qYtq4bkP7vnEaL3W4KH9/HhKBAKl8XFUlMIWYIek4hZgh6UtjHBLVA4pPkCKRf9jOQ5Kwp1UvPDyb3qkPJaRG8Ln7f8Q8Bki/Kj5IYnQAAAABJRU5ErkJggg==" style="width: 50%; margin-bottom: 20px;">
                            </div>
                        </div>
                  </div>
                </div>
            </div>
      </div>
      <div style="color: black; text-align: left; margin-bottom: 10px;">
            <div style="color: black; text-align: left; margin-bottom: 10px;"> <a style="color: black;"> 视频详情 </a> </div>
      </div>
    </span>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">06</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">总结与展望</p>

    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">组合创新，适应潮流</span></h2><span style="color: black;">百家号的在线视频编辑器技术<span style="color: black;">能够</span>简单总结为：后端<span style="color: black;">运用</span>PHP将前端JS生成的时间轴格式数据转译成FFmpeg命令，并<span style="color: black;">经过</span>Dispatch调度调度框架来执行FFmpeg产出<span style="color: black;">最后</span>视频。从这一层面看，这一技术<span style="color: black;">无</span>高深的技术门槛，<span style="color: black;">无</span>复杂抽象的<span style="color: black;">规律</span>模型，<span style="color: black;">咱们</span>的技术创新，<span style="color: black;">重点</span>是组合现有技术，形成一项适应潮流的新的技术<span style="color: black;">方法</span>。</span><span style="color: black;"><span style="color: black;">伴同</span>着视频化浪潮到来的，不仅是普通用户对视频内容的<span style="color: black;">海量</span><span style="color: black;">需要</span>，还有创作者对视频编辑工具便利性的热切期待。百家号<span style="color: black;">始终</span>站创作者的<span style="color: black;">方向</span>，为创作者们<span style="color: black;">供给</span>更加优秀的视频编辑器。<span style="color: black;">期盼</span><span style="color: black;">经过</span><span style="color: black;">咱们</span>的<span style="color: black;">奋斗</span>，给视频化浪潮里的创作者们带去得力的船桨。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">技术共享，合作共赢</span></h2><span style="color: black;">在百家号在线视频编辑器技术发展过程中，吸引了来自百度ACG的<span style="color: black;">媒介</span>云团队的关注，两个团队在在线视频编辑器技术上进行了深入的技术交流。</span><span style="color: black;">随后，百度<span style="color: black;">媒介</span>云基于这一技术<span style="color: black;">研发</span>出了智能视频快编服务。得益于<span style="color: black;">媒介</span>云的<span style="color: black;">长时间</span>技术<span style="color: black;">累积</span>和对视频编辑底层技术的深入挖掘，智能视频快编服务<span style="color: black;">运用</span>智能分片+GPU编解码技术，将视频编辑合成的效率<span style="color: black;">提高</span>了数倍，<span style="color: black;">同期</span><span style="color: black;">亦</span><span style="color: black;">供给</span>了<span style="color: black;">更加多</span>新特性和新功能，使在线视频编辑技术更加实用化。</span><span style="color: black;"><span style="color: black;">日前</span>，百家号正在将视频编辑器及通用视频编辑能力的底层服务逐步迁移到<span style="color: black;">媒介</span>云的智能视频快编服务。百家号团队<span style="color: black;">做为</span>在线视频编辑器技术的输出方，<span style="color: black;">已然</span><span style="color: black;">起始</span>享受技术合作带来的红利。</span><span style="color: black;">------------------<span style="color: black;">举荐</span>阅读------------------</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">最受欢迎的DevOps 和SRE 的十大开源项目</a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">百度直播<span style="color: black;">信息</span>服务架构实践</span></a></p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">&nbsp; <a style="color: black;"><span style="color: black;">AI<span style="color: black;">研发</span>降本提效之道：云智一体AI<span style="color: black;">研发</span>全栈模式</span></a></h2>




页: [1]
查看完整版本: 进击吧！百家号在线视频编辑器技术