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

yimo 發布于2019-08-23 13:54 / 1364人閱讀

摘要：需求背景最新在忙一個需求，就是小程序的課程詳情的展示視頻，如下圖層級過高在小程序的官方文檔的話是有介紹的目前解決的方案使用標簽可以覆蓋到原生組件中。

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

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：關于小程序層級的問題，其實在愛奇藝、騰訊視頻等小程序都是能實現的。希望有人看到這篇文章的時候能給與更好的解決方案

GPU云服務器云服務器微信小程序實時音視頻不用編程制作微信小程序視頻微信小程序的功能微信小程序的開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99746.html

吃貨福利get-今日美食food微信小程序

摘要：微信小程序仿今日美食初學微信小程序，嗯，還不錯嘛，挺有趣的于是自己動手擼了一個。開發工具下載開發者工具微信小程序官網，下載好后就可以進行開發了喲。 wechat-todayFood 微信小程序仿今日美食food 初學微信小程序，嗯，還不錯嘛，挺有趣的！于是自己動手擼了一個?。你別說一看標題就知道我是吃貨呀，我是不想這么快就被揭穿的，但是這個小程序就是這么有意思呀。好了我要進入正題了，...

loostudy 2019-08-20 18:17 評論0 收藏0
吃貨福利get-今日美食food微信小程序

摘要：微信小程序仿今日美食初學微信小程序，嗯，還不錯嘛，挺有趣的于是自己動手擼了一個。開發工具下載開發者工具微信小程序官網，下載好后就可以進行開發了喲。 wechat-todayFood 微信小程序仿今日美食food 初學微信小程序，嗯，還不錯嘛，挺有趣的！于是自己動手擼了一個?。你別說一看標題就知道我是吃貨呀，我是不想這么快就被揭穿的，但是這個小程序就是這么有意思呀。好了我要進入正題了，...

Jason_Geng 2019-08-29 12:59 評論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

you_De 2019-08-29 12:34 評論0 收藏0