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