同時支持mp4/ogg/webm/flv格式的視頻播放

最近項目裏要求支持多格式視頻上傳和播放,用的是H5的video標籤,但video只支持三種格式mp4/ogg/webm這三種。實際需求要求同時也要支持flv/avi/rmvb這三種格式。

到目前只找到能支持flv這種格式的插件,github地址:https://github.com/bilibili/flv.js

1、在vue項目中,下載安裝依賴包

npm install --save flv.js

2、在當前使用頁面中引入 import flv from 'flv.js'

3、頁面結構,判斷如果是flv格式就用flv播放器播放,否則就是用 h5video 播放器播放

4、詳情頁面獲取後臺數據返回的視頻格式後綴和url視頻播放路徑,進行判斷渲染不同的結構,如果是flv格式,就調用方法傳入格式類型和url路徑初始化視頻容器,否則就把url路徑動態賦值給h5的video標籤

5、定義初始化flv視頻容器的方法

這樣只要後臺給返回相應的數據,就可以根據視頻後綴判斷不同的視頻類型,用不同的播放器播放了

另外avi和rmvb格式的插件還沒找到,誰有可用的插件或方法可以推薦一下

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章