ku-h5player

ku-h5player

A core video player JS lib for web apps.

Documents

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

<div class="js-player"></div>

var playerContainer = document.querySelector('.js-player');
var player = new new KuH5Player({
    container: playerContainer,
    source: './videos/1.mp4',
});

View Details

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');

目录

• 快速开始
• 基本配置
• ui设置
• ui-component