移动端Video标签踩坑记录

需求

用户能在手机上上传视频并预览。

问题

1. 上传完成后安卓下封面展示正常，ios下封面空白。如下图所示：
   
   

2. 利用canvas截取视频第一帧发现，ios下截取到的第一帧一直是空白图片, 安卓正常。
3. 后端利用javacv库截取，返回给前台封面图，ios竖屏拍摄下的视频截取到的图片有90度旋转，javacv库无法取得旋转信息，但是控制台打印出的视频元信息带有旋转信息。安卓无论横屏竖屏都没有旋转。

解决方案

1. 上述的前两个问题，ios下html开发的文档中指出了video标签只有用户触发了playback才会展示封面图，否则建议指定poster，参考链接如下
   https://developer.apple.com/library/archive/documentation/AudioVideo/Co 大专栏  移动端Video标签踩坑记录nceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1
   那么既然要触发播放，我就想到利用js模拟click事件之后截取第一帧，发现依然是空白，于是放弃用后台截取。
   这里如果前端能实现利用第一帧作为封面图，那么视频上传预览时，完全不必要把视频传到后端了，利用URL.createObjectURL这个api可以轻松做到前端预览，但是由于这个封面问题只能上传到后端。
2. 后端利用javacv轻松截取到，但是竖屏拍摄图片旋转的问题难以解决。不知道为何getMetaData获取到的永远是个空的map，但是控制台红色输出的信息中又包含了各种元信息，虽然怀疑是java调用c的api出了问题，但是水平实在不够，于是只能放弃。最终由于时间紧，也没要求到必须旋转回来，毕竟空白问题解决，所以只能草草了之。但是也预备了个方案，继续寻找第三方能获取到视频元信息的依赖，这条路肯定是可以走通的。

总结

移动端的坑还是挺多的，尤其是展示上的，除此以外就是考虑到wx这个大平台的展示，只能是碰到了就一点点的记录。但是随着技术的发展，这点小坑终将会被填平。

来源：https://www.cnblogs.com/lijianming180/p/12370756.html