veplayer-mp-douyin - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

dist/behaviors/videoBehavior.js

@@ -86,2 +86,10 @@ "use strict";
         },
+        showBottomProgress: {
+            type: Boolean,
+            value: true
+        },
+        showProgress: {
+            type: Boolean,
+            value: true
+        },
         // TODO definition需要支持vid获取
@@ -88,0 +96,0 @@ definition: Object,

dist/behaviors/videoEventsBehavior.js

@@ -12,17 +12,20 @@ "use strict";
             type: String,
-            value: '',
-            observer(newVal, oldVal, _changedPath) {
-                if (newVal === oldVal) {
-                    return;
-                }
-                console.log('Behavior videoId', newVal, oldVal, newVal === oldVal);
-                this.removeMediaEvents();
-                this.addMediaEvents();
-            }
+            value: ''
         },
     },
+    observers: {
+        'videoId': function (newVal, oldVal) {
+            const { videoId } = this.properties;
+            // console.log('!!!!observers videoId', newVal, oldVal, videoId, videoId === newVal)
+            if (newVal === oldVal || !newVal) {
+                return;
+            }
+            this.removeMediaEvents();
+            this.addMediaEvents();
+        }
+    },
     methods: {
         addMediaEvents: function () {
-            const { videoId, pluginName } = this.properties;
-            console.log('mediaManager>addMediaEvents', pluginName, videoId);
+            const { videoId } = this.properties;
+            // console.log('mediaManager>addMediaEvents', videoId)
             if (this.media || !videoId) {
@@ -56,3 +59,3 @@ return;
             }
-            console.log('videoEventsBehavior>>removeMediaEvents');
+            // console.log('videoEventsBehavior>>removeMediaEvents')
             this.___mediaEvents && this.___mediaEvents.forEach(item => {
@@ -59,0 +62,0 @@ this.media.off(item.key, item.fun);

dist/index.js

@@ -6,2 +6,3 @@ "use strict";
 const videoBehavior_1 = require("./behaviors/videoBehavior");
+const douyinBehavior_1 = require("./behaviors/douyinBehavior");
 const collectorBehavior_1 = require("./behaviors/collectorBehavior");
@@ -13,4 +14,15 @@ const index_1 = require("./enums/index");
 (0, index_2.XgComponent)({
-    behaviors: [videoBehavior_1.default, collectorBehavior_1.default],
+    behaviors: [videoBehavior_1.default, douyinBehavior_1.default, collectorBehavior_1.default],
     properties: {
+        controls: {
+            type: String,
+            optionalTypes: [Boolean],
+            value: 'custom',
+            observer(newVal, oldVal, _changedPath) {
+                // console.log(`!!!!!Player${this.data.videoId} controls:`, `newVal:${newVal}, oldVal:${oldVal}, !!newVal:${!!newVal}`);
+                if (newVal !== 'native') {
+                    newVal ? this.focusPlayer(false) : this.blurPlayer();
+                }
+            }
+        },
         mode: {
@@ -92,2 +104,3 @@ type: String,
             const { src, definitionList, playAuthToken, playDomain } = this.data;
+            // console.log('>>>>observers', src, definitionList, playAuthToken, playDomain)
             this.triggerCollector('break');
@@ -145,3 +158,3 @@ this.updateCollector(this.data);
             const { videoId, videoProps, isFullScreen, loadedMeta, toggleCtrlOverLayer, ended } = this.data;
-            // console.log('>>>>Player attached', videoId)
+            // console.log('>>>>Player attached', this.properties.loggerInfo)
             let _videoId = videoId || this.properties.componentId;
@@ -185,5 +198,6 @@ if (!_videoId) {
         ready() {
-            // console.log('Index>>>>ready', this.media)
+            const { controls } = this.properties;
             this.updateStatusOfShowLoading();
-            this.focusPlayer();
+            // console.log(`!!!!!Player${this.data.videoId} ready`, `controls:${controls}`, `data.controls:${this.data.controls}`)
+            !!controls && this.focusPlayer();
             this.initCollector();
@@ -220,4 +234,4 @@ this.updateCollector(this.data);
         focusPlayer(needAutoHide = true) {
-            const { autoBlurTime } = this.properties;
-            const { isFocus } = this.data;
+            const { autoBlurTime, controls } = this.properties;
+            const { isFocus, videoId } = this.data;
             if (this.fTimer) {
@@ -227,3 +241,3 @@ clearTimeout(this.fTimer);
             }
-            // console.log('focusPlayer', needAutoHide, autoBlurTime, needAutoHide)
+            // console.log(`!!!!!Player${videoId} focusPlayer`, `isFocus:${isFocus}, controls:${controls}`)
             needAutoHide && (this.fTimer = setTimeout(() => {
@@ -237,3 +251,4 @@ this.blurPlayer();
         blurPlayer() {
-            const { isFocus } = this.data;
+            const { isFocus, videoId } = this.data;
+            // console.log(`!!!!!Player${videoId} blurPlayer`, `isFocus:${isFocus}  controls:${this.properties.controls}`)
             if (isFocus) {
@@ -257,5 +272,5 @@ this.setData({
         onTap(e) {
-            console.log('>>>>Index>onTap');
-            const { mode, loadedMeta, paused, isFocus, ended } = this.data;
-            if (mode === "portrait" /* PlayerModes.PORTRAIT */) {
+            const { mode, loadedMeta, paused, isFocus, ended, videoId } = this.data;
+            const { controls, enablePlayGesture } = this.properties;
+            if (enablePlayGesture && mode === "portrait" /* PlayerModes.PORTRAIT */) {
                 if (loadedMeta) {
@@ -270,3 +285,4 @@ if (paused || ended) {
             }
-            if (!isFocus) {
+            // console.log(`!!!!!Player${videoId} onTap`, `controls:${controls}, data.controls:${this.data.controls}, isFocus:${isFocus}`);
+            if (!isFocus && controls) {
                 this.focusPlayer();
@@ -308,3 +324,4 @@ }
         onPlay(e) {
-            const { firstPlay } = this.data;
+            const { firstPlay, videoId, isFocus } = this.data;
+            const { controls } = this.properties;
             const obj = {
@@ -319,7 +336,10 @@ paused: false,
             this._emitEvt(index_1.MediaEvents.PLAY, e);
-            this.focusPlayer();
+            // console.log(`!!!!!Player${videoId} onPlay`, `isFocus:${isFocus}, controls:${controls}, data.controls:${this.data.controls}`)
+            !!controls && this.focusPlayer();
         },
         onPause(e) {
-            const { isFocus } = this.data;
-            this.focusPlayer(false);
+            const { isFocus, videoId } = this.data;
+            const { controls } = this.properties;
+            // console.log(`!!!!!Player${videoId} onPause`, `isFocus:${isFocus}, controls:${controls}, data.controls:${this.data.controls}`)
+            !!controls && this.focusPlayer(false);
             this.setData({
@@ -335,5 +355,5 @@ paused: true
             const data = {
-                currentTime: currentTime,
-                duration: duration,
-                playPercent: Math.floor((currentTime / duration) * 100)
+                currentTime: currentTime || 0,
+                duration: duration || 0,
+                playPercent: duration > 0 ? Math.floor((currentTime / duration) * 100) : 0
             };
@@ -393,27 +413,2 @@ if (seeking) {
         },
-        onAdStart(e) {
-            this._emitEvt(index_1.MediaEvents.ADSTART, e);
-        },
-        onAdEnded(e) {
-            this._emitEvt(index_1.MediaEvents.ADENDED, e);
-        },
-        onAdLoad(e) {
-            this._emitEvt(index_1.MediaEvents.ADLOAD, e);
-        },
-        onAdClose(e) {
-            this._emitEvt(index_1.MediaEvents.ADCLOSE, e);
-        },
-        onAdError(e) {
-            this._emitEvt(index_1.MediaEvents.ADERROR, e);
-        },
-        onPlaybackRateChange(e) {
-            this._emitEvt(index_1.MediaEvents.PLAYBACKREATECHANGE, e);
-        },
-        onMuteChange(e) {
-            this._emitEvt(index_1.MediaEvents.MUTECHANGE, e);
-        },
-        onControlTap(e) {
-            console.log('onControlTap', e);
-            this._emitEvt(index_1.MediaEvents.CONTROLTAP, e);
-        },
         onCompErrorRetry() {
@@ -420,0 +415,0 @@ },

package.json

 {
   "name": "veplayer-mp-douyin",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "MIT",
@@ -5,0 +5,0 @@ "miniprogramType": "tt-npm",

README.md

@@ -29,7 +29,7 @@ # Veplayer小程序播放器
 
-⚠️注意由于抖音开发者工具（截止4.0.7-1版本）npm功能的缺陷，目前引用npm功能，需要手动将`node_modules`的`veplayer-mp-douyin`复制到`components`内，并手动安装依赖`eventemitter3`和`xgplayer-service-miniprogram`。
+⚠️注意由于抖音开发者工具（截止4.0.7-1版本）npm功能的缺陷，目前引用npm功能，需要手动将`node_modules`的`veplayer-mp-douyin`复制到`components`内。
 ```json
 {
   "usingComponents": {
-    "ve-video": "ext://veplayer-mp-douyin/veplayer" // 抖音开发者工具4.0.7及以下的版本需要引用手动拷贝到components的包
+    "ve-video": "ext://veplayer-mp-douyin/veplayer" // 抖音开发者工具4.0.7及以下的版本需要引用手动拷贝到components的包即 "/components/veplayer-mp-douyin/dist/index"
   }
@@ -100,3 +100,3 @@ }
 
-PS. 原生组件支持的属性配置请参考官方文档：https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/media-component/video
+PS. 原生组件支持的属性配置请参考[抖音官方文档](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/media-component/video)，注意`show-play-btn`这类中划线分割的属性名需要改写成驼峰式命名`showPlayBtn`。
 
@@ -194,3 +194,3 @@ ## [组件接口](#VideoExportAPIs)
 2. 业务代码中集成
-
+在页面加载前设置数据采集SDK的构造器，在页面中引用播放器SDK时传入视频信息
 ```javascript
@@ -202,3 +202,3 @@ import { CollectorManager } from 'veplayer-mp-wechat/tool/index'
   appId: 111111,                  // 火山引擎上业务自己的appId
-  userId: '7231102214076007992'   // 用户id，没有可以不传入，埋点sdk自动生成
+  userId: '7231102214076007992'   // 用户id，没有可以不传入，数据采集sdk自动生成
  })
@@ -214,8 +214,8 @@ ```
       vtype: 'MP4',        // [可选]播放类型, 默认为'MP4', 'HLS' || 'DASH' || 'MP4' 
-      codecType: 'H264',   // [可选]视频编码类型,默认H264, 'H265' || 'H264'
+      codecType: 'h264',   // [可选]视频编码类型,默认h264, 'h265' || 'h264'
       sourceType: 'url',   // [可选]播放资源类型,默认'vid', 'vid' || 'url'
       bitrate: 1334556,    // [可选]视频码率, 默认为0
       vid: '1',            // [可选]sourceType为vid的时候编辑视频id
-      tag: 'myTag'         // [可选]播放场景
-      subtag: 'subtag'     // [可选]二级播放场景
+      tag: 'myTag',        // [可选]播放场景
+      subtag: 'subtag',    // [可选]二级播放场景
       logger: true,        // [可选] 是否开启log打印，默认false, 开发环境可设置为true
@@ -230,9 +230,145 @@ }
   <ve-video
-    id='xgVideo'
-    className='xg-video'
-    mode='small'
-    src="{{src}}",
-    logInfo={{logInfo}}
-  ></ve-video>
+    id="xgVideo"
+    className="xg-video"
+    mode="small"
+    src="{{src}}"
+    logInfo="{{logInfo}}"
+  />
 </view>
-```
+```
+
+## uni-app 项目使用
+
+此播放器组件提供的是原生小程序版本，uni-app项目[支持使用小程序自定义组件](https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html)，可以按照以下步骤在uni-app项目中使用此播放器组件：
+
+1. 在uin-app项目中安装依赖：
+```bash
+# npm
+npm i veplayer-mp-douyin
+
+# yarn 
+yarn add veplayer-mp-douyin
+```
+
+2. 拷贝`node_modules/veplayer-mp-douyin`到项目小程序组件存放目录`ttcomponents`。
+
+3. 在 `pages.json` 对应页面的 style -> usingComponents 引入组件：
+可通过uni-app提供的[条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.html#preprocessor)的方式在不同平台上编译使用不同的SDK，微信小程序播放器SDK对应[veplayer-mp-wechat](https://www.npmjs.com/package/veplayer-mp-wechat)
+``` json
+{
+	"pages": [
+		{
+			"path": "pages/index/index",
+			"style": {
+				// #ifdef MP-WEIXIN
+				"usingComponents": {
+					"ve-video": "/wxcomponents/veplayer-mp-wechat/dist/index"
+				},
+				// #endif
+				// #ifdef MP-TOUTIAO
+				"usingComponents": {
+					"ve-video": "/ttcomponents/veplayer-mp-douyin/dist/index"
+				},
+				// #endif
+				"navigationBarTitleText": "uni-app"
+			}
+		}
+	]
+}
+```
+
+4. 在页面中使用：
+
+组件使用
+```vue
+<!-- 页面模板 (index.vue) -->
+<view>
+  <!-- 在页面中对自定义组件进行引用 -->
+  <ve-video
+    id="video"
+    src="https://xx.cdn.com/demo.mp4"
+    controls="custom"
+    @play="onPlay"
+    @timeupdate="onTimeupdate"
+  />
+</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)
+    });
+  }
+```
+vue模板上事件的监听仍然可以使用`@事件名`这种语法糖形式。
+
+如果是从uni-app的video组件迁移到本组件，不作API使用的更改，则组件属性里通过componentId传入`uni.createVideoContext`需要的组件id，API调用同[uni-app组件说明](https://uniapp.dcloud.net.cn/component/video.html)。需要注意的是通过`createVideoContext`获取的播放器上下文无法使用事件订阅。
+
+
+## 集成播放数据采集sdk
+1. 服务器域名配置
+参考抖音小程序[服务器域名配置](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/basic-ability/network)，添加`https://mcs.zijieapi.com`到白名单。
+
+2. 安装播放数据采集sdk
+```bash
+# npm
+npm i veplayer-mp-logger@latest
+
+# yarn
+yarn add veplayer-mp-logger@latest
+```
+
+3. 业务代码中集成
+```javascript
+import { CollectorManager } from 'veplayer-mp-douyin/tool/index'
+import Collector from 'veplayer-mp-logger'
+
+CollectorManager.setCollector(Collector, {
+  appId: 111111,                  // 火山引擎上业务自己的appId
+  userId: '7231102214076007992'   // 用户id，没有可以不传入，数据采集sdk自动生成
+ })
+```
+```javascript
+// index.js
+Page({
+  data: {
+    src: 'https://xxxx.mp4',
+    ...,
+    logInfo: {
+      vtype: 'MP4',        // [可选]播放类型, 默认为'MP4', 'HLS' || 'DASH' || 'MP4' 
+      codecType: 'h264',   // [可选]视频编码类型,默认h264, 'h265' || 'h264'
+      sourceType: 'url',   // [可选]播放资源类型,默认'vid', 'vid' || 'url'
+      bitrate: 1334556,    // [可选]视频码率, 默认为0
+      vid: '1',            // [可选]sourceType为vid的时候编辑视频id
+      tag: 'myTag',        // [可选]播放场景
+      subtag: 'subtag',    // [可选]二级播放场景
+      logger: true,        // [可选] 是否开启log打印，默认false, 开发环境可设置为true
+    }
+  }
+})
+```
+```xml
+<view>
+  <!-- 以下是对一个播放器组件的引用 -->
+  <ve-video
+    id="xgVideo"
+    className="xg-video"
+    mode="small"
+    src="{{src}}"
+    logInfo="{{logInfo}}"
+  />
+</view>
+```

No alert changes

Improved metrics

Total package byte prevSize

107002

increased by7.02%

Number of package files

49

increased by2.08%

Lines of code

1759

increased by2.51%

Number of lines in readme file

369

increased by59.05%

No dependency changes