https://github.com/vortesnail/qier-player
:clapper: A simple and easy-to-use h5 video player with highly customizable UI and rich features. / 简单易用的h5播放器，UI 高度定制化，功能丰富。
https://github.com/vortesnail/qier-player
html5-video-player player qier qier-player react react-components react-video video video-player vortesnail
Last synced: 5 months ago
JSON representation
:clapper: A simple and easy-to-use h5 video player with highly customizable UI and rich features. / 简单易用的h5播放器，UI 高度定制化，功能丰富。
- Host: GitHub
- URL: https://github.com/vortesnail/qier-player
- Owner: vortesnail
- License: mit
- Created: 2019-10-14T12:54:21.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-11T21:08:18.000Z (8 months ago)
- Last Synced: 2025-05-02T03:01:53.352Z (6 months ago)
- Topics: html5-video-player, player, qier, qier-player, react, react-components, react-video, video, video-player, vortesnail
- Language: TypeScript
- Homepage: https://vortesnail.github.io/qier-player/
- Size: 38.3 MB
- Stars: 490
- Watchers: 5
- Forks: 58
- Open Issues: 2
-
Metadata Files:
- Readme: README-zh-Cn.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
QierPlayer
## 介绍
QierPlayer 是一个简单易用的 h5 视频播放器，UI 高度可定制化且功能丰富，支持弹幕。
## 文档及 Demo
[QierPlayer 文档](https://vortesnail.github.io/qier-player/zh/guide/what-is-qier-player)
## 截图
## 快速开始
### 安装
npm 包安装:
```shell
npm install qier-player
# 或
yarn add qier-player
# 或
pnpm install qier-player
```
### 使用
```js
import Player from 'qier-player';
const player = new Player({
src: 'https://vortesnail.github.io/qier-player/test-video_1080p.mp4',
});
player.mount('#app');
```
## 弹幕
弹幕功能作为一个独立的库 [@qier-player/danmaku](https://www.npmjs.com/package/@qier-player/danmaku) 使用，本质上与视频播放器没有必然联系，仅需要的是一个容器。
### 安装
npm 包安装:
```shell
npm install @qier-player/danmaku
# 或
yarn add @qier-player/danmaku
# 或
pnpm install @qier-player/danmaku
```
### 使用
```js
import Player, { EVENT } from 'qier-player';
import Danmaku from '@qier-player/danmaku';
const player = new Player({
src: 'https://vortesnail.github.io/qier-player/test-video_1080p.mp4',
});
player.mount('#app');
// 创建弹幕的容器
const danmuWrapper = document.createElement('div');
danmuWrapper.style.cssText = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;';
player.el.appendChild(danmuWrapper);
// 弹幕实例
const danmaku = new Danmaku(danmuWrapper, {
eventProxyElement: danmuWrapper,
});
player.on(EVENT.PLAY, () => {
danmaku.start();
});
player.on(EVENT.PAUSE, () => {
danmaku.stop();
});
danmaku.add(
{
text: '今天天气不错，大家好',
color: '#fff',
},
'rolling',
);
```
更详细的用法参考[弹幕](https://vortesnail.github.io/qier-player/guide/danmaku)