背景
app分享到微信需求要做一个短视频的功能。视频分享出来以后的要求是H5要以##video为背景做短视频功能，我总结了一下以下需求：
- 控制暂停播放
- 需要打开全屏关闭全屏功能
- 关闭全屏后播放进度同步
- 视频下要放一下自定义悬浮层
- 点击视频全屏播放
- 滚动页面自动监听视频播放
- 解决不用机型浏览器兼容显示问题 （划重点！！）
（以现在的原生video 根本做不到）
遇到的问题
- 需要考虑ios和Android系统自带的视频播放控件，还要考虑微信的内置X5浏览器ios上视频控件还可以去除 然后自己定义播放暂停没问题，但是Android视频播放控件下面一排的控件可以去除，但是视频中间的暂停播放按钮去除不了
- 手机浏览器自带的视频插件会在视频播放的时候 video层级最高，之前Video上的浮层就看不到了，无论定位后z-index设置多大都没用
- 视频在播放的时候 不同的手机会出现全屏的情况，这与之前的作为背景的初衷就不同了
基于以上原因，导致在不同设备上使用video标签会不尽人意，同时对于ios与Android对视频的渲染也有所差别（且安卓几百种机型不同兼容），代码实现起来有点繁琐
最后 决定将video渲染在canvas画布上 然后自己再画控件！！！
上效果图 （全屏状态下）
非全屏状态下播放
html
js
绘画了完成之后还有一个问题。就是滚动到某处需要播放某个视频。但是微信明令禁止做自动播放功能。所以我们用代码点击去绕过。
上面原理利用的定时器循环绘制视频。主要思路：Canvas中可以使用ctx.drawImage(video, x, y,width,height)来对视频当前帧的图像进行绘制，其中video参数就是HTML5中的video标签。故我们可以通过Canvas的动态效果不断获取video当前画面，渲染到Canvas画布上。并且通过改变video标签的属性，来实现在Canvas中处理视频的一整套效果。可以理解成在Canvas中新建一个播放器，该播放器视频源是video标签创建，播放器的各种方法最终指向对video标签本身属性和方法的改变。
其中中途在做的过程中有遇到过帧率不清晰的问题，应该是压缩视频宽高的问题，最后把canvas画布放大把视频实际展示缩小一倍即可。
现在功能不支持旋转视频，如果需要旋转视频，加一个监听旋转宽度，重新计算视频宽度即可。还可以利用Canvas的强大功能，进一步进行图像处理、弹幕加载变大缩小改变视频风格等操作！！～
以上是部分代码。有兴趣可以一起探讨！
