zwplayer-vue2x 1.0.32 → 1.0.34

package/README.md

@@ -1,24 +1,951 @@
 # zwplayer-vue2x
 
-## Project setup
+基于 Vue 2.x 的 zwplayer 组件封装，提供简单易用的视频播放能力。
+
+## 关于 zwplayer
+
+`zwplayer`（Zero Web Player）是一款秉持"智能傻瓜式"设计理念的网页播放器，致力于将开发者的使用成本降至无限接近于零。
+
+### 核心特点
+
+✅ **零费用成本** - 完全免费，永久免费，无需支付任何费用
+
+✅ **零学习成本** - 提供统一简洁的 API，智能引擎自动处理所有流媒体技术细节
+
+✅ **零升级成本** - API 永久固化，版本升级仅需替换文件
+
+✅ **零风险成本** - 代码纯净，无广告、无统计、无联网后门
+
+✅ **零部署成本** - 不依赖第三方库和 CDN，私网、内网均可使用
+
+### 主要功能
+
+- **广泛协议支持**：HLS、DASH、HTTP-FLV、HTTP-TS、WS、WebRTC（WHEP/ARTC/BRTC/TRTC）
+- **特色协议**：支持 RTSP 网页播放（无需插件）
+- **本地文件播放**：支持直接播放用户设备上的本地视频/音频文件
+- **智能字幕**：支持双字幕、字幕搜索、章节搜索、拖拽加载本地字幕、章节文件
+- **丰富功能**：弹幕、进度条预览、画面调节、截图、音量增益、AB循环、录制、音频提取等
+- **直播优化**：超低延时直播、直播追帧、多码流切换
+- **灵活模式**：画中画、网页全屏、自动小窗口、强制锁定模式
+
+更多详情请访问：
+1. [zwplayer 官网](https://www.zwplayer.cn) 
+2. [在线体验](https://www.zwplayer.cn/videoplayer.html)
+3. [vue框架使用](https://www.zwplayer.cn/docs/support/guide-vue-framework.html)
+3. [vue框架使用](https://www.zwplayer.cn/docs/support/guide-vue-framework.html)
+4. 调用示例项目：
+   - **Gitee**: https://gitee.com/chenfanyu/zwplayer-vue2x-demo
+   - **GitHub**: https://github.com/chenfanyu/zwplayer-vue2x-demo
+   
+
+## 使用说明
+
+### 安装
+
+```bash
+npm install zwplayer-vue2x --save
 ```
-npm install
+
+#### 安装注意事项
+
+⚠️ **重要**：本组件依赖 `zwplayer` 核心库，安装时请注意以下事项：
+
+1. **自动配置**：`npm install` 会自动执行 `postinstall` 脚本，该脚本会：
+   - 创建 `public` 目录（如果不存在）
+   - 将 `zwplayer` 核心库复制到 `public/zwplayer` 目录
+
+2. **核心库必须发布**：`public/zwplayer` 目录必须随项目一起发布到生产环境
+   - 确保该目录完整包含所有 zwplayer 相关文件
+   - 不要在部署时忽略此目录
+
+3. **动态加载机制**：zwplayer 采用动态加载机制
+   - 支持无缝升级，无需修改业务代码
+   - 升级时只需替换 `public/zwplayer` 目录中的文件即可
+
+4. **内网/私网部署**：zwplayer 不依赖 CDN，完全支持内网和离线环境部署
+### 组件注册
+
+#### 全局注册
+
+在 `src/main.js` 中添加：
+
+```javascript
+import Vue from 'vue'
+import App from './App.vue'
+import ZwModule from 'zwplayer-vue2x'
+
+Vue.use(ZwModule)
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
 ```
 
-### Compiles and hot-reloads for development
+全局注册后，可在项目任何组件中使用 `<zwplayer>` 组件。
+
+#### 局部注册
+
+在组件中单独注册：
+
+```javascript
+import { zwplayer } from 'zwplayer-vue2x'
+
+export default {
+  name: 'MyComponent',
+  components: {
+    zwplayer
+  },
+  data() {
+    return {
+      movieUrl: 'https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4',
+      playerOpen: true
+    }
+  },
+  methods: {
+    onPlayerReady() {
+      console.log('player ready event.')
+    },
+    onPlayerMediaEvent(event) {
+      console.log('media event:', event.type)
+    },
+    sendDanmu(danmu) {
+      console.log('sendDanmu:', danmu)
+      // 调用websocket等方法将弹幕实际发送出去
+    }
+  }
+}
+```
+
+### 组件使用
+
+在模板中使用组件：
+
+```html
+<template>
+  <div class="player-container">
+    <zwplayer
+      v-if="playerOpen"
+      ref="zwplayerRef"
+      nodeid="main-player"
+      :murl="movieUrl"
+      @onready="onPlayerReady"
+      @onmediaevent="onPlayerMediaEvent"
+      :snapshotButton="true"
+      :optionButton="true"
+      :infoButton="true"
+      :enableDanmu="true"
+      :chapterButton="true"
+      danmuBarId="danmu-controlbar"
+      :fluid="true"
+      :autoplay="false"
+      :disableMutedConfirm="true"
+    />
+  </div>
+</template>
 ```
-npm run serve
+
+### 使用示例
+
+#### 1. 基础使用
+
+最简单的播放器配置，展示基本功能：
+
+```html
+<template>
+  <div class="demo">
+    <zwplayer
+      v-if="playerOpen"
+      ref="zwplayerRef"
+      nodeid="main-player"
+      :murl="movieUrl"
+      @onready="onPlayerReady"
+      @onmediaevent="onPlayerMediaEvent"
+      :snapshotButton="true"
+      :optionButton="true"
+      :infoButton="true"
+      :localPlayback="true"
+      :recordButton="true"
+      :segmentButton="true"
+      :autoplay="false"
+      :enableDanmu="true"
+      :chapterButton="true"
+      :fluid="true"
+      :disableMutedConfirm="true"
+      danmuBarId="danmu-controlbar"
+    />
+  </div>
+</template>
+
+<script>
+import { zwplayer } from 'zwplayer-vue2x'
+
+export default {
+  name: 'BasicDemo',
+  components: {
+    zwplayer
+  },
+  data() {
+    return {
+      movieUrl: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
+      playerOpen: true
+    }
+  },
+  methods: {
+    onPlayerReady() {
+      console.log('播放器已准备就绪')
+    },
+    onPlayerMediaEvent(event) {
+      console.log('媒体事件:', event.type)
+    }
+  }
+}
+</script>
 ```
 
-### Compiles and minifies for production
+#### 2. 弹幕功能
+
+展示播放器弹幕功能，支持实时弹幕发送和接收：
+
+```html
+<template>
+  <div class="demo">
+    <zwplayer
+      v-if="playerOpen"
+      ref="zwplayerRef"
+      :murl="movieUrl"
+      @onready="onPlayerReady"
+      @onmediaevent="onPlayerMediaEvent"
+      :autoplay="false"
+      :sendDanmu="sendDanmu"
+      :enableDanmu="true"
+      :fluid="true"
+      :disableMutedConfirm="true"
+      danmuBarId="danmu-controlbar"
+    />
+
+    <!-- 弹幕控制条 -->
+    <div class="danmubar" id="danmu-controlbar"></div>
+  </div>
+</template>
+
+<script>
+import { zwplayer } from 'zwplayer-vue2x'
+
+export default {
+  name: 'DanmuDemo',
+  components: {
+    zwplayer
+  },
+  data() {
+    return {
+      movieUrl: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
+      playerOpen: true,
+      player: null
+    }
+  },
+  methods: {
+    onPlayerReady() {
+      this.player = this.$refs.zwplayerRef
+
+      // 添加测试弹幕
+      setTimeout(() => {
+        if (this.player && this.player.appendDanmu) {
+          const testDanmu1 = {
+            border: '1px solid #ccc',
+            text: '欢迎来到 zwplayer 弹幕演示！',
+            color: '#ff6b6b'
+          }
+          this.player.appendDanmu(testDanmu1)
+        }
+      }, 3000)
+    },
+    onPlayerMediaEvent(event) {
+      console.log('媒体事件:', event.type)
+    },
+    sendDanmu(danmuText) {
+      console.log('发送弹幕:', danmuText)
+
+      if (!danmuText) return
+
+      const danmu = {
+        border: '1px solid #ccc',
+        text: danmuText
+      }
+
+      // 将弹幕添加到播放器
+      if (this.player && this.player.appendDanmu) {
+        this.player.appendDanmu(danmu)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.danmubar {
+  height: 50px;
+  background-color: #232323;
+  padding: 8px;
+  box-sizing: border-box;
+}
+</style>
 ```
-npm run build
+
+#### 3. 字幕功能
+
+展示播放器字幕功能，支持多语言字幕切换：
+
+```html
+<template>
+  <div class="demo">
+    <zwplayer
+      v-if="playerOpen"
+      ref="zwplayerRef"
+      nodeid="main-player"
+      :murl="movieUrl"
+      @onready="onPlayerReady"
+      @onmediaevent="onPlayerMediaEvent"
+      :autoplay="false"
+      :fluid="true"
+      :disableMutedConfirm="true"
+    />
+  </div>
+</template>
+
+<script>
+import { zwplayer } from 'zwplayer-vue2x'
+
+export default {
+  name: 'SubtitleDemo',
+  components: {
+    zwplayer
+  },
+  data() {
+    return {
+      movieUrl: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
+      playerOpen: true
+    }
+  },
+  methods: {
+    onPlayerReady() {
+      const player = this.$refs.zwplayerRef
+
+      // 添加多个字幕轨道
+      setTimeout(() => {
+        if (player) {
+          player.addSubtitle('/subtitles/zh.vtt', '1')
+          player.addSubtitle('/subtitles/en.vtt', '2')
+        }
+      }, 1000)
+    },
+    onPlayerMediaEvent(event) {
+      console.log('媒体事件:', event.type)
+    }
+  }
+}
+</script>
 ```
 
-### Lints and fixes files
+#### 4. 缩略图预览
+
+在进度条上显示视频帧预览：
+
+```html
+<template>
+  <div class="demo">
+    <zwplayer
+      v-if="playerOpen"
+      ref="zwplayerRef"
+      nodeid="main-player"
+      :murl="movieUrl"
+      @onready="onPlayerReady"
+      @onmediaevent="onPlayerMediaEvent"
+      :thumbnails="thumbnails"
+      :enableDanmu="true"
+      :chapterButton="true"
+      :fluid="true"
+      :disableMutedConfirm="true"
+      :autoplay="false"
+    />
+  </div>
+</template>
+
+<script>
+import { zwplayer } from 'zwplayer-vue2x'
+
+export default {
+  name: 'ThumbnailDemo',
+  components: {
+    zwplayer
+  },
+  data() {
+    return {
+      movieUrl: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
+      playerOpen: true,
+      thumbnails: {
+        url: 'https://cdn.zwplayer.cn/media/b44c43c90be3521bc352aad1e80f9cd0_thumb.jpg',
+        width: 160,
+        height: 90,
+        row: 9,
+        col: 9,
+        total: 74
+      }
+    }
+  },
+  methods: {
+    onPlayerReady() {
+      console.log('播放器已准备就绪')
+    },
+    onPlayerMediaEvent(event) {
+      console.log('媒体事件:', event.type)
+    }
+  }
+}
+</script>
 ```
-npm run lint
+
+#### 5. 章节分段
+
+展示播放器章节分段功能：
+
+```html
+<template>
+  <div class="demo">
+    <zwplayer
+      v-if="playerOpen"
+      ref="zwplayerRef"
+      nodeid="main-player"
+      :murl="movieUrl"
+      @onready="onPlayerReady"
+      @onmediaevent="onPlayerMediaEvent"
+      :chapterButton="true"
+      :autoplay="false"
+      :fluid="true"
+      :disableMutedConfirm="true"
+    />
+  </div>
+</template>
+
+<script>
+import { zwplayer } from 'zwplayer-vue2x'
+
+export default {
+  name: 'ChapterDemo',
+  components: {
+    zwplayer
+  },
+  data() {
+    return {
+      movieUrl: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
+      playerOpen: true
+    }
+  },
+  methods: {
+    onPlayerReady() {
+      const player = this.$refs.zwplayerRef
+
+      setTimeout(() => {
+        if (player) {
+          const chapters = [{
+              title: "分段1",
+              desc: "分段1描述",
+              time: 0,
+              duration: 50,
+              thumb: null
+            },
+            {
+              title: "分段2",
+              desc: "分段2描述",
+              time: 50,
+              duration: 100,
+              style: {
+                background: "blue"
+              },
+              image: null
+            },
+            {
+              title: "分段3",
+              desc: "分段3描述",
+              time: 100,
+              duration: 200,
+              style: {
+                background: "green"
+              },
+              image: null
+            }
+          ]
+          player.setChapters(chapters)
+        }
+      }, 1000)
+    },
+    onPlayerMediaEvent(event) {
+      console.log('媒体事件:', event.type)
+    }
+  }
+}
+</script>
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+#### 6. 截图功能
+
+展示播放器截图功能，支持一键截取当前播放画面：
+
+```html
+<template>
+  <div class="demo">
+    <zwplayer
+      v-if="playerOpen"
+      ref="zwplayerRef"
+      nodeid="main-player"
+      :murl="movieUrl"
+      @onready="onPlayerReady"
+      @onmediaevent="onPlayerMediaEvent"
+      :snapshotButton="true"
+      :fluid="true"
+      :autoplay="false"
+      :disableMutedConfirm="true"
+    />
+  </div>
+</template>
+
+<script>
+import { zwplayer } from 'zwplayer-vue2x'
+
+export default {
+  name: 'ScreenshotDemo',
+  components: {
+    zwplayer
+  },
+  data() {
+    return {
+      movieUrl: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
+      playerOpen: true
+    }
+  },
+  methods: {
+    onPlayerReady() {
+      console.log('播放器已准备就绪')
+    },
+    onPlayerMediaEvent(event) {
+      console.log('媒体事件:', event.type)
+    }
+  }
+}
+</script>
+```
+
+#### 7. 流式播放
+
+展示播放器的流式布局功能，播放器会自适应容器宽度：
+
+```html
+<template>
+  <div class="demo">
+    <zwplayer
+      v-if="playerOpen"
+      ref="zwplayerRef"
+      nodeid="main-player"
+      :murl="movieUrl"
+      @onready="onPlayerReady"
+      @onmediaevent="onPlayerMediaEvent"
+      :snapshotButton="true"
+      :optionButton="true"
+      :infoButton="true"
+      :enableDanmu="true"
+      :chapterButton="true"
+      :fluid="true"
+      :autoplay="false"
+      :disableMutedConfirm="true"
+    />
+  </div>
+</template>
+
+<script>
+import { zwplayer } from 'zwplayer-vue2x'
+
+export default {
+  name: 'FluidDemo',
+  components: {
+    zwplayer
+  },
+  data() {
+    return {
+      movieUrl: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
+      playerOpen: true
+    }
+  },
+  methods: {
+    onPlayerReady() {
+      console.log('播放器已准备就绪')
+    },
+    onPlayerMediaEvent(event) {
+      console.log('媒体事件:', event.type)
+    }
+  }
+}
+</script>
+```
+
+#### 8. Logo水印
+
+展示播放器Logo水印功能，支持自定义Logo位置、大小和透明度：
+
+```html
+<template>
+  <div class="demo">
+    <zwplayer
+      v-if="playerOpen"
+      ref="zwplayerRef"
+      nodeid="main-player"
+      :murl="movieUrl"
+      @onready="onPlayerReady"
+      @onmediaevent="onPlayerMediaEvent"
+      :autoplay="false"
+      :logo="logo"
+      :poster="poster"
+      :fluid="true"
+      :disableMutedConfirm="true"
+    />
+  </div>
+</template>
+
+<script>
+import { zwplayer } from 'zwplayer-vue2x'
+
+export default {
+  name: 'LogoDemo',
+  components: {
+    zwplayer
+  },
+  data() {
+    return {
+      movieUrl: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
+      playerOpen: true,
+      poster: 'https://www.zwplayer.cn/zwplayer-preview.png',
+      logo: {
+        icon: 'https://cdn.zwplayer.cn/logo.png',
+        dock: 'right',
+        x: '5%',
+        y: '5%',
+        width: '10%',
+        height: '10%',
+        opacity: 70
+      }
+    }
+  },
+  methods: {
+    onPlayerReady() {
+      console.log('播放器已准备就绪')
+    },
+    onPlayerMediaEvent(event) {
+      console.log('媒体事件:', event.type)
+    }
+  }
+}
+</script>
+```
+
+### 主要属性说明
+
+| 属性名称 | 类型 | 说明 | 默认值 |
+|---------|------|------|--------|
+| murl | String/Object/Array | 媒体地址参数，支持动态切换 | - |
+| fluid | Boolean | 是否启用流式布局（自适应容器宽度） | false |
+| autoplay | Boolean | 是否自动播放 | false |
+| disableMutedConfirm | Boolean | 禁用静音确认 | false |
+| enableDanmu | Boolean | 是否启用弹幕功能 | false |
+| snapshotButton | Boolean | 是否显示截图按钮 | false |
+| optionButton | Boolean | 是否显示设置按钮 | false |
+| infoButton | Boolean | 是否显示信息按钮 | false |
+| chapterButton | Boolean | 是否显示章节按钮 | false |
+| recordButton | Boolean | 是否显示录制按钮 | false |
+| segmentButton | Boolean | 是否显示分段按钮 | false |
+| localPlayback | Boolean | 是否启用本地播放功能 | false |
+| sendDanmu | Function | 发送弹幕的回调函数 | - |
+| thumbnails | Object | 缩略图配置对象 | - |
+| logo | Object | Logo水印配置对象 | - |
+| poster | String | 视频封面图地址 | - |
+| 其它 | - | 请参考 [zwplayer 播放器构造函数参数](https://www.zwplayer.cn/docs/support/guide-configuration.html) | - |
+
+**缩略图配置对象（thumbnails）示例：**
+
+```javascript
+thumbnails: {
+  url: 'https://cdn.zwplayer.cn/media/b44c43c90be3521bc352aad1e80f9cd0_thumb.jpg',
+  width: 160,    // 每个小缩略图的宽度
+  height: 90,    // 每个小缩略图的高度
+  row: 9,        // 缩略图总行数
+  col: 9,        // 缩略图总列数
+  total: 74      // 缩略图总数
+}
+```
+
+**Logo水印配置对象（logo）示例：**
+
+```javascript
+logo: {
+  icon: 'https://cdn.zwplayer.cn/logo.png',  // Logo图片地址
+  dock: 'right',                             // 停靠位置（left/right/top/bottom）
+  x: '5%',                                   // X轴偏移
+  y: '5%',                                   // Y轴偏移
+  width: '10%',                              // Logo宽度
+  height: '10%',                             // Logo高度
+  opacity: 70                                // 透明度（0-100）
+}
+```
+
+### 事件
+
+组件提供了 `onready`、`onmediaevent` 等事件，详细说明请参考 [zwplayer 事件文档](https://www.zwplayer.cn/docs/support/guide-events.html)。
+
+**常用事件：**
+
+| 事件名称 | 说明 | 回调参数 |
+|---------|------|---------|
+| onready | 播放器初始化完成事件 | - |
+| onmediaevent | 媒体播放事件（播放、暂停、结束等） | event对象，包含type等属性 |
+
+**使用示例：**
+
+```javascript
+methods: {
+  onPlayerReady() {
+    console.log('播放器已准备就绪')
+    // 可以在这里进行播放器初始化后的操作
+    const player = this.$refs.zwplayerRef
+    // 例如：添加字幕、设置章节等
+  },
+  onPlayerMediaEvent(event) {
+    console.log('媒体事件:', event.type)
+    // event.type 可能的值：play, pause, ended, timeupdate 等
+  }
+}
+```
+
+### 方法调用
+
+通过 `ref` 引用调用播放器方法：
+
+**基础方法：**
+
+```javascript
+// 获取播放器实例
+const player = this.$refs.zwplayerRef
+
+// 播放控制
+player.play()                    // 播放
+player.pause()                   // 暂停
+player.seekTime(120)             // 跳转到指定秒数
+player.stop()                    // 停止
+
+```
+
+**高级方法：**
+
+```javascript
+// 字幕相关
+player.addSubtitle('/subtitles/zh.vtt', '1')  // 添加字幕轨道
+player.removeSubtitle('1')                     // 移除字幕轨道
+
+// 弹幕相关
+player.appendDanmu({
+  border: '1px solid #ccc',
+  text: '这是一条弹幕',
+  color: '#ff6b6b'
+})
+
+// 章节相关
+player.setChapters([{
+  title: "章节1",
+  desc: "章节1描述",
+  time: 0,
+  duration: 50
+}])
+
+
+// 获取信息
+player.getDuration()               // 获取视频总时长
+player.getCurrentTime()            // 获取当前播放时间
+
+```
+
+### 完整示例
+
+结合所有功能的完整组件示例：
+
+```html
+<template>
+  <div class="video-player">
+    <zwplayer
+      v-if="playerOpen"
+      ref="zwplayerRef"
+      nodeid="main-player"
+      :murl="movieUrl"
+      :poster="poster"
+      :logo="logo"
+      :thumbnails="thumbnails"
+      :autoplay="false"
+      :fluid="true"
+      :enableDanmu="true"
+      :snapshotButton="true"
+      :optionButton="true"
+      :infoButton="true"
+      :chapterButton="true"
+      :recordButton="true"
+      :localPlayback="true"
+      :sendDanmu="sendDanmu"
+      :disableMutedConfirm="true"
+      danmuBarId="danmu-controlbar"
+      @onready="onPlayerReady"
+      @onmediaevent="onPlayerMediaEvent"
+    />
+
+    <div class="danmubar" id="danmu-controlbar"></div>
+
+    <div class="controls">
+      <button @click="play">播放</button>
+      <button @click="pause">暂停</button>
+      <button @click="snapshot">截图</button>
+      <button @click="addSubtitle">添加字幕</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { zwplayer } from 'zwplayer-vue2x'
+
+export default {
+  name: 'VideoPlayer',
+  components: {
+    zwplayer
+  },
+  data() {
+    return {
+      movieUrl: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
+      poster: 'https://www.zwplayer.cn/zwplayer-preview.png',
+      playerOpen: true,
+      player: null,
+      logo: {
+        icon: 'https://cdn.zwplayer.cn/logo.png',
+        dock: 'right',
+        x: '5%',
+        y: '5%',
+        width: '10%',
+        height: '10%',
+        opacity: 70
+      },
+      thumbnails: {
+        url: 'https://cdn.zwplayer.cn/media/b44c43c90be3521bc352aad1e80f9cd0_thumb.jpg',
+        width: 160,
+        height: 90,
+        row: 9,
+        col: 9,
+        total: 74
+      }
+    }
+  },
+  methods: {
+    onPlayerReady() {
+      console.log('播放器已准备就绪')
+      this.player = this.$refs.zwplayerRef
+    },
+    onPlayerMediaEvent(event) {
+      console.log('媒体事件:', event.type)
+    },
+    play() {
+      this.player.play()
+    },
+    pause() {
+      this.player.pause()
+    },
+    snapshot() {
+      this.player.snapshot()
+    },
+    addSubtitle() {
+      this.player.addSubtitle('/subtitles/zh.vtt', '1')
+    },
+    sendDanmu(danmuText) {
+      if (!danmuText) return
+      this.player.appendDanmu({
+        border: '1px solid #ccc',
+        text: danmuText
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.video-player {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.danmubar {
+  height: 50px;
+  background-color: #232323;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.controls {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.controls button {
+  margin: 0 10px;
+  padding: 8px 16px;
+  background-color: #409eff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.controls button:hover {
+  background-color: #66b1ff;
+}
+</style>
+```
+
+
+## 其他版本
+
+### Vue 3.x
+
+如果你使用 Vue 3.x，请安装 `zwplayervue3`：
+
+```bash
+npm install zwplayervue3 --save
+```
+
+详细文档：[zwplayervue3](https://www.zwplayer.cn/guide-vue-framework.html)
+
+## 相关资源
+
+### 官方文档
+- [ZWPlayer 官网](https://www.zwplayer.cn)
+- [在线体验](https://www.zwplayer.cn/videoplayer.html)
+- [Vue 框架集成指南](https://www.zwplayer.cn/docs/support/guide-vue-framework.html)
+- [配置参数文档](https://www.zwplayer.cn/docs/support/guide-configuration.html)
+- [API 方法文档](https://www.zwplayer.cn/docs/support/guide-api.html)
+- [事件文档](https://www.zwplayer.cn/docs/support/guide-events.html)
+
+### 示例项目
+- [Vue 3 示例 (Gitee)](https://gitee.com/chenfanyu/zwplayervue3-demo)
+- [Vue 3 示例 (GitHub)](https://github.com/chenfanyu/zwplayervue3-demo)
+- [Vue 2 示例 (Gitee)](https://gitee.com/chenfanyu/zwplayer-vue2x-demo)
+- [Vue 2 示例 (GitHub)](https://github.com/chenfanyu/zwplayer-vue2x-demo)
+
+## 许可证
+
+本组件遵循 MIT 许可证。ZWPlayer 核心库完全免费使用。
+
+## 技术支持
+
+如有问题或建议，请通过以下方式联系：
+- 邮箱：893366640@qq.com
+- QQ：893366640
+- 微信：zwplayerX
+- 公众号：zwplayer