H5中利用canvas绘制video

问题：

直接通过video播放视频时，iOS会自动全屏。Android上浏览器正常，但Android中QQ、weichat内嵌浏览器自动全屏。

需求：

video播放视频时能够自动播放且不全屏，需适配大部分机型

探索过程：

1、使用内联播放属性：webkit-playsinline、playsinline
解决了iOS上视频自动全屏问题，但是这个属性在Android中的qq和wechat上无效
原因：内联属性，需要嵌入网页的APP比如 WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效

2、使用canvas播放video
在iOS上video不能自动播放，是要求必须有用户的真实操作来触发播放。并且在微信内置浏览器中会出现白屏问题，可能是由于微信禁止canvas的自动drawImage绘制
解决方法：添加预览图

解决方案：

通过canvas绘制video，并添加预览图
注意：外部需要添加video.mp4和preview.png资源