README-zh-Cn.md

QierPlayer

English | 简体中文

介绍

QierPlayer 是一个简单易用的 h5 视频播放器，UI 高度可定制化且功能丰富，支持弹幕。

文档及 Demo

QierPlayer 文档

截图

快速开始

安装

npm 包安装:

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

使用

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 使用，本质上与视频播放器没有必然联系，仅需要的是一个容器。

安装

npm 包安装:

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

使用

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

更详细的用法参考弹幕