Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 13 days 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 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-30T10:18:58.000Z (about 1 month ago)
- Last Synced: 2024-10-20T21:24:19.662Z (22 days 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: 37.9 MB
- Stars: 485
- Watchers: 6
- Forks: 60
- Open Issues: 0
-
Metadata Files:
- Readme: README-zh-Cn.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## 介绍
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)