sunmoon-player
Version:
A multifunctional and beautiful React-based web video player.
55 lines (43 loc) • 3.09 kB
Markdown
<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>
[](https://github.com/vortesnail/qier-player/blob/master/LICENSE) []() [](https://www.npmjs.com/package/qier-player) [](https://www.npmjs.com/package/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，下载比较慢，比较卡，需要等它加载完)
## 示例
## 快速开始
#### 安装
```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 | string | false |
| src720p | 用于提供清晰度为 720P 的视频源切换 | boolean | string | false |
| src1080p | 用于提供清晰度为 1080P 的视频源切换 | boolean | string | false |
| src2k | 用于提供清晰度为 2K 的视频源切换 | boolean | string | false |
| src4k | 用于提供清晰度为 4K 的视频源切换 | boolean | string | false |
| srcOrigin | 用于提供清晰度为 origin(原画) 的视频源切换，如果仅有一个视频播放源，建议配置此选项，其它全设置为 false | boolean | string | false |