veplayer-mp-wechat - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

dist/index.js

@@ -18,2 +18,6 @@ "use strict";
         },
+        componentId: {
+            type: String,
+            value: ''
+        },
         playAuthToken: {
@@ -141,9 +145,9 @@ type: String,
             // console.log('>>>>Player attached', this.properties.loggerInfo)
-            let _videoId = videoId;
+            let _videoId = videoId || this.properties.componentId;
             if (!_videoId) {
                 _videoId = (0, index_2.generateUppercaseUid)();
-                this.setData({
-                    videoId: _videoId
-                });
             }
+            this.setData({
+                videoId: _videoId
+            });
             const videoCtx = wx.createVideoContext(_videoId, this);
@@ -150,0 +154,0 @@ const propsClassNames = ((_a = videoProps.className) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];

package.json

 {
   "name": "veplayer-mp-wechat",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "license": "MIT",
@@ -5,0 +5,0 @@ "miniprogram": "dist",

README.md

@@ -1,2 +0,2 @@
-# Veplayer小程序播放器
+# VePlayer小程序播放器
 
@@ -52,3 +52,3 @@ > 小程序播放器微信原生版本
 ```
-### 2. vid 方式播放
+### 2. vid + playAuthToken 方式播放
 ```xml
@@ -67,4 +67,4 @@ <view>
 > 
-> - `playDomain`是调用火山引擎视频点播OpenAPI的接口地址，业务方如果做了该接口的代理，可以替换成业务方的地址。使用正式appid调试时需要将该地址配置在小程序[服务器域名配置](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html)白名单中。
-> -  `playAuthToken`是获取视频播放信息的临时凭证，由业务方服务端通过调用火山服务端SDK本地生成，具体生成参考[火山引擎视频点播文档](https://www.volcengine.com/docs/4/67350#%E6%9C%8D%E5%8A%A1%E7%AB%AF-sdk)
+> - `playDomain`是调用火山引擎视频点播OpenAPI的接口地址，业务方如果做了该接口的代理，可以替换成业务方的地址。
+> -  `playAuthToken`是获取视频播放信息的临时凭证，由业务方服务端通过调用火山服务端SDK基于视频vid本地服务生成，具体生成参考[火山引擎视频点播文档](https://www.volcengine.com/docs/4/67350#%E6%9C%8D%E5%8A%A1%E7%AB%AF-sdk)
 ## [组件属性](#VideoProps)
@@ -74,24 +74,25 @@
 
-| Property | Type | Default | Required | Description |
-|----------|------|---------|----------|-------------|
-|   mode    |   'portrait' \| 'landscape'   |     'landscape'    |     No     |        播放器支持竖屏(portrait)及横屏(landscape)两种播放UI模式。横屏模式偏向于普通的PC视频播放器UI，竖屏视频展示类似抖音等短视频播放模式。      |
-|   src    |   string   |         |     YES     |             |
-|   controls    |   'custom' \| 'native'\|'false'   |     'custom'    |    No      |         custom: 自定义UI，native: 原生组件UI，false: 完全关闭播放UI控件（包括自定义UI及原生组件UI），播放UI控件指loading状态、播控按钮、进度条、时间显示等   |
-|   duration    |   number   |         |    No      |         根据官方文档说明，duration属性只是控制显示的时长，不会控制实际播放的时长。因此该属性不设置给原始video组件，只提供给自定义UI使用   |
-|   show-center-play-btn    |   boolean   |         |    No      |      是否显示视频正中心的播放按钮     |
-|   show-bottom-progress	    |   boolean   |         |    No      |     是否展示底部进度条	    |
-|   bindplay	    |   eventhandle   |         |    No      |     当开始/继续播放时触发play事件		    |
-|   bindpause	    |   eventhandle   |         |    No      |     当暂停播放时触发 pause 事件	    |
-|   bindended	    |   eventhandle   |         |    No      |     当播放到末尾时触发 ended 事件		    |
-|   bindtimeupdate		    |   eventhandle   |         |    No      |     播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次	    |
-|   bindfullscreenchange		    |   eventhandle   |         |    No      |     视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal   |
-|   bindwaiting		    |   eventhandle   |         |    No      |     视频出现缓冲时触发		    |
-|   binderror		    |   eventhandle   |         |    No      |     视频播放出错时触发			    |
-|   bindprogress		    |   eventhandle   |         |    No      |     加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比			    |
-|   bindloadedmetadata		    |   eventhandle   |         |    No      |     视频元数据加载完成时触发。event.detail = {width, height, duration}	    |
-|   bindcontrolstoggle		    |   eventhandle   |         |    No      |     切换 controls 显示隐藏时触发。event.detail = {show}    |
-|   bindenterpictureinpicture		    |   eventhandle   |         |    No      |     播放器进入小窗		    |
-|   bindleavepictureinpicture			    |   eventhandle   |         |    No      |     播放器退出小窗			    |
-|   bindseeking				    |   eventhandle   |         |    No      |     组件内部代理劫持VideoContext，VideoContext.seek 调用后会立即发送该事件，`该事件非video自带事件，只支持 controls="custom"	时才对外发送`	    |
-|   bindseekcomplete				    |   eventhandle   |         |    No      |     seek 完成时触发 (position iOS 单位 s, Android 单位 ms)			    |
+| Property | Type | Default     | Required | Description                                                                                                |
+|----------|------|-------------|----------|------------------------------------------------------------------------------------------------------------|
+|   mode    |   'portrait' \| 'landscape'   | 'landscape' | No       | 播放器支持竖屏(portrait)及横屏(landscape)两种播放UI模式。横屏模式偏向于普通的PC视频播放器UI，竖屏视频展示类似抖音等短视频播放模式。                            |
+|   componentId     | string    |             | NO       | video组件的id，用于通过`createVideoContext`获取视频VideoContext，不传入则会随机生成一个id，此时视频VideoContext仅能通过组件上下文的`getContext`方法获取 |
+|   src    |   string   |             | YES      |                                                                                                            |
+|   controls    |   'custom' \| 'native'\|'false'   | 'custom'    | No       | custom: 自定义UI，native: 原生组件UI，false: 完全关闭播放UI控件（包括自定义UI及原生组件UI），播放UI控件指loading状态、播控按钮、进度条、时间显示等             |
+|   duration    |   number   |             | No       | 根据官方文档说明，duration属性只是控制显示的时长，不会控制实际播放的时长。因此该属性不设置给原始video组件，只提供给自定义UI使用                                    |
+|   show-center-play-btn    |   boolean   |             | No       | 是否显示视频正中心的播放按钮                                                                                             |
+|   show-bottom-progress	    |   boolean   |             | No       | 是否展示底部进度条	                                                                                                 |
+|   bindplay	    |   eventhandle   |             | No       | 当开始/继续播放时触发play事件		                                                                                        |
+|   bindpause	    |   eventhandle   |             | No       | 当暂停播放时触发 pause 事件	                                                                                         |
+|   bindended	    |   eventhandle   |             | No       | 当播放到末尾时触发 ended 事件		                                                                                       |
+|   bindtimeupdate		    |   eventhandle   |             | No       | 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次	                                           |
+|   bindfullscreenchange		    |   eventhandle   |             | No       | 视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal                   |
+|   bindwaiting		    |   eventhandle   |             | No       | 视频出现缓冲时触发		                                                                                                |
+|   binderror		    |   eventhandle   |             | No       | 视频播放出错时触发			                                                                                               |
+|   bindprogress		    |   eventhandle   |             | No       | 加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比			                                                         |
+|   bindloadedmetadata		    |   eventhandle   |             | No       | 视频元数据加载完成时触发。event.detail = {width, height, duration}	                                                     |
+|   bindcontrolstoggle		    |   eventhandle   |             | No       | 切换 controls 显示隐藏时触发。event.detail = {show}                                                                  |
+|   bindenterpictureinpicture		    |   eventhandle   |             | No       | 播放器进入小窗		                                                                                                  |
+|   bindleavepictureinpicture			    |   eventhandle   |             | No       | 播放器退出小窗			                                                                                                 |
+|   bindseeking				    |   eventhandle   |             | No       | 组件内部代理劫持VideoContext，VideoContext.seek 调用后会立即发送该事件，`该事件非video自带事件，只支持 controls="custom"	时才对外发送`	           |
+|   bindseekcomplete				    |   eventhandle   |             | No       | seek 完成时触发 (position iOS 单位 s, Android 单位 ms)			                                                           |
 
@@ -137,3 +138,3 @@
 const component = this.selectComponent("#videoContainer");
-const player = component.getContext()
+const player = component.getContext();
 
@@ -143,8 +144,8 @@ // 事件订阅
   console.log('event error:', e)
-})
+});
 player.on('timeupdate', (e) => {
   const { currentTime, duration } = e.detail;
-  console.log('event error:', currentTime, duration)
-})
-...
+  console.log('event timeupdate:', currentTime, duration)
+});
+// ...
 
