一款轻量且精致的、基于React的H5视频播放器

<h1 align="center">
  <img src="https://i0.hdslb.com/bfs/album/d72f47cd98c9fb6287d7eaf002695de4f53de6f2.png" height="200" width="200"/>
  <p align="center" style="font-size: 0.5em">一款轻量且精致的、基于React的H5视频播放器</p>
</h1>

[![GitHub](https://img.shields.io/github/license/vortesnail/qier-player)](https://github.com/vortesnail/qier-player/blob/master/LICENSE) [![Travis (.org)](https://img.shields.io/travis/vortesnail/qier-player)]() [![npm package](https://img.shields.io/npm/v/qier-player)](https://www.npmjs.com/package/qier-player) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/qier-player)](https://www.npmjs.com/package/qier-player) [![GitHub stars](https://img.shields.io/github/stars/vortesnail/qier-player)](https://github.com/vortesnail/qier-player/stargazers)


## 介绍
qier-player 是一个基于 React 编写的在线视频播放器组件，界面简洁，操作流畅，具有大部分视频播放器的基础功能。支持视频清晰度的切换，提供了原画、4K、2K、1080P、720P、480P 的视频源接口。

## 功能
在获取播放器焦点时（点击视频界面，不包括控制栏）:
- 方向键(上)：音量增加
- 方向键(下)：音量减少
- 方向键(左)：快退3秒
- 方向键(右)：快进3秒
- 空格键(space)：暂停/播放

[演示官网](https://vortesnail.github.io/qier-player-demo/)(tip: 演示的视频没有放cdn，下载比较慢，比较卡，需要等它加载完)

## 示例
![整体样式](https://i0.hdslb.com/bfs/album/dc46482ec425ebf78f8501fb44f05f8b01cbda4b.png)


## 快速开始
#### 安装
```bash
npm install --save qier-player
```
#### 使用
```js
import React from 'react';
import ReactDOM from 'react-dom';
import QierPlayer from 'qier-player';

ReactDOM.render(<QierPlayer srcOrigin="你的视频地址" language="zh" />, document.getElementById('root'));
```

## 接口
| 参数  |  说明 | 类型  | 默认值  |
| ------------ | ------------ | ------------ | ------------ |
| width  | 设置视频宽度 `width`  | number  |  740 |
| height  | 设置视频高度 `height`  | number  |  420 |
| language  | 语言选择，'en' 为英文或 'zh' 为中文  | string  |  'en' |
| showVideoQuality  | 用于控制是否显示清晰度选项  | boolean  |  false |
| themeColor  | 用于改变主题颜色，目前只支持16进制颜色  | string  |  '#f23300' |
| src480p  |  用于提供清晰度为 480P 的视频源切换 | boolean &#124; string   | false  |
| src720p  |  用于提供清晰度为 720P 的视频源切换 | boolean &#124; string   | false  |
| src1080p  |  用于提供清晰度为 1080P 的视频源切换 | boolean &#124; string   | false  |
| src2k  |  用于提供清晰度为 2K 的视频源切换 | boolean &#124; string   | false  |
| src4k  |  用于提供清晰度为 4K 的视频源切换 | boolean &#124; string   | false  |
| srcOrigin  |  用于提供清晰度为 origin(原画) 的视频源切换，如果仅有一个视频播放源，建议配置此选项，其它全设置为 false | boolean &#124; string   | false  |