用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

小程序视频旋转的相关问题

Rolan 2019-4-15 00:42

背景 最近在开发小程序时遇到个需求,就是在小程序页面中嵌入一个广告视频,客户给的视频时横屏播放的,但是ui显示却要求是竖屏播放,在这里记录一下实现这个效果的踩坑全过程 css transform旋转video组件 最初没有 ...

背景

最近在开发小程序时遇到个需求,就是在小程序页面中嵌入一个广告视频,客户给的视频时横屏播放的,但是ui显示却要求是竖屏播放,在这里记录一下实现这个效果的踩坑全过程

css transform旋转video组件

最初没有想很多,直接使用transform: rotate(90deg); transform-origin: 0 100%;将视频直接旋转了90°,在安卓机上测试是也确实是旋转了,但是在ios上却仍然是横屏播放

解决ios上视频不能旋转

最初

  • 首先我上网搜了一下ios不能旋转的原因,网上说要在transform上使用-webkit-前缀,然而我加上了并不能旋转,我尝试使用transform去旋转一个view组件发现是可以旋转的,所以不是这个原因
  • 我继续搜小程序视频旋转,发现有好几篇文章都有提到这个问题,但是都没有有用的答复,小程序的官方人员也在这些问题上回复说video使用的是原生组件,和小程序没多大关系

过渡

既然小程序都甩锅了和他们没关系,那就无法从代码层面对video进行旋转了,于是我就想了一个折中的方案让视频全屏播放,全屏播放可以让视频横过来,但是客户不接受这个方案,说全屏会挡住小程序的title,只能是非全屏模式下的横屏占据整个body区域

最终

客户就是爸爸,客户不接受全屏方案,那就只能继续找解决方案了,这个时候我突然想到既然video是原生组件,那应该就是ios系统自身的问题,遇是我又搜索ios 视频 旋转相关的信息,终于找到了如下的一篇文章www.cnblogs.com/alby/p/4610…, 文章中提到ios判断视频是横屏播放还是竖屏播放时根据视频文件中的Rotation元数据来决定的,Rotation值为0则为横屏,Rotation值为90则为竖屏,文章中也给盗了如下的命令可以给视频文件加上Rotation属性

 ffmpeg -i input.mp4 -c copy -metadata:s:v:0 rotate=90 output.mp4

果然加完Rotation=90后在电脑上视频的播放都是竖屏了,加到小程序的video组件上不需要旋转video组件视频自然就旋转90°竖屏播放了,至此视频旋转的问题完美解决

其他问题

小程序的video是原生组件,层级特别高,不能通过设置z-index来修改video的层级,一般情况下也做不到在video上覆盖图像,小程序提供了cover-view,cover-image组件想要达到覆盖的效果,但是我实际实现起来发现兼容性的问题还是存在的,比如在ios10和ios12上cover-view和cover-image是覆盖不上去的,但是ios11去可以覆盖上去,很好奇11支持的东西到12为什么会丢了,同样的在cover-image和cover-view上绑定touchstart、touchend等事件在ios12和ios10上是不生效的,ios11却可以,上述问题在安卓机上没有发现有问题,相关的解决方案等以后在进行研究

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 九当家 来自: 掘金