# ku-h5player

> a powerful HTML5 video player

Latest version **0.1.12** (published 2017-10-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install ku-h5player
pnpm add ku-h5player
yarn add ku-h5player
bun add ku-h5player
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.12 |
| Published | 2017-10-23 |
| First published | 2017-07-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.9.0 |
| Dependencies | 13 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | hongqiongxing, jack_pu |

## Links

- npm: https://www.npmjs.com/package/ku-h5player
- Repository: git@gitlab.alibaba-inc.com:ku/h5player
- npm.io page: https://npm.io/package/ku-h5player

## Dependencies (13)

- [jsdom](https://npm.io/package/jsdom.md) ^11.1.0
- [mocha](https://npm.io/package/mocha.md) ^3.4.2
- [es2015](https://npm.io/package/es2015.md) 0.0.0
- [events](https://npm.io/package/events.md) ^1.1.1
- [hls.js](https://npm.io/package/hls.js.md) ^0.7.11
- [mux.js](https://npm.io/package/mux.js.md) ^4.2.1
- [core-js](https://npm.io/package/core-js.md) ^2.4.1
- [jasmine-core](https://npm.io/package/jasmine-core.md) ^2.6.4
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^2.0.3
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.23.0
- [fluent-ffmpeg](https://npm.io/package/fluent-ffmpeg.md) ^2.1.2
- [delegate-events](https://npm.io/package/delegate-events.md) ^1.1.1
- [matches-selector](https://npm.io/package/matches-selector.md) ^1.2.0

## Recent versions

- 0.1.12 (latest) — 2017-10-23
- 0.1.11 — 2017-10-10
- 0.1.10 — 2017-09-27
- 0.1.9 — 2017-09-25
- 0.1.8 — 2017-09-20
- 0.1.7 — 2017-09-15
- 0.1.6 — 2017-09-14
- 0.1.5 — 2017-09-05
- 0.1.3 — 2017-08-28
- 0.1.2 — 2017-08-15
- 0.1.1 — 2017-08-08
- 0.1.0 — 2017-07-26
- 0.0.1 — 2017-07-18

## README

# ku-h5player

A core video player JS lib for web apps.

[Documents](http://groups.alidemo.cn/ku/h5player/)

## Get Started

#### Npm (**or cnpm**)
``` bash
npm install ku-h5player --save
```

#### CDN

``` bash
<script src="http://g.alicdn.com/ku/h5player/0.1.0/ku-h5player.min.js"></script>
```

### How To Use


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

``` js
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.外部编写组件
- 文档主要说明外部插入组件的方法

``` bash
# 配置项component里面
component:{
    mustUI:false,//播放器内置ui组件 不需要可设置为false或者 重置
    videoComponent:videoComponent //外部插入demo组件
}
```
``` bash
# videoComponent对象有install注入需要操作的内容
var videoComponent = {
  install(){
    console.log(12);
  }
}
```

### 接入UI

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


```

### 目录

+ [快速开始](./doc/get-started.md)
+ [基本配置](./doc/configuration.md)
+ [ui设置](./doc/ui.md)
+ [ui-component](./doc/ui-component.md)

---
_Source: https://npm.io/package/ku-h5player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._