小程序视频旋转的相干题目

标签:程序,视频,旋转,转的,相干,题目 发布时间:2019年04月15日 点击3

背景

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

css transform旋转video组件

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

解决ios上视频不能旋转

最初

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

过渡

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

最终

客户就是爸爸,客户不接受全屏方案,那就只能继承找解决方案了,这个时候我忽然想到既然video是原生组件,那应该就是ios体系自身的题目,遇是我又搜索ios 视频 旋转相干的信息,终于找到了如下的一篇文章www7843blogs3564/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却可以,上述题目在安卓机上没有发现有题目,相干的解决方案等以后在进行研究

手机网站建设