移动端视频转 canvas 总结

前言

公司一位客户希望我们依照http://game.flyh5.cn/resources/game/lq_game/2018_9_xmt_c/main.html?v=1557026481 提供的案例，开发一个具备病毒传播效应的H5页面用于宣传。页面内容主要由多个应用场景构成，用户在打开页面后即可看到一系列图片，点击不同图片会触发对应的视频播放。视频播放结束后，用户可上传图片并生成海报。

查看了该案例的源代码后发现，其采用的是白鹭egret+eui框架进行开发，整体动画效果较为出色。由于本人在相关技术领域的积累尚浅，难以实现过于复杂和炫酷的动画效果。同时项目时间紧迫，仅给予两天的开发周期，在与客户协商后决定简化部分动画设计，保留核心流程不变。

该项目为纯前端开发模式，未涉及任何后台接口的调用

分析

项目需求中规定不同角色需播放不同视频，我观察了他们的实现效果，发现界面上缺少视频工具栏。查看其源代码后得知，他们将视频转换为canvas进行渲染。众所周知，canvas具备图像绘制能力，而将视频在canvas上渲染，实质上是将视频逐帧绘制并进行播放。

问题总结

以下为最终部分的代码实现

 <!-- 画视频的div标签 x5-video-player-fullscreen="true"-->

    
     <div id="d