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: about 7 hours 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-11-10T20:45:18.245Z (3 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: 486
• 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

  


	

		

	

	

    

	

	

		

	





   

    English

  

  | 简体中文



## 介绍

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)