zwplayer-vue2x 1.0.32 → 1.0.33

package/README.md

@@ -1,24 +1,189 @@
 # zwplayer-vue2x
 
-## Project setup
-```
-npm install
-```
+基于 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循环、录制、音频提取等
+- **直播优化**：超低延时直播、直播追帧、多码流切换
+- **灵活模式**：画中画、网页全屏、自动小窗口、强制锁定模式
 
-### Compiles and hot-reloads for development
+更多详情请访问：
+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 run serve
+
+#### 安装注意事项
+
+⚠️ **重要**：本组件依赖 `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 minifies for production
+全局注册后，可在项目任何组件中使用 `<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等方法将弹幕实际发送出去
+    }
+  }
+}
 ```
-npm run build
+
+### 组件使用
+
+在模板中使用组件：
+
+```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"
+      :thumbnails="thumbnails"
+      :sendDanmu="sendDanmu"
+      :infoButton="true"
+      :enableDanmu="true"
+      :chapterButton="true"
+      danmuBar="danmu-controlbar"
+    />
+  </div>
+</template>
 ```
 
-### Lints and fixes files
+### 主要属性说明
+
+| 属性名称 | 说明 | 备注 |
+|---------|------|------|
+| 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) | - |
+
+### 事件
+
+组件提供了 `onready`、`onmediaevent` 等事件，详细说明请参考 [zwplayer 事件文档](https://www.zwplayer.cn/docs/support/guide-events.html)。
+
+### 方法调用
+
+通过 `ref` 引用调用播放器方法：
+
+```javascript
+// 获取播放器实例
+const player = this.$refs.zwplayerRef
+
+// 调用方法
+player.play()
+player.pause()
+player.seek(120)
 ```
-npm run lint
+
+### 示例项目
+
+- **Gitee**: https://gitee.com/chenfanyu/zwplayer-vue2x-demo
+- **GitHub**: https://github.com/chenfanyu/zwplayer-vue2x-demo
+
+## 其他版本
+
+### Vue 3.x
+
+如果你使用 Vue 3.x，请安装 `zwplayervue3`：
+
+```bash
+npm install zwplayervue3 --save
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+详细文档：[zwplayervue3](https://www.zwplayer.cn/guide-vue-framework.html)