zwplayer-vue2x 1.0.33 → 1.0.34

package/README.md

@@ -132,49 +132,783 @@ export default {
       @onmediaevent="onPlayerMediaEvent"
       :snapshotButton="true"
       :optionButton="true"
-      :thumbnails="thumbnails"
+      :infoButton="true"
+      :enableDanmu="true"
+      :chapterButton="true"
+      danmuBarId="danmu-controlbar"
+      :fluid="true"
+      :autoplay="false"
+      :disableMutedConfirm="true"
+    />
+  </div>
+</template>
+```
+
+### 使用示例
+
+#### 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>
+```
+
+#### 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>
+```
+
+#### 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>
+```
+
+#### 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>
+```
+
+#### 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>
+```
+
+#### 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"
-      danmuBar="danmu-controlbar"
+      :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），支持动态切换 | 运行时变动会自动调用 play 方法 |
-| nodeid | 组件顶级父节点 div 的 id，不提供则自动生成 | 新增 |
-| zwplayerlib | zwplayer 库地址，缺省时使用 `public/zwplayer/zwplayer.js` | 新增 |
-| danmuBarId | 弹幕输入控制条的 div 元素 id | 新增 |
-| 其它 | 请参考 [zwplayer 播放器构造函数参数](https://www.zwplayer.cn/docs/support/guide-configuration.html) | - |
+| 属性名称 | 类型 | 说明 | 默认值 |
+|---------|------|------|--------|
+| 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.seek(120)
+// 播放控制
+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>
+```
 
-- **Gitee**: https://gitee.com/chenfanyu/zwplayer-vue2x-demo
-- **GitHub**: https://github.com/chenfanyu/zwplayer-vue2x-demo
 
 ## 其他版本
 
@@ -187,3 +921,31 @@ 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

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "zwplayer-vue2x",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "description": "A fully functional and lightweight free open-source web player",
   "main": "lib/zwplayervue2.umd.min.js",
-  "keyword": "zwplayervue2, zwplayer-vue2x, zero-web-player",
+  "keywords": [
+    "zwplayer",
+    "zwplayervue2",
+    "zwplayer-vue2x",
+    "zero-web-player",
+    "video-player",
+    "vue2",
+    "player"
+  ],
   "license": "MIT",
   "private": false,
   "scripts": {