需求

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

问题

  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这个大平台的展示,只能是碰到了就一点点的记录。但是随着技术的发展,这点小坑终将会被填平。

移动端Video标签踩坑记录的更多相关文章

  1. VUE使用微信JDK(附踩坑记录)

    VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...

  2. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  3. SUCTF 2019 Upload labs 2 踩坑记录

    SUCTF 2019 Upload labs 2 踩坑记录 题目地址 : https://github.com/team-su/SUCTF-2019/tree/master/Web/Upload La ...

  4. [技术博客]iview组件样式踩坑记录

    [技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...

  5. unionId突然不能获取的踩坑记录

    昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...

  6. CentOS7.4安装MySQL踩坑记录

    CentOS7.4安装MySQL踩坑记录 time: 2018.3.19 CentOS7.4安装MySQL时网上的文档虽然多但是不靠谱的也多, 可能因为版本与时间的问题, 所以记录下自己踩坑的过程, ...

  7. ubuntu 下安装docker 踩坑记录

    ubuntu 下安装docker 踩坑记录 # Setp : 移除旧版本Docker sudo apt-get remove docker docker-engine docker.io # Step ...

  8. SpringBoot + Shiro + shiro.ini 的踩坑记录

    0.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...

  9. google nmt 实验踩坑记录

       最近因为要做一个title压缩的任务,所以调研了一些text summary的方法.    text summary 一般分为抽取式和生成式两种.前者一般是从原始的文本中抽取出重要的word o ...

随机推荐

  1. 使用linux服务器安装wordpress博客详细教程

    前言 最近读了<软技能:代码之外的生存指南>,这本书给了我很大的启示.之前虽然知道作为一个程序员,应该拥有自己的博客,以便于提升自己的知名度,但是并没有了解的过于详细.这本书描写博客的作用 ...

  2. 18 11 15 网络通信 ---- 多任务----线程 threading

    下面是一个  多线程  运算  调用了 threading  模块   可以同时在一个程序中  跑两个函数 import threading def text1 (): for i in range( ...

  3. linux 离线安装mysql7或者8

    安装方式:官网下载压缩包进行安装 1.下载jdk8 登录网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-download ...

  4. h5-localStorage储存的使用

    <!-- localStorage的使用: 1.存储的内容大概20mb 2.不同浏览器不能共享数据,但是在同意浏览器的不同窗口中可以共享数据 3.永久生效,他的数据是储存在硬盘上,并不会随着页面 ...

  5. FileReader笔记

    FileReader API链接地址:https://developer.mozilla.org/en-US/docs/Web/API/FileReader 实例代码: <!DOCTYPE ht ...

  6. UVA 10158 并查集的经典应用

    这个题目一看就是用并查集,有N个国家代表,在M行给出两两之间的关系,敌人或者朋友,(当然如果该关系跟已知关系冲突,则输出-1) 关系的几个约束条件时这样的 在朋友方面,朋友的朋友就是自己的朋友,这个就 ...

  7. c#之初识结构(Struct)

    C# 结构(Struct) 首先结构是值类型数据结构.它使得一个单一变量可以存储各种数据类型的相关数据.struct 关键字用于创建结构.通俗说:结构就是一个可以包含不同数据类型的集合.它是一种可以自 ...

  8. Git上传代码命令

    对于Git在这不做说明:只介绍Git使用过程中的常用命令: 一.创建仓库,提交文件 1.初始化一个Git仓库,使用git init命令. 2.添加文件到Git仓库,分两步: 第一步,使用命令git a ...

  9. Qt QRect与QRectF的区别

    一直在与QRect和QRectF打交道.甚至在使用过程中因为QRect而出现了致命的Bug.因为QRect在数据存储表示上有一个很大的“历史遗留问题”! QRect Class   也就是说,对于QR ...

  10. ERP上线通用模板

    一.引言    随着现代信息技术的发展与广泛应用,现代社会的快速发展和越来越追求效率的现状,对各行各业的管理的水平有了进一步的提高.XX企业作为我国的国民经济发展的基础产业,其信息化建设的水平直接关系 ...