QierPlayer

简体中文 | English

Introduction

QierPlayer is a simple and easy-to-use H5 video player with a highly customizable UI and rich features, supporting Danmaku (bullet comments).

Documentation and Demo

QierPlayer Documentation

Screenshots

Quick Start

Installation

Install via npm:

npm install qier-player
# or
yarn add qier-player
# or
pnpm install qier-player

Usage

import Player from 'qier-player';

const player = new Player({
  src: 'https://vortesnail.github.io/qier-player/test-video_1080p.mp4',
});

player.mount('#app');

Danmaku

The Danmaku feature is available as a separate library @qier-player/danmaku. It is essentially independent of the video player and only requires a container.

Installation

Install via npm:

npm install @qier-player/danmaku
# or
yarn add @qier-player/danmaku
# or
pnpm install @qier-player/danmaku

Usage

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');

// Create a container for Danmaku
const danmuWrapper = document.createElement('div');
danmuWrapper.style.cssText = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;';
player.el.appendChild(danmuWrapper);

// Danmaku instance
const danmaku = new Danmaku(danmuWrapper, {
  eventProxyElement: danmuWrapper,
});

player.on(EVENT.PLAY, () => {
  danmaku.start();
});

player.on(EVENT.PAUSE, () => {
  danmaku.stop();
});

danmaku.add(
  {
    text: 'The weather is nice today, hello everyone',
    color: '#fff',
  },
  'rolling',
);

For more detailed usage, refer to Danmaku.