veplayer-mp-wechat - npm Package Compare versions

Comparing version 1.2.8 to 1.2.9-rc.0

dist/behaviors/videoEventsBehavior.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -8,3 +11,3 @@ /* eslint-disable object-shorthand */
 const index_1 = require("../enums/index");
-const index_2 = require("../tool/index");
+const index_2 = __importDefault(require("../tool/index"));
 exports.default = Behavior({
@@ -11,0 +14,0 @@ properties: {

dist/enums/index.js

@@ -27,3 +27,3 @@ "use strict";
 exports.PKG = 'wechat';
-exports.VERSION = '1.2.8';
+exports.VERSION = '1.2.9-rc.0';
 /**
@@ -30,0 +30,0 @@ * 控制栏状态枚举

dist/index.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -9,5 +12,5 @@ /* eslint-disable no-magic-numbers */
 const eventemitter3_1 = require("eventemitter3");
-const videoBehavior_1 = require("./behaviors/videoBehavior");
-const collectorBehavior_1 = require("./behaviors/collectorBehavior");
-const interact_behavior_1 = require("./behaviors/interact_behavior");
+const videoBehavior_1 = __importDefault(require("./behaviors/videoBehavior"));
+const collectorBehavior_1 = __importDefault(require("./behaviors/collectorBehavior"));
+const interact_behavior_1 = __importDefault(require("./behaviors/interact_behavior"));
 const index_1 = require("./enums/index");
@@ -17,3 +20,3 @@ const index_2 = require("./xgerror/index");
 const index_4 = require("./request/index");
-const index_5 = require("./tool/index");
+const index_5 = __importDefault(require("./tool/index"));
 (0, index_3.XgComponent)({
@@ -20,0 +23,0 @@ behaviors: ['wx://component-export', videoBehavior_1.default, collectorBehavior_1.default, interact_behavior_1.default],

dist/plugins/controls/index.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const index_1 = require("../../utils/index");
-const plugin_useraction_behavior_1 = require("../../behaviors/plugin_useraction_behavior");
+const plugin_useraction_behavior_1 = __importDefault(require("../../behaviors/plugin_useraction_behavior"));
 (0, index_1.XgComponent)({
@@ -6,0 +9,0 @@ behaviors: [plugin_useraction_behavior_1.default],

dist/plugins/progress/index.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -6,4 +9,4 @@ /* eslint-disable no-magic-numbers */
 /* eslint-disable @typescript-eslint/naming-convention */
-const videoEventsBehavior_1 = require("../../behaviors/videoEventsBehavior");
-const index_1 = require("../../tool/index");
+const videoEventsBehavior_1 = __importDefault(require("../../behaviors/videoEventsBehavior"));
+const index_1 = __importDefault(require("../../tool/index"));
 const index_2 = require("../../utils/index");
@@ -10,0 +13,0 @@ const index_3 = require("../../enums/index");

dist/plugins/xg-play-button/xg-play-button.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const index_1 = require("../../utils/index");
-const videoEventsBehavior_1 = require("../../behaviors/videoEventsBehavior");
-const plugin_useraction_behavior_1 = require("../../behaviors/plugin_useraction_behavior");
-const index_2 = require("../../tool/index");
+const videoEventsBehavior_1 = __importDefault(require("../../behaviors/videoEventsBehavior"));
+const plugin_useraction_behavior_1 = __importDefault(require("../../behaviors/plugin_useraction_behavior"));
+const index_2 = __importDefault(require("../../tool/index"));
 (0, index_1.XgComponent)({
@@ -8,0 +11,0 @@ behaviors: [videoEventsBehavior_1.default, plugin_useraction_behavior_1.default],

dist/tool/collector.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Collector = void 0;
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+/* eslint-disable object-shorthand */
+/* eslint-disable no-multi-spaces */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/comma-dangle */
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable object-shorthand */
+/* eslint-disable @typescript-eslint/prefer-optional-chain */
+/* eslint-disable @typescript-eslint/dot-notation */
+/* eslint-disable semi */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+const collector_constructor_1 = require("../collector-constructor");
+const utils_1 = require("../utils");
 wx.__COLLECTOR__ = undefined;
@@ -34,3 +47,3 @@ wx.__COLLECTOR_INFO__ = {
             }
-            config.needET && (_data['event_verify_url'] = 'https://xxx.xx.xx');
+            config.needET && (_data['event_verify_url'] = 'https://mcs.bytedance.net');
             config.log && (_data.log = config.log);
@@ -48,10 +61,16 @@ wx.__COLLECTOR__.uploader.init(_data);
             if (!wx.__COLLECTOR__) {
-                return null;
+                // 如果没有__COLLECTOR__说明没有初始化日志，则在内部初始化
+                if (collector_constructor_1.initCollector && typeof collector_constructor_1.initCollector === 'function' && config.appId) {
+                    // @ts-ignore
+                    (0, collector_constructor_1.initCollector)(config);
+                }
+                else {
+                    utils_1.VE_DEBUGGER.warn('the appId of logger config has not set');
+                }
             }
             const _c = Object.assign({ lineAppId: wx.__COLLECTOR_INFO__.lineAppId | 0, lineUserId: wx.__COLLECTOR_INFO__.lineUserId }, config);
-            const collector = new wx.__COLLECTOR__({
+            return new wx.__COLLECTOR__({
                 config: _c,
                 videoInfo: videoInfo || {}
             });
-            return collector;
         }
@@ -58,0 +77,0 @@ catch (e) {

dist/tool/index.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollectorManager = exports.default = void 0;
-const mediaManager_1 = require("./mediaManager");
+const mediaManager_1 = __importDefault(require("./mediaManager"));
 exports.default = mediaManager_1.default;
-const collector_1 = require("./collector");
+const collector_1 = __importDefault(require("./collector"));
 exports.CollectorManager = collector_1.default;

package.json

 {
   "name": "veplayer-mp-wechat",
-  "version": "1.2.8",
+  "version": "1.2.9-rc.0",
   "dependencies": {
     "eventemitter3": "^5.0.1",
-    "xgplayer-service-miniprogram": "0.5.1-0"
+    "xgplayer-service-miniprogram": "0.5.1-0",
+    "veplayer-mp-logger": "1.2.8"
   },
@@ -8,0 +9,0 @@ "main": "./dist/index.js",

README.md

@@ -39,16 +39,2 @@ # Veplayer小程序播放器
 ## 使用组件
-### 配置播放器日志
-
-1. 您需要在火山引擎[视频点播控制台](https://console.volcengine.com/vod/sdk/app/)，[新建应用](https://www.volcengine.com/docs/4/79594)，获取应用的唯一 AppID。![image.png](https://p6-addone.byteimg.com/tos-cn-i-hhc0kcolqq/6d463a56e667429aa67ff6dd526f3ebd.png~tplv-hhc0kcolqq-image.image)
-2. 引入日志组件，在页面加载前初始化日志数据采集 SDK 的构造器。`initCollector` 方法的参数中的 `userId` 是用来统计用户相关的播放数据。
-> 推荐使用应用关联的用户 ID，方便后续发生错误时进行单点排查。
-```javascript
-import { initCollector } from 'veplayer-mp-logger'
-
-initCollector({
-  appId: 111111, // 请务必传入火山引擎上业务自己的 AppID
-  userId: '7231102214076007992' // 用户 ID，没有可以不传入，日志 SDK自动生成
-})
-```
-如果在不使用播放器 SDK 的情况下，也能够进行播放日志上报，具体操作请参考 [veplayer-mp-logger](https://www.npmjs.com/package/veplayer-mp-logger)。
 ### 使用播放器组件
@@ -109,2 +95,47 @@ 按照播放方式的不同，分为 DirectUrl 方式播放和 Vid 方式播放。
 ```
+
+### 配置日志采集上报
+在组件的属性中传入logInfo，logInfo中需要传入appId，即可开启播放日志的采集上报，除了appId，可以根据业务的需要填入以下所列配置。
+
+| 属性名           | 类型        | 是否必选 | 默认值                      | 说明                                                                                                                      |
+|---------------|-----------|------|--------------------------|-------------------------------------------------------------------------------------------------------------------------|
+| appId         | number    | 是    | -                        | 应用ID, 可在火山引擎视频点播控制台上获取应用 AppID                                                                                          |
+| userId        | string    | 否    | -                        | 用户 ID，强烈建议您使用与业务相关的用户 ID。如不传入，SDK 将随机生成一个值。强烈建议您使用与业务密切相关的用户 ID，以便在播放过程中出现错误时，可以进行单点故障排查，精确定位问题。如果您没有设定用户 ID，组件将随机生成一个。 |
+| tag           | string    | 否    | -                        | 业务标签或业务类型，用于标记不同的播放场景，如推荐页、详情页                                                                                          |
+| subtag        | string    | 否    | -                        | 子业务标签或业务类型，用于细分播放场景                                                                                                     |
+| vtype         | HLS 或 MP4 | 否    | MP4                      | 视频格式                                                                                                                    | 
+| codecType     | string    | 否    | h264                     | 视频编码格式                                                                                                                  |
+| bitrate       | number    | 否    | 0                        | 视频码率                                                                                                                    |
+| logger        | boolean   | 否    | false                    | 是否开启日志打印                                                                                                                |
+| appName       | string    | 否    | 视频云小程序                   | 应用名称                                                                                                                    |
+| appVersion    | string    | 否    | 1.0.0                    | 应用版本                                                                                                                    |
+| channelDomain | string    | 否    | https://mcs.zijieapi.com | 日志上报域名                                                                                                                  |
+
+示例代码如下：
+```xml
+<view>
+  <!-- 以下是对小程序播放器 SDK 的引用 -->
+  <veplayer
+    id="videoContainer"
+    src="{{src}}"
+    loop
+    logInfo="{{logInfo}}"
+  />
+</view>
+```
+```javascript
+// index.js
+Component({
+  data: {
+    src: 'https://xxxx.mp4',
+    logInfo: {
+      appId: xxx,
+      tag: 'recommend',
+      subtag: 'hot',
+    }
+  }
+})
+```
+
+
 ### 查看日志上报数据
@@ -238,15 +269,4 @@ 视频信息配置完成后，可登录[视频点播控制台](https://console.volcengine.com/vod/welcome/)，选择左侧导航栏[质量平台 > 播放看板](https://console.volcengine.com/vod/quality_control/new_play_dashboard/?Tab=all)，进入**播放看板**页面，选择大盘速览页签，在查询条件中选择在小程序点播 SDK 中配置的各项指标。详细操作说明请见[查看大盘速览](https://www.volcengine.com/docs/4/106096#%E6%9F%A5%E7%9C%8B%E5%A4%A7%E7%9B%98%E9%80%9F%E8%A7%88)。
 
-### 3. 配置播放器日志
-在页面/组件实例化之前，配置播放器日志的相关配置。
-``` javascript
-  import { CollectorManager } from '@/wxcomponents/veplayer-mp-wechat/dist/tool';
-  import Collector from 'veplayer-mp-logger';
 
-  CollectorManager.setCollector(Collector, {
-    appId: 11***1,            // 视频点播控制台中获取的应用 ID
-    userId: '7231102***76007992'   // 用户 ID，没有可以不传入，SDK 自动生成
-  });
-```
-
-### 4. 配置组件引入
+### 3. 配置组件引入
 在 `pages.json` 对应页面的 style -> usingComponents 引入组件： 可通过uni-app提供的[条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.html#preprocessor)的方式在不同平台上编译使用不同的SDK，抖音小程序播放器SDK对应[veplayer-mp-douyin](https://www.npmjs.com/package/veplayer-mp-douyin)
@@ -279,3 +299,3 @@
 
-### 5. 组件使用
+### 4. 组件使用
 以vue模板语法示例：
@@ -320,2 +340,50 @@ ```vue
 
+### 5. 配置日志采集上报
+在组件的属性中传入logInfo，logInfo中需要传入appId，即可开启播放日志的采集上报，除了appId，可以根据业务的需要填入以下所列配置。
+
+| 属性名           | 类型        | 是否必选 | 默认值                      | 说明                                                                                                                      |
+|---------------|-----------|------|--------------------------|-------------------------------------------------------------------------------------------------------------------------|
+| appId         | number    | 是    | -                        | 应用ID, 可在火山引擎视频点播控制台上获取应用 AppID                                                                                          |
+| userId        | string    | 否    | -                        | 用户 ID，强烈建议您使用与业务相关的用户 ID。如不传入，SDK 将随机生成一个值。强烈建议您使用与业务密切相关的用户 ID，以便在播放过程中出现错误时，可以进行单点故障排查，精确定位问题。如果您没有设定用户 ID，组件将随机生成一个。 |
+| tag           | string    | 否    | -                        | 业务标签或业务类型，用于标记不同的播放场景，如推荐页、详情页                                                                                          |
+| subtag        | string    | 否    | -                        | 子业务标签或业务类型，用于细分播放场景                                                                                                     |
+| vtype         | HLS 或 MP4 | 否    | MP4                      | 视频格式                                                                                                                    | 
+| codecType     | string    | 否    | h264                     | 视频编码格式                                                                                                                  |
+| bitrate       | number    | 否    | 0                        | 视频码率                                                                                                                    |
+| logger        | boolean   | 否    | false                    | 是否开启日志打印                                                                                                                |
+| appName       | string    | 否    | 视频云小程序                   | 应用名称                                                                                                                    |
+| appVersion    | string    | 否    | 1.0.0                    | 应用版本                                                                                                                    |
+| channelDomain | string    | 否    | https://mcs.zijieapi.com | 日志上报域名                                                                                                                  |
+
+示例代码如下：
+```vue
+<!-- 页面模板 (index.vue) -->
+<template>
+  <view>
+    <veplayer
+        id="videoContainer"
+        :src="src"
+        loop
+        :logInfo="logInfo"
+    />
+  </view>
+</template> 
+<script>
+  export default {
+    data() {
+      return {
+        src: 'https://xx.cdn.com/demo.mp4',
+        logInfo: {
+          appId: xxx,
+          tag: 'recommend',
+          subtag: 'hot',
+        }
+      }
+    },
+  }
+</script>
+
+```
+
+### 使用播放器组件
 API使用，以暂停为例：
@@ -372,15 +440,3 @@ ```javascript
 
-### 3. 配置播放器日志
-在页面/组件实例化之前，配置播放器日志的相关配置。
-``` javascript
-  import { CollectorManager } from '@/wxcomponents/veplayer-mp-wechat/dist/tool';
-  import Collector from 'veplayer-mp-logger';
-
-  CollectorManager.setCollector(Collector, {
-    appId: 11***1,            // 视频点播控制台中获取的应用 ID
-    userId: '7231102***76007992'   // 用户 ID，没有可以不传入，SDK 自动生成
-  });
-```
-
-### 4. 配置组件引入
+### 3. 配置组件引入
 在使用到播放器组件所在页面的`index.config.ts`配置中引入组件：
@@ -400,3 +456,3 @@ ```typescript
 
-### 5. 组件使用
+### 4. 组件使用
 以react语法示例在自定义组件中使用播放器组件：
@@ -447,2 +503,71 @@ ```typescript
 
+### 5. 配置日志采集上报
+在组件的属性中传入logInfo，logInfo中需要传入appId，即可开启播放日志的采集上报，除了appId，可以根据业务的需要填入以下所列配置。
+
+| 属性名           | 类型        | 是否必选 | 默认值                      | 说明                                                                                                                      |
+|---------------|-----------|------|--------------------------|-------------------------------------------------------------------------------------------------------------------------|
+| appId         | number    | 是    | -                        | 应用ID, 可在火山引擎视频点播控制台上获取应用 AppID                                                                                          |
+| userId        | string    | 否    | -                        | 用户 ID，强烈建议您使用与业务相关的用户 ID。如不传入，SDK 将随机生成一个值。强烈建议您使用与业务密切相关的用户 ID，以便在播放过程中出现错误时，可以进行单点故障排查，精确定位问题。如果您没有设定用户 ID，组件将随机生成一个。 |
+| tag           | string    | 否    | -                        | 业务标签或业务类型，用于标记不同的播放场景，如推荐页、详情页                                                                                          |
+| subtag        | string    | 否    | -                        | 子业务标签或业务类型，用于细分播放场景                                                                                                     |
+| vtype         | HLS 或 MP4 | 否    | MP4                      | 视频格式                                                                                                                    | 
+| codecType     | string    | 否    | h264                     | 视频编码格式                                                                                                                  |
+| bitrate       | number    | 否    | 0                        | 视频码率                                                                                                                    |
+| logger        | boolean   | 否    | false                    | 是否开启日志打印                                                                                                                |
+| appName       | string    | 否    | 视频云小程序                   | 应用名称                                                                                                                    |
+| appVersion    | string    | 否    | 1.0.0                    | 应用版本                                                                                                                    |
+| channelDomain | string    | 否    | https://mcs.zijieapi.com | 日志上报域名                                                                                                                  |
+
+示例代码如下：
+```typescript
+const VideoPlayer = ({
+       videoComponentId,
+       className,
+       videoPlayUrl,
+       coverUrl,
+       controlShow,
+       onTimeUpdate,
+       onError,
+   }) => {
+  const handleTimeupdate = (e) => {
+      // 注意原生组件事件的event在taro项目中被劫持包装到了e.mpEvent.detail.e中
+    const originEvent = e.mpEvent.detail.e;
+    const { currentTime, duration } = originEvent.detail;
+    // TODO something
+    // ...
+    onTimeUpdate(currentTime);
+  };
+
+  const handleVideoTap = () => {
+      // 点击视频
+  };
+  
+  const logInfo = {
+    appId: xxx,
+    tag: 'recommend',
+    subtag: 'hot',
+  }
+  
+  return (
+    <veplayer
+      id={videoComponentId}
+      // 引用原生组件需要使用 class 传参
+      class={className}
+      src={videoPlayUrl}
+      logInfo={logInfo}
+      showPlayBtn
+      showBottomProgress={false}
+      controls={controlShow}
+      // 原生组件需要使用小写 autoplay
+      autoplay
+      onPlay={onPlay}
+      onTimeupdate={handleTimeupdate}
+      poster={coverUrl}
+      onError={onError}
+      onTap={handleVideoTap}
+    />
+);
+};
+```
+
 API使用，以暂停为例：
@@ -449,0 +574,0 @@ ```javascript

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

220692

increased by31.52%

Number of package files

64

increased by3.23%

Lines of code

3255

increased by6.58%

Number of lines in readme file

598

increased by26.43%

Worsened metrics

Dependency count

3

increased by50%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Addedveplayer-mp-logger@1.2.8

• + Addedveplayer-mp-logger@1.2.8(transitive)