docs: update docs

README-zh-Cn.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://github.com/vortesnail/qier-player">
-    <img src="website/public/img/logo.svg" height="140" width="140"/>
+    <img src="website/docs/public/logo.svg" height="140" width="140"/>
   </a>
   <h4>qier-player</h4>
   <br>
@@ -15,9 +15,6 @@
 	<a href="https://app.codacy.com/project/badge/Grade/042def878d8f49039cd4cde757fa1e5c">
 		<img src="https://img.shields.io/codacy/grade/042def878d8f49039cd4cde757fa1e5c?logo=codacy&style=flat-square">
 	</a>
-  	<a href="https://github.com/umijs/dumi">
-		<img src="https://img.shields.io/badge/docs%20by-dumi-blue?logo=dumi&style=flat-square">
-	</a>
 </div>
 
 <div align="center">
@@ -29,12 +26,18 @@
 
 ## 介绍
 
-`qier-player` 简单易用的 h5 视频播放器，UI 高度可定制化且功能丰富。
+`qier-player` 是一个简单易用的 h5 视频播放器，UI 高度可定制化且功能丰富，支持弹幕。
+
+## 文档及 Demo
+
+<a src="https://vortesnail.github.io/qier-player/guide/what-is-qier-player" style="max-width:620px;">
+qier-player 文档
+</a>
 
 ## 截图
 
 <div align="center">
-  <img src="./website/public/img/screenshot-shadow.png" style="max-width:620px;">
+  <img src="./website/docs/public/screenshot.png" style="max-width:620px;">
 </div>
 
 ## 快速开始
@@ -43,10 +46,12 @@
 
 npm 包安装:
 
-```bash
-npm install --save qier-player
+```shell
+npm install qier-player
 # 或
 yarn add qier-player
+# 或
+pnpm install qier-player
 ```
 
 ### 使用
@@ -55,7 +60,65 @@ yarn add qier-player
 import Player from 'qier-player';
 
 const player = new Player({
-  src: 'https://vortesnail.github.io/qier-player-demo/static/media/video480p.d116ba09.mp4',
+  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)

README.md

@@ -1,61 +1,125 @@
 <div align="center">
   <a href="https://github.com/vortesnail/qier-player">
-    <img src="website/public/img/logo.svg" height="140" width="140"/>
+    <img src="website/docs/public/logo.svg" height="140" width="140" />
   </a>
   <h4>qier-player</h4>
-  <br>
-	<a href="https://www.npmjs.com/package/qier-player">
-		<img src="https://img.shields.io/npm/v/qier-player?style=flat-square&logo=npm">
-	</a>
-	<a href="https://unpkg.com/qier-player@latest/dist/umd/index.min.js">
+  <br />
+  <a href="https://www.npmjs.com/package/qier-player">
+    <img src="https://img.shields.io/npm/v/qier-player?style=flat-square&logo=npm" />
+  </a>
+  <a href="https://unpkg.com/qier-player@latest/dist/umd/index.min.js">
     <img
       src="http://img.badgesize.io/https://unpkg.com/qier-player@latest/dist/umd/index.min.js?compression=gzip&style=flat-square"
-      alt="Gzip Size">
-	</a>
-	<a href="https://app.codacy.com/project/badge/Grade/042def878d8f49039cd4cde757fa1e5c">
-		<img src="https://img.shields.io/codacy/grade/042def878d8f49039cd4cde757fa1e5c?logo=codacy&style=flat-square">
-	</a>
-  	<a href="https://github.com/umijs/dumi">
-		<img src="https://img.shields.io/badge/docs%20by-dumi-blue?logo=dumi&style=flat-square">
-	</a>
+      alt="Gzip Size"
+    />
+  </a>
+  <a href="https://app.codacy.com/project/badge/Grade/042def878d8f49039cd4cde757fa1e5c">
+    <img src="https://img.shields.io/codacy/grade/042def878d8f49039cd4cde757fa1e5c?logo=codacy&style=flat-square" />
+  </a>
 </div>
 
 <div align="center">
-   <a href="https://github.com/vortesnail/qier-player/blob/master/README-zh-Cn.md">
+  <a href="https://github.com/vortesnail/qier-player/blob/master/README-zh-Cn.md">
     简体中文
   </a>
   &#124; English
 </div>
 
 ## Introduction
 
-`qier-player` is a simple and easy-to-use h5 video player with highly customizable UI and rich features.
+`qier-player` 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
+
+<a src="https://vortesnail.github.io/qier-player/guide/what-is-qier-player" style="max-width:620px;">
+  QierPlayer Documentation
+</a>
 
-## Screenshot
+## Screenshots
 
 <div align="center">
-  <img src="./website/public/img/screenshot-shadow.png" style="max-width:620px;">
+  <img src="./website/docs/public/screenshot.png" style="max-width:620px;" />
 </div>
 
 ## Quick Start
 
-### Install
+### Installation
 
-npm package install:
+Install via npm:
 
-```bash
-npm install --save qier-player
+```shell
+npm install qier-player
 # or
 yarn add qier-player
+# or
+pnpm install qier-player
 ```
 
-### Use
+### Usage
 
 ```js
 import Player from 'qier-player';
 
 const player = new Player({
-  src: 'https://vortesnail.github.io/qier-player-demo/static/media/video480p.d116ba09.mp4',
+  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](https://www.npmjs.com/package/@qier-player/danmaku). It is essentially independent of the video player and only requires a container.
+
+### Installation
+
+Install via npm:
+
+```shell
+npm install @qier-player/danmaku
+# or
+yarn add @qier-player/danmaku
+# or
+pnpm install @qier-player/danmaku
+```
+
+### Usage
+
+```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');
+
+// 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](https://vortesnail.github.io/qier-player/guide/danmaku).

website/docs/.vitepress/config/index.ts

@@ -6,6 +6,7 @@ import { zh } from './zh';
 export default defineConfig({
   ...shared,
   base: '/qier-player/',
+  head: [['link', { rel: 'icon', href: '/qier-player/favicon.ico' }]],
   locales: {
     root: { label: 'English', ...en },
     zh: { label: '简体中文', ...zh },

website/docs/.vitepress/theme/components/Demo.vue

@@ -193,7 +193,7 @@ const initPlayer = () => {
       startSecond: 0,
       gapSecond: 1,
       images: [
-        '/thumbnails/t1.jpg',
+        '/qier-player/thumbnails/t1.jpg',
       ],
     },
   });

website/docs/en/guide/danmaku.md

@@ -0,0 +1,3 @@
+# Danmaku {#danmaku}
+
+TODO

website/docs/zh/guide/danmaku.md

@@ -0,0 +1,3 @@
+# 弹幕 {#danmaku}
+
+还未编写