Qier-Player 安装和配置指南

Qier-Player 安装和配置指南

qier-player :clapper: A simple and easy-to-use h5 video player with highly customizable UI and rich features. / 简单易用的h5播放器，UI 高度定制化，功能丰富。 项目地址: https://gitcode.com/gh_mirrors/qi/qier-player

1. 项目基础介绍和主要编程语言

Qier-Player 是一个简单易用的 H5 视频播放器，具有高度可定制化的 UI 和丰富的功能。该项目主要使用以下编程语言和框架：

• 主要编程语言:
  • TypeScript
  • JavaScript
  • Vue
  • SCSS
  • CSS
  • HTML

2. 项目使用的关键技术和框架

Qier-Player 使用了以下关键技术和框架：

• React: 用于构建用户界面的 JavaScript 库。
• Vue: 用于构建用户界面的渐进式 JavaScript 框架。
• HTML5 Video API: 用于实现视频播放的核心技术。
• Danmaku (弹幕): 支持弹幕功能，增强用户互动体验。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装 Qier-Player 之前，请确保你的开发环境已经安装了以下工具：

• Node.js: 版本 12.x 或更高。
• npm 或 yarn: 用于管理项目依赖。

安装步骤

步骤 1: 克隆项目仓库

首先，你需要从 GitHub 克隆 Qier-Player 项目到本地：

git clone https://github.com/vortesnail/qier-player.git

步骤 2: 进入项目目录

进入克隆下来的项目目录：

cd qier-player

步骤 3: 安装项目依赖

使用 npm 或 yarn 安装项目所需的依赖：

npm install
# 或者使用 yarn
yarn install

步骤 4: 配置项目

在项目根目录下，你可以根据需要修改 package.json 文件中的配置项，例如项目名称、版本号等。

步骤 5: 运行项目

安装完成后，你可以通过以下命令启动项目：

npm run start
# 或者使用 yarn
yarn start

步骤 6: 访问项目

启动项目后，打开浏览器并访问 http://localhost:3000，你将看到 Qier-Player 的演示页面。

配置弹幕功能

Qier-Player 支持弹幕功能，你可以通过以下步骤启用弹幕：

1. 安装弹幕库:

   使用 npm 或 yarn 安装弹幕库：

   npm install @qier-player/danmaku
   # 或者使用 yarn
   yarn add @qier-player/danmaku
   

2. 配置弹幕:

   在你的项目代码中，导入弹幕库并配置弹幕功能：

   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: 'The weather is nice today, hello everyone', color: '#fff' }
   ], 'rolling');
   

通过以上步骤，你已经成功安装并配置了 Qier-Player 项目，并启用了弹幕功能。现在你可以根据自己的需求进一步定制和扩展该项目。

qier-player :clapper: A simple and easy-to-use h5 video player with highly customizable UI and rich features. / 简单易用的h5播放器，UI 高度定制化，功能丰富。 项目地址: https://gitcode.com/gh_mirrors/qi/qier-player