小程序視頻旋轉的相關問題

背景

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