關於微信小程序的視頻的坑

需求背景：最新在忙一個需求，就是小程序的課程詳情的展現視頻，以下圖

---

video層級太高

在小程序的官方文檔的話是有介紹的

目前解決的方案

• 使用【cover-view】【cover-image】標籤能夠覆蓋到原生組件中。
• 視頻方面的話是頂置在頁面的最頂部，以視頻層級爲最高

video視頻定位問題

詳細說明：小程序的視頻支持定位，可是在一部分手機上【不區分安卓和IOS】定位會形成視頻底部黑底，以下圖

目前的嘗試過的方案：

• 視頻展現的時候彈遮罩層，總體頁面overflow: hidden;底部的遮罩層使用fixed定位，保證IOS彈性滑動的時候看不到底部的樣式，
• 點擊視頻的時候跳轉新的頁面，在新的頁面中展現視頻，
• 網上還有一些關於視頻定位問題的解決方案還未考究

視頻關閉的時候會有聲音

詳細說明：一個頁面使用圖片點擊的時候展現視頻，捕獲視頻的縮放和回退的時候隱藏視頻，可是一部分的安卓手機仍是能播放聲音

目前不能解決、嘗試的解決方案

• 等視頻隱藏的時候，增長一個狀態值，在watch的時候【ps：wepy框架爲例】檢測值的變化，手動觸發暫停，或者中止，可是彷佛都沒有理想的狀態，仍是存在問題
• 經過狀態值，清空video標籤的src，可是會形成一部分手機加載不出視頻的bug，初步認定是請求的延遲致使

其餘可能遇到的問題
參考資料：

• http://www.wxapp-union.com/th...
• https://www.cnblogs.com/i-dou...

PS：關於小程序層級的問題，其實在愛奇藝、騰訊視頻等小程序都是能實現的。但願有人看到這篇文章的時候能給與更好的解決方案