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

背景

最近在开发小程序时遇到个需求，就是在小程序页面中嵌入一个广告视频，客户给的视频时横屏播放的，可是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却能够，上述问题在安卓机上没有发现有问题，相关的解决方案等之后在进行研究