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

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

clipboard.png


video層級太高

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

clipboard.png

目前解決的方案api

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

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

clipboard.png

目前的嘗試過的方案:框架

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

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

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

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

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

相關文章
相關標籤/搜索