保利威云点播小程序播放插件基于保利威强大的后台能力和视频处理技术并深度融合自身视频云业务,为用户提供简单、快速、安全、稳定的视频播放服务,让用户轻松聚焦于业务发展本身,畅享极速高清播放体验。
只需把视频上传到到保利威云点播平台后得到一个vid即可使用插件播放视频,快速与自有业务集成。
微信小程序接入方式
申请使用插件
首先,参见微信官方的插件使用文档申请插件权限,在申请使用插件的使用时,填写以下appid:wx4a350a258a6f7876
。
引入插件
详见官方文档,尽量使用最新版本插件。
// 使用插件前,使用者要在 app.json 中声明需要使用的插件
"plugins": {
"polyv-player": {
"version": "0.1.5",
"provider": "wx4a350a258a6f7876"
}
}
// 使用插件提供的自定义组件。在 json 文件定义需要引入的自定义组件时,使用 plugin:// 协议指明插件的引用名和自定义组件名
"usingComponents": {
"polyv-player": "plugin://polyv-player/player"
}
使用播放器组件
wxml文件
<polyv-player
id="{{playerId}}" // 组件ID
playerId="{{playerId}}" //播放器ID
vid="{{vid}}" // 视频ID
viewerInfo="{{viewerInfo}}" // 观众信息
autoplay="{{true}}" // 是否自动播放
bind:statechange="onStateChange" //事件绑定
>
</polyv-player>
组件元素支持的属性:
属性 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
id | String | Y | / | 组件ID,需全局唯一。用于获取播放器实例进而手动控制播放。 |
playerId | String | Y | / | 播放器ID,预留属性。 |
vid | String | Y | / | 视频上传保利威云点播平台后生成的唯一ID |
width | String | N | 100% | 播放器的宽度,支持rpx值和百分比两种方式,如300px或100%。 |
height | String | N | / | 播放器高度,支持rpx值和百分比两种方式。当height值为空时,会采用组件父容器的高度。 |
viewerInfo | Object | N | / | 自定义观众信息。设置后,播放器上报的观看行为日志中会附带观众信息。详见:观众信息设置与统计 |
sign | String | N | / | 播放Web加密视频所需的签名,由业务方服务端生成并返回给播放器。详见:播放加密视频 |
ts | Number | N | / | 播放Web加密视频需传入的13位毫秒级时间戳 |
autoplay | Boolean | N | false | 是否自动播放。 |
muted | Boolean | N | false | 是否静音播放 |
loop | Boolean | N | false | 是否循环播放。 |
startTime | Number | N | / | 播放开始时间,表示视频从第几秒开始播放,参数值需小于视频时长。 |
poster | String | N | / | 视频封面图URL |
direction | Number | N | / | 设置全屏时视频的方向,0 正常竖向,90 屏幕逆时针90度,-90 顺时针90度,不指定则根据宽高比自动判断 |
title | String | N | / | 视频全屏时在顶部显示的标题。为空时不显示。 |
quality | Array | N | {1,2,3} | 视频画质选择列表,1 流畅,2 高清,3 超清 |
defaultQuality | Number | N | / | 默认画质。 注:播放器会记录上次使用的画质,若无记录则取后台设置的值。 |
showQualityBtn | Boolean | N | true | 是否显示画质选择按钮 |
playbackRate | Array | N | {0.5,0.8,1.0,1.25,1.5,2.0} | 倍速选择列表,支持0.5/0.8/1.0/1.25/1.5/2.0倍速 |
showPlaybackRateBtn | Boolean | N | true | 是否显示倍速选择按钮 |
showControls | Boolean | N | true | 是否显示播放控件 |
showSettingBtn | Boolean | N | false | 是否显示半屏时播放控制栏的设置按钮 |
showProgressBar | Boolean | N | true | 是否显示进度条 |
showFullscreenBtn | Boolean | N | true | 是否显示全屏按钮 |
enableAutoRotation | Boolean | N | true | 是否开启手机横屏时自动全屏,当系统设置开启自动旋转时生效 |
isAllowSeek | String | N | yes | 是否允许进度条拖拽:yes 允许,no 不允许,ifViewed 只允许在已播放过的进度范围内拖拽 |
marqueeConfig | Object | N | / | 跑马灯参数设置,详见文档下方跑马灯参数说明。 |
logoConfig | Object | N | 后台播放器logo设置 | 播放器logo设置: enable:是否显示logo width/height:logo宽高,支持像素和百分比两种单位,如 100px 或 10%。logo要保持原图比例,如果width和height与原图片比例不一致,不拉伸图片。以较小的一边为准,另一边等比例转换。当播放器尺寸发生变化时(比如横竖屏切换),logo等比例变化。 src:logo图片的url position:logo位置1 左上,2 右上(默认)3左下 4 右下 xOffset:水平偏移,以播放器左上角所在的点为基准,只支持百分比 yOffset:垂直偏移,以播放器左上角所在的点为基准 logoConfig:{enable:true,width:10%,src:'xxx.png',position:1,opacity:0.7,xOffset:10%,yOffset:2%} 注:只需要指定width参数即可,height按比例显示。 |
videoIntroConfig | Boolean | N | 后台播放器片头设置 | 视频片头设置: enable:是否播放片头 duration:片头显示时长。大于片头视频素材时长则以素材时长为准 src:片头素材url,支持常见的视频和图片格式 show-skip-btn:是否显示跳过片头按钮 videoIntroConfig:{enable:true,duration:15,src:'xxx.mp4',show-skip-btn:false} |
videoOutroConfig | Boolean | N | 后台播放器片尾设置 | 视频片尾设置,使用方式同片头参数一致。 |
enablePlayGesture | Boolean | N | true | 是否开启双击切换播放/暂停手势 |
组件支持的事件
属性 | 说明 |
---|---|
bindstatechange | 播放状态变更事件,包含loading(资源加载中), ready(资源加载完成), playing(播放中,包含广告和视频), ended(广告和视频都播放完成), error,回调函数接受两个参数newstate,oldstate |
另外自定义组件抛出了小程序原生video抛出的所有事件 | |
bindplay | 当开始/继续播放时触发play事件 |
bindpause | 当暂停播放时触发 pause 事件 |
bindended | 当播放到末尾时触发 ended 事件 |
bindtimeupdate | 播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次 |
bindfullscreenchange | 视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction 有效值为 vertical 或 horizontal |
bindwaiting | 视频出现缓冲时触发 |
binderror | 视频播放出错时触发 |
bindprogress | 加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比 |
bindloadedmetadata | 视频元数据加载完成时触发。event.detail = {width, height, duration} |
bindcontrolstoggle | 切换 controls 显示隐藏时触发。event.detail = {show} |
bindenterpictureinpicture | 播放器进入小窗 |
bindleavepictureinpicture | 播放器退出小窗 |
bindseekcomplete | seek 完成时触发 |
插件API
可通过插件获取播放器实例,包含以下方法:
名称 | 参数 | 返回值 | 说明 |
---|---|---|---|
play | / | / | 播放视频 |
pause | / | / | 暂停播放 |
stop | / | / | 停止播放 |
seek | (Number) | / | 跳转到指定位置,参数单位为:秒 |
getDuration | / | Number | 获取视频时长,返回值单位为:秒 |
getCurrentTime | / | Number | 获取视频当前的播放时刻,返回值单位为:秒 |
getVideoPlayDuration | / | Number | 获取当前视频已播放的时长,不包含广告、片头、暂停、片尾等时间 |
getPlayId | / | String | 获取当前播放行为的唯一标识,与后台统计中观看日志的pid字段对应 |
changeVid | (String) | / | 切换视频 |
switchQuality | (Number) | / | 切换画质,参数取值{1,2,3},分别对应流畅、高清、超清 |
playbackRate | (Number) | / | 设置倍速播放,支持 0.5/0.8/1.0/1.25/1.5/2.0速率 |
requestFullScreen | (Object) | / | 进入全屏。若有自定义内容需在全屏时展示,需将内容节点放置到 video 节点内。参数是Object类型,需包含direction 属性,用于设置全屏时视频的方向,0 正常竖向,90 屏幕逆时针90度,-90 顺时针90度,不指定则根据宽高比自动判断direction合法值。 |
exitFullScreen | / | / | 退出全屏 |
示例代码:
var polyvPlayerContext = this.selectComponent('#myComponentID'); // 通过插件的自定义组件ID获取
polyvPlayerContext.play(); // 播放
polyvPlayerContext.pause(); // 暂停
polyvPlayerContext.stop() //停止
polyvPlayerContext.seek(100); //跳转到指定位置,单位:秒
polyvPlayerContext.playbackRate(1.5); // 设置播放速率
跑马灯参数
marqueeConfig参数属性如下:
属性 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
text | String | Y | / | 跑马灯文字内容 |
fontSize | Integer | N | 16 | 跑马灯字号 |
fontColor | String | N | 0x000000 | 跑马灯字体颜色 |
textAlpha | Float | N | 1 | 文字透明度,0~1 |
border | Boolean | N | false | 是否描边 |
borderColor | String | N | 0x000000 | 描边颜色 |
borderAlpha | Float | N | 1 | 描边透明度,0~1 |
borderWidth | Integer | N | 5 | 描边宽度 0~255 |
animationEffect | String | N | roll | 跑马灯动画效果: roll:从右到左滚动 blink :随机位置闪烁 |
displayDuration | Number | N | 5 | 单次跑马灯显示的时长,单位:秒。 动画效果为roll时,表示单次滚动的时长(从开始滚入到完全滚出) 动画效果为blink时,表示从开始显示到完全消失所需的时长 |
错误代码
错误代码 | 说明 |
---|---|
#001 | 套餐过期,请联系客服续期。 |
#002 | 套餐内流量已用完,请联系客服购买流量。 |
#003 | 视频配置文件加载失败。一般是由于网络问题导致无法加载视频配置文件,建议检查/切换网络并重试。 |
#004 | 视频不存在。请检查vid是否正确,视频是否已经被删除。 |
#005 | 视频审核不通过。只有“已发布”状态的视频才可以播放。 |
#007 | 视频文件加载失败。一般是由于网络问题导致无法加载视频文件,建议检查/切换网络并重试。 |
#008 | 视频文件加载超时。一般是由于网络问题导致加载视频文件超时,建议检查/切换网络并重试。 |
#009 | 视频正在审核中。只有“已发布”状态的视频才可以播放。 |
#010 | 视频正在编码中。只有“已发布”状态的视频才可以播放。 |
#012 | 跑马灯加载错误。请检查跑马灯接口返回的参数是否正确,详见:授权播放和跑马灯。 |
#013 | 视频授权播放认证失败。请检查授权认证接口,详见:授权播放和跑马灯。 |
#025 | 基于视频版权保护考虑,播放器会禁止app加密视频小程序上播放。详见:视频加密。 |
Q&A
-
Q. 视频播放资质问题?
-
A. 使用视频插件播放不要求小程序主体具有文娱/视频资质是因为视频插件具有文娱/视频资质了,如果小程序主体还有用其他方式播放视频,那也需要文娱/视频资质的,详细资质说明请点此查看。
版本迭代记录
- V0.1.0
- 保利威云点播小程序播放插件发布
- V0.1.1
- 播放器组件支持宽、高属性设置
- V0.1.2
- 支持Logo设置参数:logoConfig
- 支持跑马灯参数:marqueeConfig
- V0.1.3
- 部分机型下样式出现错位问题修复
- V0.1.4
- 新增播放器参数:
- videoIntroConfig&videoOutroConfig:支持片头片尾设置
- showSettingBtn:是否显示半屏状态下的设置按钮
- isAllowSeek:是否允许拖拽进度条
- 新增播放器参数:
- V0.1.5
- 内部优化