背景
最近在開發小程序時遇到個需求，就是在小程序頁面中嵌入一個廣告視頻，客戶給的視頻時橫屏播放的，但是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卻可以，上述問題在安卓機上沒有發現有問題，相關的解決方案等以後在進行研究
作者：九當家丶
鏈接：https://juejin.im/post/5cb2d9ace51d456e27504b94