需求:
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標簽