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

背景

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!