小程序播放插件

保利威云点播小程序播放插件基于保利威强大的后台能力和视频处理技术并深度融合自身视频云业务，为用户提供简单、快速、安全、稳定的视频播放服务，让用户轻松聚焦于业务发展本身，畅享极速高清播放体验。

只需把视频上传到到保利威云点播平台后得到一个vid即可使用插件播放视频，快速与自有业务集成。

点击进入微信官方页面查看本文档。

微信小程序接入方式

申请使用插件

首先，参见微信官方的插件使用文档申请插件权限，在申请使用插件的使用时，填写以下appid:wx4a350a258a6f7876。

引入插件

详见官方文档，尽量使用最新版本插件。

// 使用插件前，使用者要在 app.json 中声明需要使用的插件
"plugins": {
  "polyv-player": {
    "version": "1.3.1",
    "provider": "wx4a350a258a6f7876"
  }
}

// 使用插件提供的自定义组件。在 json 文件定义需要引入的自定义组件时，使用 plugin:// 协议指明插件的引用名和自定义组件名
"usingComponents": {
  "polyv-player": "plugin://polyv-player/player"
}

使用播放器组件

wxml文件

<polyv-player
  id="{{playerContext}}" // 组件ID
  playerId="{{playerId}}" //播放器ID
  vid="{{vid}}" // 视频ID
  viewerInfo="{{viewerInfo}}" // 观众信息
  autoplay="{{true}}" // 是否自动播放
  bind:statechange="onStateChange" //事件绑定
  >
  <!-- 使用具名插槽，实现在全屏和非全屏的情况，在 video 组件上显示内容 -->
  <view slot="custom">自定义插槽</view>
</polyv-player>

组件元素支持的属性

属性	类型	必填	默认值	说明	最低版本
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 加密视频播放，需要传一个对象，如，changeVid({vid, ts, sign})。详见：播放加密视频 。
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	/	/	退出全屏
addDanmuData	(array)	/	添加多条弹幕数据
sendDanmu	Object	/	添加单条弹幕数据
openDanmu	/	/	开启弹幕
closeDanmu	/	/	关闭弹幕
resize	/	/	根据外部窗口尺寸大小，自适应皮肤进度条尺寸
showWeakNetworkTips	/	/	此接口在插件的视频区域显示弱网提示，可以通过参数修改提示的文案和位置。除非在特定场景下，否则由业务方控制提示的显示和隐藏。详细说明
closeWeakNetworkTips	/	/	关闭弱网提示。详细说明
getQuality	/	/	获取当前的清晰度数据。详细说明

示例代码：

var polyvPlayerContext = this.selectComponent('#myComponentID'); // 通过插件的自定义组件ID获取
polyvPlayerContext.play();  // 播放
polyvPlayerContext.pause(); // 暂停
polyvPlayerContext.stop() //停止
polyvPlayerContext.seek(100);  //跳转到指定位置，单位：秒
polyvPlayerContext.playbackRate(1.5); // 设置播放速率
var PolyvBarrageContext = this.selectComponent('#myComponentID').getPolyvBarrage(); // 获取弹幕实例
PolyvBarrageContext.sendDanmu({
   color: '#ffffff',
   text: this.data.danmuText
}); // 添加单条弹幕数据
PolyvBarrageContext.addDanmuData([{
   color: '#ffffff',
   text: this.data.danmuText
}]); // 添加多条弹幕数据
PolyvBarrageContext.closeDanmu(); // 关闭弹幕
PolyvBarrageContext.openDanmu(); // 开启弹幕

wx.onWindowResize(windowResize); // 监听窗口尺寸变化

var windowResize = function() {
   var polyvSkinContext = this.selectComponent('#polyvPlayer').getPolyvSkin(); // 获取皮肤实例
   polyvSkinContext.resize(); // 自适应进度条尺寸
}

跑马灯参数

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：

<polyv-vod-player
  ex-control-icon-play="plv-custom-control-play" //自定义的class名
  ex-control-icon-pause="plv-custom-control-pause"
  ex-control-timeline="ex-control-timeline"
  ex-control-current="ex-control-current"
  ex-control-duration="ex-control-duration"
  ex-control-icon-setting="ex-control-setting"
  ex-control-setting-panel="ex-control-setting-panel"
  ex-control-icon-fullscreen="ex-control-icon-fullscreen"
  ex-control-icon-audio="ex-control-icon-audio"
  ex-control-icon-back="ex-control-icon-back"
  ex-control-progress-dot="ex-control-progress-dot"
  ex-control-progress-bar="ex-control-progress-bar"
  ex-control-progress-load="ex-control-progress-load"
  ex-control-progress-current="ex-control-progress-current"
  ex-control-skin="ex-control-skin"
  ex-control-setting-btn="ex-control-setting-btn"
  ex-control-setting-btn-select="ex-control-setting-btn-select"
  ex-control-setting-text="ex-control-setting-text"
/>

.plv-custom-control-play {
  background: url('https://{自定义的icon地址}/play.png') !important;
}

.plv-custom-control-pause {
  background: url('https://{自定义的icon地址}/pause.png') !important;
}

.ex-control-timeline {
  color: red;
}

Q&A

• Q1. 视频播放资质问题？

• A1. 使用视频插件播放不要求小程序主体具有文娱/视频资质是因为视频插件具有文娱/视频资质了，如果小程序主体还有用其他方式播放视频，那也需要文娱/视频资质的，详细资质说明请点此查看。

• Q2. 小程序授权的视频播放不了？

• A2. 目前小程序点播插件暂不支持小程序授权方式的视频，建议使用WEB授权。

版本迭代记录

点播小程序插件迭代记录