视频播放小程序插件

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

只需把视频上传到到保利威云点播平台后得到一个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. 使用视频插件播放不要求小程序主体具有文娱/视频资质是因为视频插件具有文娱/视频资质了,如果小程序主体还有用其他方式播放视频,那也需要文娱/视频资质的,详细资质说明请点此查看

版本迭代记录

  1. V0.1.0

    • 保利威云点播小程序播放插件发布
  2. V0.1.1
    • 播放器组件支持宽、高属性设置
  3. V0.1.2
    • 支持Logo设置参数:logoConfig
    • 支持跑马灯参数:marqueeConfig
  4. V0.1.3
    • 部分机型下样式出现错位问题修复
  5. V0.1.4
    • 新增播放器参数:

      1. videoIntroConfig&videoOutroConfig:支持片头片尾设置
      2. showSettingBtn:是否显示半屏状态下的设置按钮
      3. isAllowSeek:是否允许拖拽进度条
  6. V0.1.5
    • 内部优化
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

视频播放小程序SDK

注:点播视频播放的小程序SDK功能相对简单,只提供了获取视频播放地址以及日志发送等基本功能。建议使用点播视频播放的小程序插件,集成更简单,功能更丰富。

开发前准备

1.小程序微信开发者后台设置-开发设置-服务器域名中配置 [request合法域名]
- router.polyv.net
- hls.videocc.net
- prtas.videocc.net
- player.polyv.net

开始开发

1.获取视频播放地址

index.js

import polyv from '../../utils/polyv.js';

Page({
  ...
  onReady: function () {
    //获取视频播放地址
    let vid = "e8888b74d1bd0f19e821d6185279564a_e";
    let vidObj = {
        vid: vid,
        callback: function(videoInfo){
            that.setData({
              videoSrc: videoInfo.src[0]
            });
        }
    };
    polyv.getVideo(vidObj);
  }
}
选项说明

vid

类型:String
说明:视频Id

callback(videoInfo)

类型:Function
说明:获取视频信息成功时触发

参数:videoInfo
参数类型:object
参数说明:

参数 参数说明
src 数组:多个码率视频播放地址,获取成功后取其中一种码率设置为video组件的src
poster 视频封面
title 视频标题
teaser_url 视频片头,以返回链接后缀判断图片/视频类型
duration 视频总时长
timeoutflow 只返回该属性并为true,表示套餐过期
outflow 只返回该属性并为true,表示套餐流量不足

params

类型:object
说明:播放日志自定义参数

参数值可选 说明
param1 用户ID
param2 观众昵称

sid

类型:String
说明:POLYV后台观看日志中自定义ID

ts

类型:String
说明:web授权加密时间戳,使用web授权视频播放时添加

sign

类型:String
说明:web授权加密验证sign,使用web授权视频播放时添加

2.获取视频预览播放地址

onReady: function () {
    //获取视频预览播放地址
    let vid = "e8888b74d1bd0f19e821d6185279564a_e";
    let vidObj = {
        vid: vid,
        callback: function(videoInfo){
            that.setData({
              videoSrc: videoInfo.src[0]
            });
        }
    };
    polyv.getPreviewVideo(vidObj);
  }

3.播放日志发送

//需要绑定video组件bindtimeupdate时间并调用polyv.timeUpdate
<video id="polyvVideo" class="vp-v" src="{{videoSrc}}" bindtimeupdate="timeUpdate"></video>

timeUpdate: function (e) {
  polyv.timeUpdate(e);
}

ps:请留意参数e为必须项

4.销毁播放日志定时器

onUnload: function () {
  polyv.destroy();
}

更新说明

  • 6.7.3微信新版本下,非加密视频播放失败问题已修复兼容 (2018-10-10)

小程序点播SDK下载 (点击下载咨询

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...