ku-h5player
A core video player JS lib for web apps.
Get Started
Npm (or cnpm)
npm install ku-h5player --save
CDN
<script src="http://g.alicdn.com/ku/h5player/0.1.0/ku-h5player.min.js"></script>
How To Use
var playerContainer = document;var player =;
KuH5player传参定义
const player = new KuH5Player({
container:container, //要实例化的ele
source:source //一个视频流可以为字符串 多个为数组[{source:source,duration:duration}]
type:'m3u8' || 'mp4', //视频类型
decoder:true || false,//不写默认为false 是否需要根据兼容性解码
events:{ // 播放器播放过程中的回调函数
play:function(){
//todo
}
}
component:{
mustUI:UI实例,//MUST为播放器内置插件 可以new obj实例覆盖
Log:log实例 //自定义插件
}
})
可插拔组件管理
- 组件分为1.播放器内置组件 例如:mustUI 2.外部编写组件
- 文档主要说明外部插入组件的方法
# 配置项component里面component:{mustUI:false,//播放器内置ui组件 不需要可设置为false或者 重置videoComponent:videoComponent //外部插入demo组件}
# videoComponent对象有install注入需要操作的内容var videoComponent = {install(){console.log(12);}}
接入UI
const player = new KuH5Player(config);// 获取 UI 的 api player.uiplayer.ui.setStyle('playicon', {'background-image': '',});// 添加浮层player.ui.layers.append({name: 'endList',html: `<div class="end-list">Your end List</div>`})// 自定义浮层import { Layer } from 'h5-player';class CustomLayer extends Layer {constructor(args) {super(args);this.find('button').addEventListener('click', (e, video) = > {video.pause();})}render() {return `<div class="h5-layer"><p>数据列表</P><button type="button">Pause</button></div>`;}}player.ui.layer.append(CustomLayer);// 添加主题, 建议主题另外引入 cssplayer.ui.setTheme('your-theme-name');// 注入 cssplayer.ui.appendCss('your css rules');