【uni-player】一款好用的前端H5音视频插件

背景

这阵子公司需要做一个视频网站，需要支持m3u8协议的视频播放。涉及到了视频的播放和直播场景。
google了一大圈，感觉没有什么好的合适的视频播放器的插件。大名鼎鼎的videojs虽然可以支持m3u8的视频但是在样式方面差强人意。思来想去决定自己花几天的时间撸一个视频播放器插件开源出来。样式方面我比较喜欢bilibili的风格，所以借鉴了一下哔哩哔哩网页端视频播放器的风格。索性做出来给产品看的时候产品表示很满意。

那么uni-player有什么特点呢？

• 支持m3u8协议，并且自动解析视频地址里各清晰度并依据网络情况自动播放最适合的清晰度播放，也可以手动调整
• 支持flv协议
• 可以配置主题颜色
• 如果你是普通的mp4视频，可以配置url为一个list，也可以实现不同清晰度切换的功能（前提是你有不同清晰度的视频资源）
• 可以设置当前视频播放模式为直播模式

文档

安装

yarn add uni-player
or
npm i uni-player

使用

const player = new UniPlayer({
  container: 'html element',
  url: 'video link address'
})

详细配置(UniPlayerConfig)

参数	类型	描述
container	string	css selector 播放器容器元素
url	string or Array<{ sources: string; tag: string; [active]: boolean }>	视频地址，可以是数组 , active为选中当前播放的视频源，如未设置则为list中的第一个
startTime	number	从何时开始播放（秒）
autoplay	boolean	是否自动播放，关于 autoplay 属性设置问题请参考
isHls	boolean	是否为hls视频
Hls	Hls	如果 isHls 为 true，该属性必传（hls.js）
isFlv	boolean	是否为flv视频
Flv	Flv	如果 isFlv 为 true，该属性必传（flv.js）
live	boolean	是否是直播模式
theme	string	主题颜色

方法

名称	描述
player.play()	播放视频
player.pause()	暂停播放
player.requestFullScreen()	全屏播放
player.cancelFullScreen()	取消全屏播放
player.skipTo(time: number)	跳转至指定时间
player.setVolume(value: number)	设置音量（0-100）
player.destory()	销毁播放器
player.reload(config: Partial<UniPlayerConfig>)	重新加载播放器

事件

player.on('eventName', function (...args) {})

名称	参数	描述
ready	无	播放器创建完成时调用
playStateChange	(isPlay: boolean)	播放状态变化回调
fullScreenStateChange	(isFullScreen: boolean)	全屏状态变化
playing	无	播放中触发
waiting	无	视频等待中触发
destroyed	无	播放器被摧毁后触发
finished	无	视频播放完成触发
error	无	视频播放错误

github地址：uni-player

如果你觉得好用，如果帮助了你的话，请不要吝啬你的star哦~~~