• 移动端Video标签踩坑记录


    需求

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

    问题

    1. 上传完成后安卓下封面展示正常,ios下封面空白。如下图所示:
      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这个大平台的展示,只能是碰到了就一点点的记录。但是随着技术的发展,这点小坑终将会被填平。

  • 相关阅读:
    修复 Visual Studio Error “No exports were found that match the constraint”
    RabbitMQ Config
    Entity Framework Extended Library
    Navisworks API 简单二次开发 (自定义工具条)
    NavisWorks Api 简单使用与Gantt
    SQL SERVER 竖表变成横表
    SQL SERVER 多数据导入
    Devexpress GridControl.Export
    mongo DB for C#
    Devexress XPO xpPageSelector 使用
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12370756.html
一二三 - 开发者的网上家园