New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
veplayer-mp-douyin
Advanced tools
veplayer-mp-douyin - npm Package Compare versions
Comparing version 0.1.10 to 0.1.11-alpha.0
@@ -7,6 +7,3 @@ "use strict"; | ||
| type: String, | ||
| value: '', | ||
| observer(newVal, oldVal, _changedPath) { | ||
| // console.log('src:', newVal, oldVal); | ||
| } | ||
| value: '' | ||
| }, | ||
@@ -97,2 +94,10 @@ autoplay: { | ||
| definition: Object, | ||
| // TODO 适配custom的controls模式 | ||
| posterSize: { | ||
| type: String, | ||
| value: 'contain' | ||
| }, | ||
| durationLimit: { | ||
| type: Number, | ||
| } | ||
| }, | ||
@@ -99,0 +104,0 @@ data: {}, |
@@ -28,2 +28,3 @@ "use strict"; | ||
| MediaEvents["CONTROLTAP"] = "controltap"; | ||
| MediaEvents["GETVIDEOINFO"] = "getvideoinfo"; | ||
| })(MediaEvents = exports.MediaEvents || (exports.MediaEvents = {})); |
@@ -8,2 +8,3 @@ "use strict"; | ||
| const collectorBehavior_1 = require("./behaviors/collectorBehavior"); | ||
| const industryBehavior_1 = require("./behaviors/industryBehavior"); | ||
| const index_1 = require("./enums/index"); | ||
@@ -14,3 +15,3 @@ const error_1 = require("./utils/error"); | ||
| (0, index_2.XgComponent)({ | ||
| behaviors: [videoBehavior_1.default, douyinBehavior_1.default, collectorBehavior_1.default], | ||
| behaviors: [videoBehavior_1.default, douyinBehavior_1.default, collectorBehavior_1.default, industryBehavior_1.default], | ||
| properties: { | ||
@@ -28,2 +29,8 @@ controls: { | ||
| }, | ||
| // tag的类型，用来继承其他标签 | ||
| // 支持的值 'video', 'video-player' | ||
| tagType: { | ||
| type: String, | ||
| value: 'video' | ||
| }, | ||
| mode: { | ||
@@ -64,2 +71,4 @@ type: String, | ||
| classNames: '', | ||
| // video-player的style，video-player的宽高只能支持具体数值，不支持百分比 | ||
| playerStyle: '', | ||
| error: null, | ||
@@ -86,3 +95,5 @@ firstPlay: false, | ||
| playbackDefinitionList: undefined, | ||
| isFocus: true | ||
| isFocus: true, | ||
| // 可否使用其他type | ||
| canUseOtherType: true, | ||
| }, | ||
@@ -158,6 +169,14 @@ observers: { | ||
| var _a; | ||
| const { componentId, tagType } = this.properties; | ||
| let canUse = true; | ||
| if (tagType !== 'video') { | ||
| canUse = tt.canIUse(tagType); | ||
| if (!canUse) { | ||
| console.warn(`tagType: ${tagType} cannot support in current app version`); | ||
| } | ||
| } | ||
| const self = this; | ||
| const { videoId, videoProps, isFullScreen, loadedMeta, toggleCtrlOverLayer, ended } = this.data; | ||
| // console.log('>>>>Player attached', this.properties.loggerInfo) | ||
| let _videoId = videoId || this.properties.componentId; | ||
| let _videoId = videoId || componentId; | ||
| if (!_videoId) { | ||
@@ -193,3 +212,4 @@ _videoId = (0, index_2.generateUppercaseUid)(); | ||
| this.setData({ | ||
| classNames: classNames.join(' ') | ||
| classNames: classNames.join(' '), | ||
| canUseOtherType: canUse, | ||
| }); | ||
@@ -207,2 +227,3 @@ }, | ||
| this.updateCollector(this.data); | ||
| this.setPlayerStyle(); | ||
| }, | ||
@@ -233,2 +254,5 @@ /** | ||
| methods: { | ||
| canIUse(type) { | ||
| return tt.canIUse(type); | ||
| }, | ||
| getContext() { | ||
@@ -426,4 +450,18 @@ return this.media; | ||
| }, | ||
| updateLoggerParams() { } | ||
| updateLoggerParams() { }, | ||
| setPlayerStyle() { | ||
| if (this.properties.tagType === 'video-player') { | ||
| let that = this; | ||
| let query = tt.createSelectorQuery(); | ||
| query.select('.xg-video-container').boundingClientRect(); | ||
| query.exec(res => { | ||
| const { height = 0, width = 0 } = res[0] || {}; | ||
| const styleStr = `width: ${width}px; height: ${height}px`; | ||
| that.setData({ | ||
| playerStyle: styleStr | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| }); |
@@ -1,1 +0,13 @@ | ||
| {"component":true,"usingComponents":{"xg-error":"plugins/error/error","xg-poster":"plugins/poster/poster","xg-loading":"plugins/loading/loading","xg-play-button":"plugins/xg-play-button/xg-play-button","xg-controls":"plugins/controls/index","xg-progress":"plugins/progress/index"}} | ||
| { | ||
| "component":true, | ||
| "usingComponents": { | ||
| "xg-error":"plugins/error/error", | ||
| "xg-poster":"plugins/poster/poster", | ||
| "xg-loading":"plugins/loading/loading", | ||
| "xg-play-button":"plugins/xg-play-button/xg-play-button", | ||
| "xg-controls":"plugins/controls/index", | ||
| "xg-progress":"plugins/progress/index", | ||
| "bottom-progress":"plugins/bottom-progress/index", | ||
| "video-player":"ext://industry/video-player" | ||
| } | ||
| } |
| { | ||
| "name": "veplayer-mp-douyin", | ||
| "version": "0.1.10", | ||
| "version": "0.1.11-alpha.0", | ||
| "license": "MIT", | ||
@@ -17,3 +17,4 @@ "miniprogramType": "tt-npm", | ||
| "release": "npm version patch && npm run build && npm publish --tag latest --registry=https://registry.npmjs.org", | ||
| "build": "TRANSFORM_TYPE=douyin gulp -f ../../scripts/gulp.file.ts --cwd ../../packages/douyin/" | ||
| "build": "TRANSFORM_TYPE=douyin gulp -f ../../scripts/gulp.file.ts --cwd ../../packages/douyin/", | ||
| "release:alpha": "npm version prerelease --preid=alpha && npm run build && npm publish --tag alpha --registry=https://registry.npmjs.org" | ||
| }, | ||
@@ -20,0 +21,0 @@ "main": "src/index.js", |
132
README.md
@@ -72,27 +72,30 @@ # Veplayer小程序播放器 | ||
| | Property | Type | Default | Required | Description | | ||
| |----------|-------------------------------|---------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | mode | 'portrait' \| 'landscape' | 'landscape' | No | 播放器支持竖屏(portrait)及横屏(landscape)两种播放UI模式。横屏模式偏向于普通的PC视频播放器UI，竖屏视频展示类似抖音等短视频播放模式。 | | ||
| | src | string | | No | | | ||
| | componentId | string | | NO | video组件的id，用于通过`createVideoContext`获取视频VideoContext，不传入则会随机生成一个id，此时视频VideoContext仅能通过组件上下文的`getContext`方法获取 | | ||
| | controls | 'custom' \| 'native'\|'false' | 'custom' | No | custom: 自定义UI，native: 原生组件UI，false: 完全关闭播放UI控件（包括自定义UI及原生组件UI），播放UI控件指loading状态、播控按钮、进度条、时间显示等 | | ||
| | showFullscreenBtn | boolean | | No | 当开始/继续播放时触发play事件 | | ||
| | duration | number | | No | 根据官方文档说明，duration属性只是控制显示的时长，不会控制实际播放的时长。因此该属性不设置给原始video组件，只提供给自定义UI使用 | | ||
| | playDomain | string | | No | 调用火山引擎视频点播OpenAPI的接口地址，业务方如果做了该接口的代理，可以替换成业务方的地址 | | ||
| | playAuthToken | string | | No | 获取视频播放信息(包括播放地址，传入此项时不需要传入src)的临时凭证，由业务方服务端通过调用火山服务端SDK本地生成，具体生成方法参考[火山引擎视频点播文档](https://www.volcengine.com/docs/4/67350#%E6%9C%8D%E5%8A%A1%E7%AB%AF-sdk) | | ||
| | 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} | | ||
| | bindplaybackratechange | eventhandle | | No | 视频倍速改变完成时触发。返回改变后的倍速值。event.detail={playbackRate}。 | | ||
| | bindenterbackground | eventhandle | | No | 进入小窗播放时触发 | | ||
| | bindclosebackground | eventhandle | | No | 关闭小窗播放时触发 | | ||
| | bindleavebackground | eventhandle | | No | 离开小窗进入 app 事件时触发 | | ||
| | 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，竖屏视频展示类似抖音等短视频播放模式。 | | ||
| | src | string | | No | | | ||
| | componentId | string | | NO | video组件的id，用于通过`createVideoContext`获取视频VideoContext，不传入则会随机生成一个id，此时视频VideoContext仅能通过组件上下文的`getContext`方法获取 | | ||
| | controls | 'custom' \| 'native'\|'false' | 'custom' | No | custom: 自定义UI，native: 原生组件UI，false: 完全关闭播放UI控件（包括自定义UI及原生组件UI），播放UI控件指loading状态、播控按钮、进度条、时间显示等 | | ||
| | tagType | string | 'video' | No | video组件渲染使用的标签类型，需要使用短剧行业能力时请指定为'video-player' || tagType | string | 'video' | No | video组件渲染使用的标签类型，需要使用短剧行业能力时请指定为'video-player' | | ||
| | albumId | string | | No | 原片id，仅`tagType`为`video-player`且小程序启用了行业能力时生效 | | ||
| | episodeId | string | | No | 剧集id，仅`tagType`为`video-player`且小程序启用了行业能力时生效 | | ||
| | showFullscreenBtn | boolean | | No | 当开始/继续播放时触发play事件 | | ||
| | duration | number | | No | 根据官方文档说明，duration属性只是控制显示的时长，不会控制实际播放的时长。因此该属性不设置给原始video组件，只提供给自定义UI使用 | | ||
| | playDomain | string | | No | 调用火山引擎视频点播OpenAPI的接口地址，业务方如果做了该接口的代理，可以替换成业务方的地址 | | ||
| | playAuthToken | string | | No | 获取视频播放信息(包括播放地址，传入此项时不需要传入src)的临时凭证，由业务方服务端通过调用火山服务端SDK本地生成，具体生成方法参考[火山引擎视频点播文档](https://www.volcengine.com/docs/4/67350#%E6%9C%8D%E5%8A%A1%E7%AB%AF-sdk) | | ||
| | 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} | | ||
| | bindplaybackratechange | eventhandle | | No | 视频倍速改变完成时触发。返回改变后的倍速值。event.detail={playbackRate}。 | | ||
| | bindenterbackground | eventhandle | | No | 进入小窗播放时触发 | | ||
| | bindclosebackground | eventhandle | | No | 关闭小窗播放时触发 | | ||
| | bindleavebackground | eventhandle | | No | 离开小窗进入 app 事件时触发 | | ||
| | bindseeking | eventhandle | | No | 组件内部代理劫持VideoContext，VideoContext.seek 调用后会立即发送该事件，`该事件非video自带事件，只支持 controls="custom" 时才对外发送` | | ||
| | bindseekcomplete | eventhandle | | No | seek 完成时触发 (position iOS 单位 s, Android 单位 ms) | | ||
@@ -161,19 +164,20 @@ | ||
| | EventName | CustomEvent | Description | | ||
| |----------|------|-------------| | ||
| | play | No | 参见属性 bindplay 描述 | | ||
| | pause | No | 参见属性 bindpause 描述 | | ||
| | ended | No | 参见属性 bindended 描述 | | ||
| | timeupdate | No | 参见属性 bindtimeupdate 描述 | | ||
| | fullscreenchange | No | 参见属性 bindfullscreenchange 描述 | | ||
| | waiting | No | 参见属性 bindwaiting 描述 | | ||
| | error | No | 参见属性 binderror 描述 | | ||
| | progress | No | 参见属性 bindprogress 描述 | | ||
| | loadedmetadata | No | 参见属性 bindloadedmetadata 描述 | | ||
| | playbackratechange | No | 参见属性 bindplaybackratechange 描述 | | ||
| | enterbackground | No | 参见属性 bindenterbackground 描述 | | ||
| | closebackground | No | 参见属性 bindclosebackground 描述 | | ||
| | leavebackground | No | 参见属性 bindleavebackground 描述 | | ||
| | seeking | `Yes` | 参见属性 bindseeking 描述 | | ||
| | seekcomplete | No | 参见属性 bindseekcomplete 描述 | | ||
| | EventName | CustomEvent | Description | | ||
| |--------------------|-------------|-----------------------------------------------------| | ||
| | play | No | 参见属性 bindplay 描述 | | ||
| | pause | No | 参见属性 bindpause 描述 | | ||
| | ended | No | 参见属性 bindended 描述 | | ||
| | timeupdate | No | 参见属性 bindtimeupdate 描述 | | ||
| | fullscreenchange | No | 参见属性 bindfullscreenchange 描述 | | ||
| | waiting | No | 参见属性 bindwaiting 描述 | | ||
| | error | No | 参见属性 binderror 描述 | | ||
| | progress | No | 参见属性 bindprogress 描述 | | ||
| | loadedmetadata | No | 参见属性 bindloadedmetadata 描述 | | ||
| | playbackratechange | No | 参见属性 bindplaybackratechange 描述 | | ||
| | enterbackground | No | 参见属性 bindenterbackground 描述 | | ||
| | closebackground | No | 参见属性 bindclosebackground 描述 | | ||
| | leavebackground | No | 参见属性 bindleavebackground 描述 | | ||
| | seeking | `Yes` | 参见属性 bindseeking 描述 | | ||
| | seekcomplete | No | 参见属性 bindseekcomplete 描述 | | ||
| | getvideoinfo | No | 获取到视频信息,仅`tagType`为`video-player`且小程序启用了行业能力时触发 | | ||
@@ -371,1 +375,45 @@ | ||
| ``` | ||
| ## 短剧行业能力 | ||
| 播放器继承了抖音[短剧行业能力](https://bytedance.feishu.cn/docx/UXxUdWNawoGPgkx06EacdM44ncc?useIframe=1)，使用方法参照以下说明： | ||
| ### 前提条件 | ||
| 按照[官网文档](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/industry-ability/industrySDK/)配置行业 SDK 的权限配置。 | ||
| ### 使用组件 | ||
| 短剧行业能力依赖`video-player`,`video-player` 只在 抖音23.0以上版本支持，播放器组件会自动使用 `tt.canIUse('video-player')` 校验当前抖音能否使用。若监测到不支持时，组件会自动降级为`video`组件进行播放，此时请确保传入了正确有效的视频地址，或者引导用户升级抖音版本。 | ||
| 使用时请指定`tagType`为`video-player`，开发者可传入 `src` 及 `definition`，但需要有相关播放权限 ，也可选择传入 `albumId`和`episodeId`（分别代表原片id和剧集id），由组件通过相关 id 查询平台媒资接口，获取对应视频播放地址。 | ||
| ```xml | ||
| <ve-video | ||
| id="video" | ||
| tagType="video-player" | ||
| albumId="{{aid}}" | ||
| episodeId="{{eid}}" | ||
| src="{{degradeSrc}}" | ||
| autoplay | ||
| bindgetvideoinfo="getVideoInfo" | ||
| ... | ||
| ></ve-video> | ||
| ``` | ||
| ```javascript | ||
| Component({ | ||
| // ... | ||
| data: { | ||
| aid: 'x32432w', | ||
| eid: 'xxsddw', | ||
| // 抖音23.0以下版本不支持短剧行业能力时使用的兜底地址 | ||
| degradeSrc: 'https://xx.demo.com/d.mp4' | ||
| }, | ||
| methods: { | ||
| getVideoInfo(e){ | ||
| // do something | ||
| }, | ||
| playVideo(){ | ||
| // do something | ||
| this.player.play() | ||
| } | ||
| } | ||
| }) | ||
| ``` | ||
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by12.42%
120889
- Number of package files
- increased by10.2%
54
- Lines of code
- increased by9.02%
1921
- Number of lines in readme file
- increased by13.01%
417
No dependency changes