同时支持mp4/ogg/webm/flv格式的视频播放
最近项目里要求支持多格式视频上传和播放,用的是H5的video标签,但video只支持三种格式mp4/ogg/webm这三种。实际需求要求同时也要支持flv/avi/rmvb这三种格式。到目前只找到能支持flv这种格式的插件,github地址:https://github.com/bilibili/flv.js1、在vue项目中,下载安装依赖包npm install --save f...
·
最近项目里要求支持多格式视频上传和播放,用的是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格式的插件还没找到,谁有可用的插件或方法可以推荐一下
更多推荐
已为社区贡献10条内容
所有评论(0)