0.1.12 • Published 7 years ago
ku-h5player v0.1.12
ku-h5player
A core video player JS lib for web apps.
Get Started
Npm (or cnpm)
npm install ku-h5player --saveCDN
<script src="http://g.alicdn.com/ku/h5player/0.1.0/ku-h5player.min.js"></script>How To Use
<div class="js-player"></div>var playerContainer = document.querySelector('.js-player');
var player = new new KuH5Player({
container: playerContainer,
source: './videos/1.mp4',
});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.ui
player.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);
// 添加主题， 建议主题另外引入 css
player.ui.setTheme('your-theme-name');
// 注入 css
player.ui.appendCss('your css rules');