小程序播放插件
保利威云点播小程序播放插件基于保利威强大的后台能力和视频处理技术并深度融合自身视频云业务,为用户提供简单、快速、安全、稳定的视频播放服务,让用户轻松聚焦于业务发展本身,畅享极速高清播放体验。
只需把视频上传到到保利威云点播平台后得到一个vid即可使用插件播放视频,快速与自有业务集成。
微信小程序接入方式
申请使用插件
首先,参见微信官方的插件使用文档申请插件权限,在申请使用插件的使用时,填写以下appid:wx4a350a258a6f7876
。
引入插件
详见官方文档,尽量使用最新版本插件。
使用播放器组件
wxml文件
组件元素支持的属性
属性 | 类型 | 必填 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|---|
id | String | Y | / | 组件ID,需全局唯一。用于获取播放器实例进而手动控制播放。 | 0.1.0 |
playerId | String | Y | / | 播放器ID,预留属性。 | 0.1.0 |
vid | String | Y | / | 视频上传保利威云点播平台后生成的唯一ID | 0.1.0 |
width | String | N | 100% | 播放器的宽度,支持rpx值和百分比两种方式,如300px或100%。 | 0.1.0 |
height | String | N | / | 播放器高度,支持rpx值和百分比两种方式。当height值为空时,会采用组件父容器的高度。 | 0.1.0 |
viewerInfo | Object | N | / | 自定义观众信息。设置后,播放器上报的观看行为日志中会附带观众信息。详见:观众信息设置与统计 | 0.1.0 |
sign | String | N | / | 播放Web加密视频所需的签名,由业务方服务端生成并返回给播放器。详见:播放加密视频 | 0.1.0 |
ts | Number | N | / | 播放Web加密视频需传入的13位毫秒级时间戳 | 0.1.0 |
autoplay | Boolean | N | false | 是否自动播放。 | 0.1.2 |
muted | Boolean | N | false | 是否静音播放 | 0.1.2 |
loop | Boolean | N | false | 是否循环播放。 | 0.1.2 |
startTime | Number | N | / | 播放开始时间,表示视频从第几秒开始播放,参数值需小于视频时长。 | 0.1.2 |
poster | String | N | / | 视频封面图URL | 0.1.2 |
direction | Number | N | / | 设置全屏时视频的方向,0 正常竖向,90 屏幕逆时针90度,-90 顺时针90度,不指定则根据宽高比自动判断 | 0.1.2 |
title | String | N | / | 视频全屏时在顶部显示的标题。为空时不显示。 | 0.1.2 |
quality | Array | N | {1,2,3} | 视频画质选择列表,1 流畅,2 高清,3 超清 | 0.1.2 |
defaultQuality | Number | N | / | 默认画质。 注:播放器会记录上次使用的画质,若无记录则取后台设置的值。 | 0.1.2 |
showQualityBtn | Boolean | N | true | 是否显示画质选择按钮 | 0.1.2 |
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倍速 | 0.1.2 |
showPlaybackRateBtn | Boolean | N | true | 是否显示倍速选择按钮 | 0.1.2 |
showControls | Boolean | N | true | 是否显示播放控件 | 0.1.2 |
showSettingBtn | Boolean | N | false | 是否显示半屏时播放控制栏的设置按钮 | 0.1.2 |
showProgressBar | Boolean | N | true | 是否显示进度条 | 0.1.2 |
showFullscreenBtn | Boolean | N | true | 是否显示全屏按钮 | 0.1.2 |
enableAutoRotation | Boolean | N | true | 是否开启手机横屏时自动全屏,当系统设置开启自动旋转时生效 | 0.1.2 |
isAllowSeek | String | N | yes | 是否允许进度条拖拽:yes 允许,no 不允许,ifViewed 只允许在已播放过的进度范围内拖拽 | 0.1.2 |
marqueeConfig | Object | N | / | 跑马灯参数设置,详见文档下方跑马灯参数说明。 | 0.1.2 |
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按比例显示。 | 0.1.2 |
videoIntroConfig | Boolean | N | 后台播放器片头设置 | 视频片头设置: enable:是否播放片头 duration:片头显示时长。大于片头视频素材时长则以素材时长为准 src:片头素材url,支持常见的视频和图片格式 show-skip-btn:是否显示跳过片头按钮 videoIntroConfig:{enable:true,duration:15,src:'xxx.mp4',show-skip-btn:false} | 0.1.4 |
videoOutroConfig | Boolean | N | 后台播放器片尾设置 | 视频片尾设置,使用方式同片头参数一致。 | 0.1.4 |
enablePlayGesture | Boolean | N | true | 是否开启双击切换播放/暂停手势 | 0.4.0 |
useBackgroundAudio | Boolean | N | false | 是否开启背景音频模式,实现音频后台播放 | 0.4.0 |
videoFit | String | N | contain | 当视频大小与 video 容器大小不一致时,视频的表现形式 包含:contain、填充:fill、覆盖:cover | 0.10.0 |
isControlBarFixed | Boolean | N | false | 是否关闭控制栏自动隐藏 | 0.10.0 |
pictureInPictureMode | string/Array | N | 设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(如: ["push", "pop"]) | 0.13.0 | |
showAudioBtn | Boolean | N | true | 是否显示音频模式切换按钮。注:需要vid带音频文件才显示音频模式切换按钮。 | 0.13.0 |
ban_history_time | Boolean | N | true | 是否禁用续播功能, 默认禁用。注:该配置也会影响远端续播(historyTimeType为remote)。0.14.0及后续版本支持 | 0.14.0 |
history_video_duration | Number | N | 5 | 开启续播功能后,默认时长超过5分钟的视频才支持续播功能,可通过此参数修改,单位:分钟。视频前10秒和最后10秒的播放过程中不会记录续播时间点。 | 0.14.0 |
historyTimeType | String | N | local | 取值:"local" 或 "remote"。续播记录存储的方式,为local时存储在localStorage,为remote时则存储在polyv服务端。注:配置为remote时,后续的记录不会存储在本地,且两个记录都存在时,优先读远端的值。 | 1.0.0 |
vslideGesture | Boolean | N | false | 在非全屏模式下,是否开启亮度与音量调节手势。 | 1.1.0 |
vslideGestureInFullscreen | Boolean | N | true | 在全屏模式下,是否开启亮度与音量调节手势。 | 1.1.0 |
pictureInPictureShowProgress | Boolean | N | false | 是否在小窗模式下显示播放进度。 | |
showThumbnail | Boolean | N | true | 拖拽播放时是否显示预览缩略图。 | 1.1.0 |
组件支持的事件
属性 | 说明 |
---|---|
bindstatechange | 播放状态变更事件,包含loading(资源加载中), playing(播放中,包含广告和视频), ended(广告和视频都播放完成), error,回调函数接受两个参数newstate,oldstate |
另外自定义组件抛出了小程序原生video抛出的所有事件 | |
bindplaying | 当开始/继续播放时触发playing事件 |
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 | 播放器退出小窗 |
bindseekCompleted | seek 完成时触发 |
bindplaybackRateChange | 切换倍速时触发。event.detail = {previousRate,currentRate},previousRate:上个倍速值,currentRate:当前倍数值 |
bindprogressDragStart | 触发于进度条圆点开始拖动。event.detail = { duration, percent, predictionTime },duration:视频总时长,percent:圆点在进度条上的位置百分比,范围[0-100],predictionTime 当前进度的时间(格式:HH:mm:ss) |
bindprogressDragMove | 触发于进度条圆点拖动过程中。event.detail = { duration, percent, predictionTime },duration:视频总时长,percent:圆点在进度条上的位置百分比,范围[0-100],predictionTime 当前进度的时间(格式:HH:mm:ss) |
bindprogressDragEnd | 触发于进度条圆点结束拖动。event.detail = { duration, percent, predictionTime },duration:视频总时长,percent:圆点在进度条上的位置百分比,范围[0-100],predictionTime 当前进度的时间(格式:HH:mm:ss) |
插件API
可通过插件获取播放器实例,包含以下方法:
名称 | 参数 | 返回值 | 说明 |
---|---|---|---|
play | / | / | 播放视频 |
pause | / | / | 暂停播放 |
stop | / | / | 停止播放 |
seek | (Number) | / | 跳转到指定位置,参数单位为:秒 |
getDuration | / | Number | 获取视频时长,返回值单位为:秒 |
getCurrentTime | / | Number | 获取视频当前的播放时刻,返回值单位为:秒 |
getVideoPlayDuration | / | Number | 获取当前视频已播放的时长,不包含广告、片头、暂停、片尾等时间 |
getPlayId | / | String | 获取当前播放行为的唯一标识,与后台统计中观看日志的pid字段对应 |
changeVid | (String/Object) | / | 切换视频。切换到 web 加密视频播放,需要传一个对象,如, |
switchQuality | (Number) | / | 切换画质,参数取值{1,2,3},分别对应流畅、高清、超清 |
playbackRate | (Number) | / | 设置倍速播放,支持 0.5/0.8/1.0/1.25/1.5/2.0速率 |
requestFullScreen | (Object) | / | 进入全屏。若有自定义内容需在全屏时展示,需将内容节点放置到 video 节点内。参数是Object类型,需包含 |
exitFullScreen | / | / | 退出全屏 |
addDanmuData | (array) | / | 添加多条弹幕数据 |
sendDanmu | Object | / | 添加单条弹幕数据 |
openDanmu | / | / | 开启弹幕 |
closeDanmu | / | / | 关闭弹幕 |
resize | / | / | 根据外部窗口尺寸大小,自适应皮肤进度条尺寸 |
showWeakNetworkTips | / | / | 此接口在插件的视频区域显示弱网提示,可以通过参数修改提示的文案和位置。除非在特定场景下,否则由业务方控制提示的显示和隐藏。详细说明 |
closeWeakNetworkTips | / | / | 关闭弱网提示。详细说明 |
getQuality | / | / | 获取当前的清晰度数据。详细说明 |
示例代码:
跑马灯参数
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加密视频小程序上播放。详见:视频加密 。 |
外部样式类
从插件的0.15.0版本起,开始支持外部样式类,用于自定义播放器的控制栏皮肤的样式,关于外部样式类的详细说明和限制可以参考一下微信小程序官方文档。若样式修改无效,建议可以添加!important去提高优先级。
目前可以支持修改的样式:
自定义class | 说明 |
---|---|
ex-control-skin | 控制栏父容器,修改此处样式可影响播放器控制栏的样式 |
ex-control-icon-play | 控制栏的play图标,可通过设置background-image修改icon |
ex-control-icon-pause | 控制栏的pause图标,可通过设置background-image修改icon |
ex-control-icon-setting | 控制栏的设置图标,可通过设置background-image修改icon |
ex-control-icon-audio | 控制栏的音频模式图标,可通过设置background-image修改icon |
ex-control-icon-back | 进入全屏后,控制栏的返回图标,可通过设置background-image修改icon |
ex-control-icon-fullscreen | 控制栏的全屏图标,可通过设置background-image修改icon |
ex-control-timeline | 控制栏的时间控件的容器,修改此处颜色会影响当前播放时间和视频时长的颜色 |
ex-control-current | 控制栏的时间控件下的当前播放器时间 |
ex-control-duration | 控制栏的时间控件下的视频时长 |
ex-control-setting-panel | 点击“设置”按钮后弹出的设置面板,修改此处样式会影响设置面板的整体样式 |
ex-control-progress-dot | 控制栏的进度条的圆点 |
ex-control-progress-bar | 控制栏的进度条 |
ex-control-progress-load | 控制栏的进度条(已加载部分) |
ex-control-progress-current | 控制栏的进度条(当前播放进度) |
ex-control-setting-btn | 设置面板功能每个功能右侧的选项按钮 |
ex-control-setting-btn-select | 设置面板功能每个功能右侧的选项按钮(选择状态) |
ex-control-setting-text | 设置面板功能每个功能左侧的说明文字,例子,倍速。也影响全屏状态时,控制栏底部右侧的说明文字,比如倍速的1x |
示例wxml 和 wxss:
Q&A
Q1. 视频播放资质问题?
A1. 使用视频插件播放不要求小程序主体具有文娱/视频资质是因为视频插件具有文娱/视频资质了,如果小程序主体还有用其他方式播放视频,那也需要文娱/视频资质的,详细资质说明请点此查看。
Q2. 小程序授权的视频播放不了?
A2. 目前小程序点播插件暂不支持小程序授权方式的视频,建议使用WEB授权。
版本迭代记录
Last updated