移動端視頻播放自定義樣式幾種方案測試

需求: h5自定義播放短視頻的樣式，視頻上層須要自定義一些內容(相似微信視頻語音界面效果 沒有視頻控件)；主要瀏覽器微信，qq，UC(Android端) 方案: 1.只是使用原生video標籤 問題: 1.脫離文本播放 2.瀏覽器自帶視頻控件 3.各個瀏覽器樣式並不統一 video 層級最高 自定義內容沒法遮擋video 處理: video 標籤添加屬性 webkit-playsinline playsinline 處理脫離文本播放 效果並很差
x5-video-player-type="h5 微信瀏覽器 能夠在video標籤上自定義內容
放大視頻，而後視頻容器overflow:hidden隱藏視頻控件 總的來講這種方案只能是將就

2.視頻轉換 gif 
問題:轉換成gif文件過大 
        圖像不清晰 
暫時沒法處理 放棄

3.canvas 渲染 
問題:沒有聲音，可是能夠正常播放視頻(思路就是 用canvas drawImage api 定時獲取 video 而後渲染在canvas上) pc端能夠播放 
        移動端 沒法播放 沒定位到問題  (應該是我把video標籤隱藏了 canvas 沒法獲取到video的數據，可是奇怪的是video應該播放了，由於聽到聲音了)
        canvas層級沒法覆蓋video，標籤只能是把video隱藏 
放棄       
 
4.jsmpeg 控件
思路大致也是 使用canvas 播放視頻，使用webauto 播放音頻 
只是支持ts文件，須要把mp4轉成ts 使用ffmpeg 安裝安裝後按照教程 轉換ts文件 
在頁面引用，
出現了一些問題:
1.視頻比例 和 移動端設備 比例不一樣，須要額外處理裁剪 
2.沒有聲音，pc端沒有，ios 沒有，Android有，pc端是chrome 定位到是瀏覽器不能自動播放聲音的問題 參照github裏的解決方案 處理能夠 
3.缺乏一些回調監聽，可是業務需求暫時沒用上就沒本身改了，只是本身添加了一個播放時間展現(有個currentTime 可是很差用)
暫時是用的這個方案，還沒發現問題，只是適合這種場景，視頻固定且不大，須要自定義樣式覆蓋video標籤