背景
最近在開發小程式時遇到個需求，就是在小程式頁面中嵌入一個廣告視訊，客戶給的視訊時橫屏播放的，但是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卻可以，上述問題在安卓機上沒有發現有問題，相關的解決方案等以後在進行研究