@@ -172,2 +173,71 @@ ```
 
+## uni-app 项目使用
 
+此播放器组件提供的是原生小程序版本，uni-app项目[支持使用小程序自定义组件](https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html)，可以按照以下步骤在uni-app项目中使用此播放器组件：
+1. 在uin-app项目中安装依赖：
+```bash
+# npm
+npm i veplayer-mp-wechat
+
+# yarn 
+yarn add veplayer-mp-wechat
+```
+
+2. 拷贝`node_modules/veplayer-mp-wechat`到项目小程序组件存放目录`wxcomponents`。
+
+3. 在 `pages.json` 对应页面的 style -> usingComponents 引入组件：
+``` json
+{
+	"pages": [{
+		"path": "index/index",
+		"style": {
+			// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
+			"usingComponents": {
+				"ve-video": "/wxcomponents/veplayer-mp-wechat/dist/index"
+			},
+			// #endif
+			"navigationBarTitleText": "uni-app"
+		}
+	}]
+}
+```
+
+4. 在页面中使用：
+
+组件使用
+```javascript
+<!-- 页面模板 (index.vue) -->
+<view>
+  <!-- 在页面中对自定义组件进行引用 -->
+  <ve-video
+    id="video"
+    src="https://xx.cdn.com/demo.mp4"
+    controls="custom"
+  />
+</view>
+```
+
+API使用，以暂停为例：
+```javascript
+  const component = this.selectComponent('#video');
+  const player = component.getContext();
+  if (player) {
+    player.pause();
+  }
+```
+订阅事件：
+```javascript
+  const component = this.selectComponent('#video');
+  const player = component.getContext();
+  if (player) {
+    player.on('timeupdate', (e) => {
+      const { currentTime, duration } = e.detail;
+      console.log('event timeupdate:', currentTime, duration)
+    });
+  }
+```
+如果是从uni-app的video组件迁移到本组件，不作API使用的更改，则组件属性里通过componentId传入`uni.createVideoContext`需要的组件id，API调用同[uni-app组件说明](https://uniapp.dcloud.net.cn/component/video.html)。需要注意的是通过`createVideoContext`获取的播放器上下文无法使用事件订阅。
+
+5. 微信小程序构建
+
+uni-app项目打包构建微信产物，用微信开发者工具导入打包后的产物，如果打包产物根目录里没有package.json，则执行`npm init -y`初始化npm，安装依赖`npm i veplayer-mp-wechat`或`yarn add veplayer-mp-wechat`，微信开发者工具 - 工具 - 构建npm，即完成了在微信小程序组件的构建。这样就可以通过微信开发者工具预览使用效果。

No alert changes

Improved metrics

Total package byte prevSize

84721

increased by5.21%

Lines of code

1691

increased by0.24%

Number of lines in readme file

238

increased by41.67%

No dependency changes