观众信息设置与统计

Polyv Web播放器支持设置观众信息参数,设置后在播放器上报的观看日志中会附带观众信息,这样用户就可以通过管理后台的统计页面或服务端API来查看特定观众的视频观看情况了。

一、观众信息设置

播放器设置观众信息参数的代码示例如下:

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
    viewerInfo: {
        viewerId: '1555313336634', // 观众ID
        viewerName: 'polyv', // 观众昵称
        viewerAvatar: 'https://my.domain.com/user/avatar.png', // 观众头像URL
        viewerExtraInfo1:'', // 自定义额外信息字段1
        viewerExtraInfo2:'', // 自定义额外信息字段2
        viewerExtraInfo3:'' // 自定义额外信息字段3
     }
});
</script>

viewerinfo参数字段说明

名称 类型 说明
viewerId String 观众ID
viewerName String 观众昵称
viewerAvatar String 观众头像图片URL
viewerExtraInfo1 String 自定义额外信息字段一,对应观看日志的param3字段
viewerExtraInfo2 String 自定义额外信息字段二,对应观看日志的param4字段
viewerExtraInfo3 String 自定义额外信息字段三,对应观看日志的param5字段

二、查看统计数据

1. 通过管理后台查看

观看日志:

image-20200822232239420高级分析:

audience-detail

视频高级分析功能的详细介绍请点击这里

2. 通过服务端API获取

用户可通过调用获取视频日志接口,根据接口返回的每条观看记录中的viewerId、viewerName等信息,掌握观众观看视频的情况。

img

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

视频播放

本文将对视频播放相关的功能进行说明,包括播放器皮肤、控件按钮以及播放控制等。

初始化播放器

Polyv Web播放器同时支持Flash和HTM5两种播放模式,并可以根据终端和浏览器环境自动选择最优播放模式。默认优先使用HTML5,在不支持HTML5播放的浏览器下(如低版本的IE浏览器)会自动切换到Flash播放。

代码示例:

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
});

player.on('s2j_onPlayerInitOver', () => { //订阅播放器初始化完毕事件
    console.info('播放器初始化完毕');
    player.j2s_seekVideo(60); //视频seek到第60秒
});
</script>
  1. 更多设置功能请查阅:属性和接口说明
  2. 可通过 player.isSupportHTML5 检测当前浏览器是否支持 H5 播放。若当前浏览器(如IE9、IE10)不支持 H5 ,会自动切换为Flash播放器。
  3. 请尽量不要对播放器的样式进行修改或者对video标签进行修改。
  4. 尽量避免在有animation和transform等css3的元素或者子元素下初始化播放器,因为这些元素可能会导致播放器全屏样式错乱,这属于浏览器的一个bug,请谅解。

播放器尺寸设置

播放器的尺寸可通过 width和height两个参数进行设置。参数支持像素和百分比类型的值。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: '80%', // 播放器宽,支持像素值和百分比两种类型,默认值为'100%'
    height: '60%', // 播放器高,支持像素值和百分比两种类型,默认值为'auto'
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
});
</script>

如果不指定参数width的值,播放器宽会使用默认值:100%,即与父容器的宽一致。

如果不指定参数height的值,播放器高会使用默认值:'auto',即根据视频分辨率比例自动适配。

视频切换(连续播放)

当前播放器实例可以使用changeVid接口切换正在播放的视频。当有多个视频,在上一个视频播放完毕时,自动播放下一个视频时也可采用该处理方式。

代码示例:

const option = {
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  //autoplay: true,
  //playsafe: '', //PC端播放加密视频需要传playsafe参数
  //sign: '',// 移动端H5播放加密视频需要传 sign、ts参数
  //ts: '', 
  //watchStartTime: 100, // 从第100秒开始播放
  //skipTeaser: false, //切换视频后是否跳过片头直接播放正片
  //ban_seek: 'off', // 是否禁止拖拽进度,值为'on'时将会禁止拖拽进度。
  //ban_seek_by_limit_time: 'off',  // 是否禁止拖拽进度至视频未播放的位置,为'on'时只可在已播放过的进度范围内拖拽(向前拖拽)。
  viewerInfo: { //切换视频时设置观众信息,非必填
        viewerId: '1555313336634', // 观众ID
        viewerName: 'polyv', // 观众昵称
        viewerAvatar: 'https://my.domain.com/user/avatar.png', // 观众头像URL
        viewerExtraInfo1:'', // 自定义额外信息字段1
        viewerExtraInfo2:'', // 自定义额外信息字段2
        viewerExtraInfo3:'' // 自定义额外信息字段3
     }
};
player.on('s2j_onPlayOver', () => {
    console.info('视频播放完毕');
    player.changeVid(option); // 切换下一个视频
});

清晰度切换

视频上传保利威云点播平台后会转码成多个清晰度的视频文件,详见视频清晰度与码率。可通过参数和接口控制清晰度的选择和切换。

代码示例:

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  showHd: true, // 播放器控制栏是否显示清晰度切换的按钮,默认为 true
  show_rate:2, // 允许选择的最高清晰度,取值:{1,2}。值为1时,只显示流畅,值为2时,可选流畅和高清。不设置时会显示全部清晰度。
  df:1  //视频播放默认采用的清晰度,取值:{0,1,2,3},分别对应自动、流畅、高清、超清。
});
const hd = 3;
player.switchBitrate(hd);// 切换到超清。
</script>

倍速切换

H5播放器默认开启倍速播放功能。可通过参数进行自定义控制。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  //speed:false, //当参数值为boolean类型时,表示是否显示倍速切换的按钮。
  speed: [0.5, 1, 1.25, 1.5, 2] //当参数值为数组时,表示倍速切换的可选速率。最多可设置6个速率,取值范围:(0,3]。PC端默认值为:[2, 1.5, 1.2, 0.5],移动端默认值为:[1, 1.5, 2]。
});
</script>

线路切换

保利威视频云拥有多条CDN加速线路,当某一条线路出现问题时,可切换至另一线路。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    showLine: 'on' // 是否显示线路切换按钮
});
</script>

注:线路切换暂时只支持在移动端H5播放器上使用。

视频预览

在一些场景下,希望只允许观众观看视频的一部分,付费或者注册后才允许观看完整视频。该场景可通过传入预览vid或者设置参数使用预览模式来实现。预览vid可通过管理后台的预览代码或获取视频信息的API来获取,预览时长可在点播管理后台进行设置。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',  
    preview:true // 是否使用预览模式,到达预览时长后会停止播放
});
</script>

当传入预览vid时,不需要设置preview参数。当preview = true时,传入真实vid即可。

自定义视频播放的开始/结束时间

播放器支持通过参数来指定视频开始/结束播放的时间点。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    //watchStartTime:10, //播放开始时间,表示视频从第几秒开始播放,参数值需小于视频时长。
    //watchEndTime:60 //播放结束时间,表示视频播放到第几秒结束,设置该值后,只能在开始时间至结束时间范围内进行进度条的拖拽。
    start:10, //截取视频的一部分作为一个独立的视频,如原视频时长60秒,设定start=20后,则视频显示为40秒,并且从原视频的第20秒开始播放。
    end:50,//截取视频的一部分作为一个独立的视频,如原视频时长60秒,设定start=20,end=50后,则视频显示为30秒,并且从原视频的第20秒开始播放,到原视频的50秒结束播放。
});
</script>

续播

播放器默认会记录视频上次观看到的时间点,在同一浏览器中再次打开播放页面,可从上次观看的时间点继续播放。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  history_video_duration: 3, //默认时长超过5分钟的视频才会开启续播功能,可通过此参数修改,单位:分钟。
  ban_history_time: 'off' //当值为’on‘时会禁用续播功能。
});
</script>

播放器只会在视频播放10秒后至视频结束10秒前的时间段内正常记录续播点。播放不足10秒不续播,播放到了最后10秒但未播完,续播点在结束前10秒,播完后不续播。

自定义播放器外观和控件

播放器的皮肤外观以及控件按钮可通过管理后台的播放器设置或者参数进行自定义设置。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#video',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  skinLocation:1, // 播放器控制栏显示位置:0 不显示,1 视频区域内,2 视频区域外。仅在PC端生效。
  hideSwitchPlayer:true, // 是否隐藏H5和Flash播放器的切换按钮。
  lang:en, // 播放器语言,可选 zh_CN (中文)、 en (英文)
  ban_skin_progress:true, // 是否隐藏视频播放进度条
  showHd: false, // 是否显示清晰度切换的按钮,默认为 true
  speed: false, // 是否显示倍速切换的按钮
  allowFullscreen: false, // 是否允许全屏播放。为false时会隐藏全屏按钮(全屏的API依然可用)。
  screenshot:true, // 是否显示视频截图按钮。仅在PC端生效。
  hideRepeat: true, // 是否隐藏播放结束后的重播按钮。
  fullscreenProxy:true, // 全屏代理,设置后点击全屏按钮或者双击播放器不会调用全屏api,会触发 window.onFullscreenProxy(vid, toFullscreen) 事件,调用者自行做全屏处理,适合在全屏状态下叠加用户自定义的元素。
  full_page_screen:true, // 是否显示网页全屏按钮。需绑定onFullPageScreen事件做对应的处理。
  pictureInPicture:true, // 是否在控制栏显示画中画按钮。仅在PC H5播放器生效,仅在播放非加密视频时生效。
});

player.toggleFullscreen(); // 全屏/退出全屏 切换
player.on('s2j_onFullScreen', () => {
    console.info('播放器进入全屏');
});
player.on('s2j_onNormalScreen', () => {
    console.info('播放器退出全屏');
});
window.onFullscreenProxy = function (vid, toFullscreen) {
  console.log('全屏事件触发:',toFullscreen);
  // 这里添加自定义全屏处理逻辑
}
window.onFullPageScreen = function(v, currentStatus) {
    console.log('页面全屏事件触发:',currentStatus);
    // 这里添加与移除页面全屏相关样式,需调用者添加
    player.toggleFullPageScreen();// 更新播放器页面全屏按钮状态
}
</script>

禁止拖拽进度

在部分教育和培训场景下,希望能够强制学员看完视频,不允许拖拽进度。可通过播放器参数进行控制:

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    ban_skin_progress: true, // 是否隐藏播放器控制栏的进度条
    ban_seek:'on',//是否禁止拖拽进度条
    ban_seek_by_limit_time:'on', //是否禁止拖拽进度至视频未播放到的位置,为on时只可在已播放过的进度范围内拖拽(向前拖拽)
});
</script>

Android系统下各厂商浏览器表现不一致,ban_seek参数可能不生效。

自定义视频封面图

上传至云点播平台的视频会在编码时进行截图,默认会采用第一张截图作为视频封面图。用户可以在点播管理后台重新选择或上传封面图,也可以通过播放器参数进行自定义设置。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    loading_bg_img: 'https://img.videocc.net/uimage/8/88083abbf5/first_image/2bb92156-e3ac-4781-bdba-483c3213ccd2_b.png', // 封面图URL
    cover_display:'scaleAspectFit', //封面图显示方式
    cover_opacity:70 //封面图蒙层不透明度,取值范围:[0,100]。
});
</script>
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

属性和接口说明

播放器属性

名称 类型 默认值 说明
wrap String / HTMLElement / 载入播放器的 DOM 元素,支持传入元素或元素选择器 (仅在第一个元素载入)。
vid String / 云点播平台的视频唯一id。
width Number / String 100% 播放器的宽度,支持像素值和百分比两种方式,如200或100%。
height Number / String / 播放器的高度,支持像素值、百分比和自适应三种方式,如100、40%。当值为auto或者为空时,会根据视频比例自动计算高度。
autoplay Boolean / 是否自动播放。
注:目前大多数浏览器都会限制自动播放,该参数可能无效。
loop Boolean false 是否开启循环播放。
forceH5 Boolean / 使用多终端代码时,是否默认使用H5播放器。
注:浏览器不支持H5的情况下还是会使用Flash。
flash Boolean false 是否默认使用Flash播放器。
hideSwitchPlayer Boolean false 是否隐藏H5和Flash播放器的切换按钮。
playsafe String/Function / PC端播放加密视频所需的授权凭证。如何使用详见:播放加密视频
playsafeUrl String / 获取PC端播放加密视频凭证的接口URL。与playsafe参数二选一。
sign String / 移动端播放加密视频所需的签名。如何使用详见:播放加密视频
ts Number / 移动播放加密视频需传入的时间戳。
viewerInfo Object / 自定义观众信息。设置后,播放器上报的观看行为日志中会附带观众信息。详见:观众信息设置与统计
video_align String / 播放器内视频画面的对齐方式,默认是居中显示,但可通过该参数来控制。取值:{top,bottom,left,right},分别对应顶部对齐,底部对齐,左对齐和右对齐。
loading_bg_img String / 视频首图的URL。
cover_display String scaleToFill 封面图的显示方式:scaleToFill 铺满,scaleAspectFit 等比自适应,scaleAspectFill 等比铺满。
cover_opacity Number 70 封面图蒙层不透明度,取值范围:[0,100]。
showHd Boolean true 是否显示清晰度选择按钮。
show_rate Number / 允许选择的最高清晰度,取值:{1,2}。值为1时,只显示流畅,值为2时,可选流畅和高清。
showAuto Boolean true 是否显示清晰度选择中的”自动“选项。
df Number - 视频播放默认的清晰度,取值:{0,1,2,3},分别对应自动、流畅、高清、超清。
speed Boolean/Array true 当speed参数值为boolean类型时,代表是否显示倍速切换的按钮。当参数值为数组时,则代表倍速切换的可选速率。最多可设置6个速率,取值范围:(0,3]。PC端默认值为:[2, 1.5, 1.2, 0.5],移动端默认值为:[1, 1.5, 2]。
showLine String on 是否显示线路选择按钮,取值:{on,off}。
注:仅在移动端生效。
volume Number 0.75 默认音量大小,取值范围:(0,1),播放器会记录上一次播放的音量。
allowFullscreen Boolean true 是否允许全屏播放。为false时会隐藏全屏按钮(全屏的API依然可用)。
注:仅在PC端生效。
fullscreenProxy Boolean false 是否使用全屏代理,为true时点击全屏不会调用全屏的API,会触发window.onFullscreenProxy(vid, toFullscreen)事件,由开发者自行做全屏处理,适合在全屏状态下叠加用户自定义的元素的场景。
full_page_screen Boolean false 是否显示网页全屏按钮。需配置window.onFullPageScreen 事件回调做相应页面全屏处理。
pictureInPicture Boolean false 是否在控制栏显示画中画按钮。
注:仅在PC H5播放器生效,仅在播放非加密视频时生效。
screenshot Boolean false 是否显示视频截图按钮。
注:仅在PC端生效。
skinLocation Number 1 播放器控制栏显示位置:0 不显示,1 视频区域内,2 视频区域外。
注:仅在PC端生效。
hideRepeat Boolean false 是否隐藏播放结束后的重播按钮。
ban_ui String off 是否隐藏播放器皮肤控制栏,取值:{on,off}。
ban_seek String off 是否禁止拖拽进度条,取值:{on,off}。
注:Android系统下各厂商浏览器表现不一致,该参数可能不生效。
ban_seek_by_limit_time String off 是否禁止拖拽进度至视频未播放到的位置,取值:{on,off}。为on时只可在已播放过的进度范围内拖拽(向前拖拽)。
ban_preview_video String off 是否禁止鼠标在进度条悬浮时显示预览画面的缩略图,取值{on,off},为on时鼠标在悬浮进度条时不显示预览缩略图
keyboardSeekTime Number 15000 键盘每按一次方向键,视频前进/后退的时间。单位:毫秒。
watchStartTime Number / 播放开始时间,表示视频从第几秒开始播放,参数值需小于视频时长。
watchEndTime Number / 播放结束时间,表示视频播放到第几秒结束,设置该值后,只能在开始时间至结束时间范围内进行进度条的拖拽。
参数值需大于watchStartTime且小于视频时长,如果参数值小于watchStartTime,则watchStartTime失效。
start Number / 截取视频的一部分作为一个独立的视频,如原视频时长60秒,设定start=20后,则视频显示为40秒,并且从原视频的第20秒开始播放。
通常配合end参数一起使用(子视频功能)。
end Number / 截取视频的一部分作为一个独立的视频,如原视频时长60秒,设定start=20,end=50后,则视频显示为30秒,并且从原视频的第20秒开始播放,到原视频的50秒结束播放。
preview Boolean false 是否使用预览模式,到达预览时长后会停止播放,预览时长可在管理后台配置。
history_video_duration Number 5 默认时长超过5分钟的视频会开启续播功能,可通过此参数修改,单位:分钟。视频前10秒和最后10秒的播放过程中不会记录续播时间点。
ban_history_time String off 是否禁用续播功能,取值:{on,off}。
preloadDataSize Number 15000 预加载的数据量,会根据实际视频时长和清晰度加载切片数量,取值范围:[500,60000],单位:KB。
注:仅在PC端对HLS视频(加密视频)有效。
preloadDurationLength Number / 视频预加载最大时长,单位:秒。
url String / 第三方的视频资源地址,不可与vid同时设置。
logo Object / 播放器Logo配置参数,详见:播放器Logo
teaser_show Number / 是否播放片头:0 不播放,1 播放。片头可在管理后台进行设置。
teaser_time Number / 片头显示时长。
teaser_url String / 片头URL,视频只支持mp4格式。
teaserSkip Boolean false 是否显示跳过片头的按钮。
注:由于视频层级问题,该参数在部分移动端浏览器下可能不生效。
tail_show Number / 是否播放片尾:0 不播放,1 播放。片尾可在管理后台进行设置。
tail_time Number / 片尾显示时长。
tail_url String / 片尾URL,视频只支持mp4格式。
tailSkip Boolean / 是否显示跳过片尾的按钮。
ban_ad Boolean false 是否禁止播放广告。
ban_ad_time Boolean false 是否隐藏广告倒计时。
adMatter Array / 广告配置参数,详见:广告设置
adSkip Boolean false 是否显示跳过广告的按钮。
rightMenu Array / 播放器右键菜单配置,例如:rightMenu: [{rightName: '右键菜单显示名称', rightUrl: '菜单点击跳转URL', callback: function(){console.log('hi')}},{rightName: '右键菜单二',rightUrl: '', callback: function(){console.log('hello')}}]
lang String zh_CN 播放器语言,支持中英文,取值:{zh_CN,en}。
priorityMode String video 默认使用视频模式还是音频模式,取值:{video,audio}。
注:只有额外转音频的视频才可以切换音视频模式。
videoMode Boolean true 参数值为false时,会启用音频模式。
注:仅在PC端生效,没有额外转音频的也会启用音频模式。
audioMode Boolean false 是否启用音频模式
hideAudioMode Boolean false 是否隐藏音视频切换按钮。
is_interaction String on 是否在视频播放时弹出管理后台设置的问答题目。取值:{on,off}。详见:问答弹题功能
ban_record_interaction_right_answer String off 是否禁止播放器缓存问答提交记录,取值:{on,off}。设置为”on“时每次播放视频都需重新答题。
title_of_right_answer_explain String / 问答题目回答正确时的提示文案。
title_of_wrong_answer_explain String / 问答题目回答错误时的提示文案。
pptEnable Boolean false 是否启用课件三分屏播放模式。详见:课件三分屏播放
mainScreen String ppt 课件三分屏播放时的主屏,取值:{ppt,video}
subWidth Number 355 课件三分屏播放时副屏的默认宽度
subHeight Number 200 课件三分屏播放时副屏的默认高度
pptVisible Boolean true 课件三分屏初始化时是否需要显示ppt
srt_caption_txt_size Number 20 字幕字号,取值范围:[20,40],单位:px。
srt_caption_txt_height Number 20 字幕距离播放器底部的高度,单位:px。
srt_caption_base_width Number 1280 字幕字号会随播放器尺寸变化。该值为播放器的基准宽度。
srt_caption_base_height Number 720 字幕字号会随播放器尺寸变化。该值为播放器的基准高度。
code String / 跑马灯自定义的code值,详见:授权播放和视频跑马灯
marqueeCheck Boolean / 为true时会检测跑马灯是否被篡改,并报016错误。
useH5Page Boolean true 当参数值为true时代表启用同层播放。详见:H5同层播放
ignoreIE Boolean false 是否在IE浏览器(包括360、QQ等浏览器的兼容模式)中禁用HTML5播放器。
player_id String / 播放器ID,设置后会使用对应播放器的设置。
注:该功能需额外开通才能生效。

播放器接口

API需要在播放器初始化完成之后调用,比如:

player.on('s2j_onPlayerInitOver',function(e) {
    player.j2s_seekVideo(100);
 });  

接口列表

名称 参数及类型 返回值及类型 说明
j2s_pauseVideo / / 暂停播放。
j2s_resumeVideo / / 恢复播放当前视频。
j2s_stopVideo / / 停止播放当前视频,并显示结束画面。
j2s_seekVideo (Number) / 跳转到某个时刻播放,参数单位为:秒。
j2s_getDuration / Number 获取视频总时长,返回值单位为:秒。
j2s_getCurrentTime / Number 获取视频当前的播放时刻,返回值单位为:秒。
j2s_realPlayVideoTime / Number 获取当前视频已播放的时长,不包含广告、片头、暂停、片尾等时间。
j2s_getFlowCount / Number 获取当前视频播放消耗的流量,单位:字节。仅Flash播放器支持。
j2s_setVolume (Number) / 设置视频播放音量,取值范围(0,1)。
j2s_realPlayStatus / Object 获取实时播放状态,返回的json格式字符串包含以下字段:
pid 每次播放行为生成的唯一ID,后台的观看日志也包含该字段
vid 视频ID
playduration 当前播放时长
timestamp 当前时间戳
sign 签名,计算方式请咨询技术支持。
changeVid (Object) / 切换到下一个视频,详见:视频切换
switchBitrate (Number) / 切换清晰度,参数取值{0,1,2,3},分别对应自动、流畅、高清、超清。
toggleFullscreen / / 全屏/退出全屏 切换
toggleFullPageScreen / / 切换网页全屏按钮状态
changeRepeat (Boolean) / 当参数值为true时,视频结束播放后隐藏重播按钮。
switchMain (String) / 课件三分屏播放时,切换PPT或视频至主屏。取值:{ppt,player}。
setMode (String) / 切换音视频模式,取值:{video,audio}。
注:只有额外转音频的视频才可以切换音视频模式。
getCurrentMode / String 返回当前播放模式,video 视频模式,audio 音频模式。
toFlash / / 切换至Flash播放器,只有PC端H5播放器才可调用该方法。
toHTML5 / / 切换至H5播放器,只有Flash播放器才可调用该方法。
on (String,Funciton) / 绑定监听事件
destroy / / 销毁播放器实例
getScreenshotData(); / Base64的图片数据 获取当前视频画面的截图数据,仅支持PC H5播放器调用,需设置播放器参数allowGetScreenshotData为true

播放器事件

名称 说明
s2j_onPlayerInitOver 播放器初始化完毕时触发。播放器提供的方法需要在此事件发生后才可以调用。参数返回vid
s2j_onReadyPlay 在已加载足够的数据能够开始播放视频时触发,参数返回vid
注:移动端不触发此事件。
s2j_onPlayStart 视频初次播放时触发,参数返回vid。
s2j_onVideoPlay 视频初次播放或由暂停恢复播放时触发,参数返回vid。
s2j_onVideoPause 视频暂停时触发,参数返回vid。
s2j_onVideoSeek 视频拖拽进度时触发,参数返回开始、结束seek的时间点以及vid。
s2j_onPlayOver 当前视频播放完毕时触发,参数返回vid。
s2j_volumeChange 播放音频发生变化时触发,参数返回vid、变化后的音量。
s2j_onFullScreen 播放器进入全屏时触发,参数返回vid。
s2j_onNormalScreen 播放器退出全屏时触发,参数返回vid。
s2j_onPlayerError 播放出现错误时触发,参数返回vid。
HTML5Load Flash切换至H5播放器时触发。
flashLoad PC端H5播放器切换至Flash播放器时触发。
serverError 发生业务逻辑错误时触发,比如授权验证失败、域名黑白名单验证不通过等错误。参数返回事件名称和错误代码。
onChangeMode 音视频模式切换时触发,参数返回vid,切换后模式以及切换前模式。
onFullscreenProxy 当设置fullscreenProxy参数为true时,点击全屏按钮不会调用全屏api,会触发 window.onFullscreenProxy(vid, toFullscreen) 事件,调用者自行做全屏处理,适合在全屏状态下叠加用户自定义的元素。
onFullPageScreen 当设置full_page_screen为true时,点击网页全屏按钮会触发window.onFullPageScreen(vid, currentStatus) 事件,调用者自行做网页全屏处理。

注:由于一些历史原因,Web三端播放器(Flash、PC H5和移动端H5)的事件返回参数尚未对齐,上表中以PC H5播放器为准。

通过播放器实例的on方法订阅:

player.on('s2j_onPlayerInitOver', (...params) => {
    console.log('播放器数据初始化完毕:',params);
});

通过播放器实例的off方法取消订阅:

player.off('s2j_onPlayerInitOver', () => {
    console.log('取消订阅');
});

错误代码 

错误代码 说明
#001 套餐过期,请联系客服续期。
#002 套餐内流量已用完,请联系客服购买流量。
#003 视频配置文件加载失败。一般是由于网络问题导致无法加载视频配置文件,建议检查/切换网络并重试。
#004 视频不存在。请检查vid是否正确,视频是否已经被删除。
#005 视频审核不通过。只有“已发布”状态的视频才可以播放。
#006 域名黑白名单验证不通过。请检查管理后台的播放域名设置。
#007 视频文件加载失败。一般是由于网络问题导致无法加载视频文件,建议检查/切换网络并重试。
#008 视频文件加载超时。一般是由于网络问题导致加载视频文件超时,建议检查/切换网络并重试。
#009 视频正在审核中。只有“已发布”状态的视频才可以播放。
#010 视频正在编码中。只有“已发布”状态的视频才可以播放。
#011 播放器皮肤加载失败。建议检查/切换网络并重试。
#012 跑马灯加载错误。请检查跑马灯接口返回的参数是否正确,详见:授权播放和视频跑马灯
#013 视频授权播放认证失败。请检查授权认证接口,详见:授权播放和视频跑马灯
#014 Flash播放器没有JavaScript运行权限。请尝试升级浏览器至最新版本或更换浏览器。
#015 JavaScript运行错误。请尝试升级浏览器至最新版本或更换浏览器。
#016 跑马灯被篡改。
#020 playsafeUrl接口请求失败。请检查playsafeUrl参数的接口服务是否正常,详见:播放加密视频
#024 基于视频版权保护考虑,播放器会禁止加密视频在某些自带录屏功能的浏览器上播放。请更换其它浏览器。
#10000 视频被禁止播放,请联系管理员
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

概览

产品介绍

播放器SDK是保利威视频云服务的重要组成部分,基于保利威强大的后台能力和视频处理技术,为用户提供简单、快速、安全、稳定的视频播放服务。播放器SDK还深度融合了保利威视频云业务,如加密播放、防录屏、画质和线路切换、嵌入广告、三分屏教学、试看、数据统计等功能,覆盖多种应用场景,让用户轻松聚焦于业务发展本身,畅享极速高清播放体验。

本文档是介绍保利威云点播服务的Web播放器,通过提供简单、便捷的嵌入方式和灵活的接口,帮助开发者快速与自有Web应用集成,实现视频播放功能。

image-20200527144014829

核心优势

  • 简单、易集成:通过统一的嵌入代码,只需视频ID即可播放视频,快速与自有业务集成。
  • 丰富的功能:除了基础播放功能,播放器集成了常用的视频相关业务功能,可极大减少用户自身的开发量。
  • 业内领先的视频版权保护体系:从视频加密、防盗播、防翻录等多个层级对视频进行全方位安全防护,详见:PlaySafe视频版权保护体系
  • 云端一体化:云端加密、播放端解密,保证视频安全。播放端采集数据、云端分析,为业务运营提供支持。
  • 全终端适配:PC H5、Flash、移动H5三端播放器智能切换,适配几乎所有的终端设备和浏览器。

功能清单

功能点 功能说明
格式和编码 支持MP4、HLS(M3U8)、FLV、保利威自有知识产权的加密视频格式和MP3音频格式,支持H264视频编码和AAC音频编码。
播放器皮肤 Web播放器包含多套完整皮肤UI,可在点播管理后台-->播放器-->皮肤设置中进行选择和自定义设置。
封面图 支持设置视频播放前的封面图。
URL播放 除了支持点播提供的vid方式播放,还支持本地视频和网络视频的URL方式播放。支持播放的文件格式取决于当前浏览器。
播放控制 支持预加载、自动播放、播放/暂停、进度拖拽、全屏播放、循环播放和切换视频等播放控制功能。
音量调节 支持实时调节系统音量。
清晰度切换 支持视频转码后的多路清晰度流切换,播放器内置自动重试机制,某个清晰度视频播放失败时会尝试切换其它清晰度。
多线路切换 支持多条CDN线路的切换,播放器内置自动重试机制,某个CDN线路播放失败时会尝试切换其它线路。
倍速播放 支持0~3倍的视频播放速度切换。
音视频切换 如果账号开通了额外转码音频文件的功能,则支持视频/音频模式的相互切换。
续播 从上一次播放结束的时间点继续播放。
播放器Logo 支持设置自定义的播放器Logo进行品牌曝光。
片头、片尾播放 支持设置图片或视频类型的片头和片尾。
嵌入广告 支持嵌入片头、片尾、暂停和弹窗类型的广告。
图文推广 支持嵌入图文推广链接。
视频试看 支持以视频试看,播放到设置的预览时长后会停止播放。
子视频播放 截取视频的一部分片段进行播放(不会生成新视频)。
观看密码 支持输入正确的密码才可观看视频。
播放域名校验 支持播放域名黑白名单设置。
授权播放 支持播放器请求自定义的授权接口,只有授权通过才可以播放视频。
跑马灯 支持设定的文字内容在视频上不规则显示,以达到防盗录、信息提示等目的。
播放加密视频 支持经过点播转码、切片加密后的加密视频播放。
浏览器防录屏 监测到浏览器自身或第三方浏览器插件开始录屏后,自动停止播放。
视频打点 支持对视频添加打点信息并在播放器进度条显示相应标记,方便观众快速定位重要内容。
双语字幕 支持上传字幕文件的自定义样式显示,支持显示双语字幕。
弹幕 支持发送、显示弹幕信息。
问答弹题 支持播放过程中弹出问答题目。
课件三分屏 支持视频、课件(PPT、PDF格式)、课件大纲三分屏显示。
观众信息收集 支持设置信息登记表单,观众登记后才可继续观看视频。
右键菜单自定义 支持自定义播放器右键菜单选项,支持链接和函数两种类型。
视频截图 支持截取播放画面的任意一帧。
画中画 支持视频”跳出“浏览器,悬浮在屏幕上方播放。
一键分享 支持一键分享至微信、微博等社交平台。
国际化 支持中/英文。
VR视频播放 支持播放VR视频。
统计 支持观看行为数据上报,可在管理后台查看数据统计。
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

集成文档

保利威云点播Web播放器同时支持Flash和HTM5两种播放模式,并可以根据终端和浏览器环境自动选择最优播放模式,实现了视频播放效果的多平台统一体验。支持FLV、MP4、HLS等主流视频格式和协议,并结合保利威云点播服务,提供加密视频播放等功能。

适配情况

保利威云点播的转码服务,在默认情况下会把上传的视频转码出以下几种格式:

  • 非加密视频:MP4(H5播放)、FLV(Flash播放)
  • 加密视频:HLS(H5播放)、PTS(Flash播放)

视频格式与平台支持情况如下:

浏览器/播放器 Flash播放器(已停止更新) H5播放器
Chrome
Firefox
Edge
IE IE8+ IE11+ for Windows 8.1+
Safari
iOS Safari ×
iOS 微信、QQ ×
Android 微信、QQ ×
Android 其它 ×
  1. PC端IE11( Windows 8.1+)及以上浏览器支持HTML5播放,低版本IE将切换至FLASH播放器;移动端不支持Flash播放器。
  2. 视频编码格式仅支持H.264编码。
  3. 如果对视频设置了不转码的话,播放器会直接播放视频源文件,能否正常播放取决于观众浏览器支持的视频格式。

已知的H5适配问题

  1. 设置自动播放无效,不会自动播放

    • 移动端浏览器中音频自动播放一直是禁止的,目前通用的办法是通过用户手动触发播放(例如监听用户的点击事件并调用play方法),但不排除一些特性的浏览器和webview允许自动播放。
    • 桌面端Chrome 55+、 Safari 11+版本的浏览器也都限制自动播放。
  2. 移动端H5播放器自带的皮肤在部分情况下无法显示,导致无法使用播放器提供的部分控制功能(如画质/倍速切换等)。
    • iOS设备在全屏播放视频时,会强制使用系统的播放器,此时无法显示自带的播放器皮肤。
    • 由于Android系统有众多不同的定制版本,每个版本对H5 video标签的实现都有差别,而且大多数的国内浏览器厂商,都会在视频播放时挟持video标签,由浏览器内置播放器播放视频,所以在Android上播放视频的一致性相比iOS要差很多。在无法显示自带播放器皮肤情况下,可以通过播放器提供的API接口来进行播放控制。
  3. 音量调节功能在iOS和Android浏览器上无效。
  4. 倍速播放功能,部分移动端浏览器不支持设置倍速,功能会失效,比如android微信。

快速集成代码

不依赖于任何的前端js库,只需要在页面中引用如下js文件,就可以进行播放器的初始化。

js

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
  var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8' ,
  });
</script>

默认使用H5播放器,在ie及其他不支持的浏览器下自动切换flash

需要兼容ie9以下的播放器,可以使用下面代码(不再推荐,原因详见:关于Flash Player即将停止服务的通知

<script src='//player.polyv.net/script/polyvplayer.min.js'></script>
<div id='player'></div>
<script>
var player = polyvObject('#player').videoPlayer({
    'width':'600',
    'height':'450',
    'vid' : '88083abbf5bcf1356e05d39666be527a_8' ,
});
</script>

vue

<template>
  <div id="player"></div>
</template>
<script>
export default {
  data() {
    return {
      vodPlayerJs: 'https://player.polyv.net/script/player.js',
      vid:'88083abbf5bcf1356e05d39666be527a_8',
    };
  },

  mounted(){
      this.loadPlayerScript(this.loadPlayer);
  },

  methods: {
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement('script');
        myScript.setAttribute('src', this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },

    loadPlayer() {
      const polyvPlayer = window.polyvPlayer;
      this.player = polyvPlayer({
        wrap: '#player',
        width: 800,
        height: 533,
        vid: this.vid ,
      });
    }
  },
  destroyed() {
    if (this.player) {
        this.player.destroy();
    }
  }
};
</script>

react

import React from 'react';

class Player extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    if(!window.polyvPlayer){
      this.loadScript('https://player.polyv.net/script/player.js')
      .then(() =>{
        this.loadPlayer();
      });
    }
  }

  componentWillUnmount() {
    if(this.player){
      this.player.destroy();
    }
  }

  loadPlayer() {
    this.player = window.polyvPlayer({
      wrap: '.player',
      width: '100%',
      height: '100%',
      vid: '88083abbf5bcf1356e05d39666be527a_8',
    });
  }

  loadScript(src) {
    const headElement = document.head || document.getElementsByTagName('head')[0];
    const _importedScript = {};

    return new Promise((resolve, reject) => {
      if (src in _importedScript) {
        resolve();
        return;
      }
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.onerror = err => {
        headElement.removeChild(script);
        reject(new URIError(`The Script ${src} is no accessible.`));
      }
      script.onload = () => {
        _importedScript[src] = true;
        resolve();
      }
      headElement.appendChild(script);
      script.src = src;
    })
  }

  render() {
    return (
      <div className="wrap">
        <div className="player"></div>
      </div>
    )
  }
}

export default Player;

参数

参数 类型 默认值 说明
wrap string / HTMLElement - 页面上存在需要载入播放器的DOM元素或css选择器
width number / string 100% 播放器的宽度,支持像素值和百分比两种类型
height number / string auto 播放器的高度,支持像素值和百分比两种类型
vid string - 云点播平台的视频唯一id

更多参数请查看 属性和接口说明

其它分支版本

除了线上通用版本的播放器外,我们还提供一些其他分支版本的播放器。这些分支版本存在的原因可能有:

  • 当前分支版本处于公测阶段,公测期过后会合并或替换通用版本。
  • 分支版本具有的某些特性或采用的技术实现方案无法合并到通用版本。
  • 分支版本针对某类场景进行了功能定制,只适用于部分客户。

目前可用的Web播放器分支版本有:

VRM10+版本播放器

  • VRM10+版本播放器采用了新的技术实现方案,大大提升了PC端H5播放器的安全性,点此了解详情
  • 不再兼容IE浏览器
  • 播放器支持的参数、接口、事件与线上通用版本播放器保持一致,只需替换js文件的地址即可使用:由<script src="//player.polyv.net/script/player.js"></script>替换为<script src="//player.polyv.net/resp/vod-player-drm/latest/player.js"></script>

移动端H5播放器2.0版本

  • 移动端H5播放器2.0版本采用了新的技术架构和UI设计,解决了线上通用版本在移动端H5上的一些顽疾,比如部分机型微信下只能竖屏全屏的问题,小程序webview播放页面的业务域名限制等。
  • 2.0版本已完成内部测试,目前处于公测阶段,后续会替换线上通用版本。
  • 2.0版本播放器支持的参数、接口、事件与线上通用版本播放器保持一致,只需替换js文件的地址即可使用:由<script src="//player.polyv.net/script/player.js"></script>替换为<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

集成说明

概述

Polyv 音频播放器是保利威云点播Web播放器的重要补充,主要应用于音频为主的业务场景,基于HTML5实现PC/移动端兼容,并深度融合了保利威视频云业务,如支持加密播放等,为用户提供简单、快速、安全、稳定的播放服务。

基础功能

  1. 支持播放上传到保利威平台的音视频文件,并且支持播放加密的音视频文件。
  2. 播放控制(播放、暂停,拖拽进度调整等)。
  3. 两套默认皮肤可选,也可以自定义样式。

格式支持

  • 音频格式:mp3、aac、m3u8
  • 音频编码:mp3、aac
  • 视频格式:mp4、m3u8
  • 视频编码:h264

注:
1. 如果上传文件时设置的是默认转码方式,所有的文件都会转码为视频文件,使用音频播放器播放视频文件时,只会播放声音,没有图像。
2. 如果上传文件时设置了"源文件播放",平台不会对源文件进行转码,播放器会直接播放源文件。建议上传mp3或aac格式的文件,其它音频格式文件,如3gp、ogg、wav、FLAC、mov等,能否正常播放取决于浏览器支持。
3. 如果上传视频文件时设置了“生成音频文件”,平台在转码时会额外转出一份mp3文件,音频播放器会播放该mp3文件。

适配情况

mp3 aac mp4 m3u8
iOS
Android 4.0+
Chrome 34+
Firefox 49+
IE IE9+ IE9+ IE9+ IE11+ for Windows 8.1+
Edge
Safari 8+

常见适配问题:
1. 设置autoplay=true无效,不会自动播放
- 移动端浏览器中音频自动播放一直是禁止的,目前通用的办法是通过用户手动触发播放(例如监听用户的点击事件并调用play方法),但不排除一些特性的浏览器和webview允许自动播放。
- PC端Chrome 55以上版本、MacOS High Sierra Safari 11以上的浏览器也都限制自动播放。
2. 音量调节功能(setVolume)在iOS和部分Android浏览器上不支持。
3. 倍速播放功能(setSpeed)在部分移动端浏览器上不支持,比如Android 微信。

集成方式

引入资源

<!-- 指定版本 -->
<script src="//player.polyv.net/resp/vod-audio-player/0.1.2/audio-player.min.js"></script>
<!-- 最新版本 -->
<script src="//player.polyv.net/resp/vod-audio-player/latest/audio-player.min.js"></script>

创建 HTML 节点

<div id="myAudioPlayer"></div>

创建播放器实例

const plvAudioPlayer = new PlvAudioPlayer({
  vid: '从 polyv 后台获取的 vid',
  wrap: '#myAudioPlayer',
  skin: 'white'
});

监听播放器事件

// 播放器初始化完毕
plvAudioPlayer.on('ready', function() {
  console.info('ready');
});

调用播放器方法,及获取播放器属性

// 切换加密视频
plvAudioPlayer.changeVid({
  ts: ts,
  sign: sign,
  vid: vid
});
// 获取音频文件当前播放进度
const currentTime = plvAudioPlayer.currentTime;
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

观众信息

一、如何设置播放器观看日志发送观众信息

如下示例代码,在播放代码中,添加参数viewerInfo设置观众信息。

<script src='//player.polyv.net/script/polyvplayer.min.js'></script>
<div id='plv_e2e84a7383f869a0c8501b0c2f3dbdec_e'></div>
<script>
    var player = polyvObject('#plv_e2e84a7383f869a0c8501b0c2f3dbdec_e').videoPlayer({
     'width': '600',
     'height': '450',
     'vid': 'e2e84a7383f869a0c8501b0c2f3dbdec_e',
     'viewerInfo': {
        viewerId: '1555313336634', // 观众ID
        viewerName: 'polyv', // 观众昵称
        viewerAvatar: '', // 观众头像URL
        viewerExtraInfo1:'', // 自定义额外信息字段一
        viewerExtraInfo2:'', // 自定义额外信息字段二
        viewerExtraInfo3:'' // 自定义额外信息字段三
     }
    });
</script>

viewerInfo字段解析

字段名 取值范围 说明
viewerId String 观众ID
viewerName String 观众昵称
viewerAvatar String 头像URL
viewerExtraInfo1 String 自定义额外信息字段一,对应观看日志的param3字段
viewerExtraInfo2 String 自定义额外信息字段二,对应观看日志的param4字段
viewerExtraInfo3 String 自定义额外信息字段三,对应观看日志的param5字段

二、如何获取观众信息

当用户访问使用了以上示例播放代码的页面时,播放代码会将viewerInfo设置的观众信息提交到POLYV日志系统中保存。用户可通过调用获取某一天视频日志接口,查询日志中每条记录的viewerInfo相关设置如viewerId、viewerName等。

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
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...

自定义音频播放器(旧)

1 概述

根据polyv播放器现有参数、接口、事件。实现pc/移动端兼容的音频播放器,可自定义播放器样式。

1.1 特性

基础功能

  • [✓]支持IOS、Android主流厂商及机型
  • [✓]支持IE10+, chrome等主流浏览器
  • [✓]支持多种视频编码格式(h264, mpeg4)
  • [✓]支持主流的视音频格式
  • [✓]播放控制(播放、暂停,拖拽进度调整)

2 开发准备

音频播放器使用audio标签进行播放,优点:节省流量。因此需要准备音频文件。保利威视后台生成音频文件有以下两种方法:

  • (1)音频源文件上传,如mp3文件,具体上传步骤可参考源文件播放
  • (2)后台开启生成音频文件,具体生成音频文件可参考音频播放器使用

3 快速开始

4 创建自定义音频播放器

4.1 引入相关资源

打开index.html

(1)在<head>中引入polyvAudio.css

<link href="polyvAudio.css" rel="stylesheet">

(2)引入相关js文件

<script src="jquery3.3.1.min.js"></script>
<script src="//player.polyv.net/script/polyvplayer.min.js"></script>
<script src="polyvAudio.js"></script>

(3)设置dom节点

<div class="wrap polyvAudio">
        <div id="audio_area" class="db audio_area">
            <div class="audio_area_left">
                <div id="audio_play_area" class="audio_play_area">
                    <i class="icon_audio_playing"></i>
                    <i class="icon_audio_pausing"></i>
                </div>
            </div>
            <div id="audio_area_right" class="audio_area_right">
                <div class="audio_info">
                    <div class="db audio_info_area">
                        <strong class="db audio_title">保利威视宣传音频</strong>
                    </div>
                    <div id="audio_slide_bar" class="audio_slide_bar">
                        <div id="audio_progress" class="progress_bar" style="width: 0%;"></div>
                        <div id="audio_progress_bg" class="progress_bar_bg"></div>
                        <div id="audio_progress_dot" class="audio_progress_dot"></div>
                    </div>
                    <div class="audio_time tips_global">
                        <span id="audio_curren_time" class="audio_current">00:00</span>
                        <span class="audio_separator">/</span>
                        <span id="audio_length" class="audio_length">00:00</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="audio" class="audio_player"></div>

(4)嵌入播放器并设置参数调用音频模式
如2开发准备说明,可以通过以下两种方式设置对应参数嵌入播放器。
- 示例一

var player = polyvObject('#audio').videoPlayer({
    width: '1',
    height: '1',
    vid: 'accb9f485b10c10478651a4e61d49425_a',//源文件播放
    useAudio: true,
    ban_ui: true,
    hidePlayBtn: true,
    forceHTML5: true
});
  • 示例二
var player = polyvObject('#audio').videoPlayer({
    width: '1',
    height: '1',
    vid: 'accb9f485b180ec89afd18f9c8756bc2_a',//音频播放器使用
    priorityMode: 'audio',
    ban_ui: true,
    hidePlayBtn: true,
    forceHTML5: true
});

(5)关联自定义控制栏,并传入播放器实例

var polyvAudioObj = $('.polyvAudio').polyvAudio({
    player: player
});
4.2 播放控制

播放控制包括:暂停、继续、停止、获取当前播放时间、播放状态触发等,相关函数如下:

选项

useAudio

* 类型:Boolean
* 说明:是否使用音频模式

ban_ui

* 类型:Boolean
* 说明:是否隐藏播放器皮肤

hidePlayBtn

* 类型:Boolean
* 说明:是否隐藏播放器大播放按钮

forceHTML5

* 类型:Boolean
* 说明:是否使用H5播放器
* 注意: 使用H5播放器可防止部分浏览器屏蔽FLASH播放器的情况

接口

j2s_resumeVideo

* 说明:执行播放器播放动作

j2s_pauseVideo

* 说明:执行播放器暂停动作

j2s_getVideo

* 说明:获取播放器video标签实例
* 返回值说明:返回video节点
* 获取视频结束播放状态示例:player.j2s_getVideo().ended

j2s_getDuration

* 说明:获取当前播放视频总时长
* 返回值:Number(单位:秒)
* 注意: 需要在s2j_onPlayStart事件触发后再执行,否则返回0

j2s_seekVideo

* 说明:控制播放器SEEK功能
* 传参说明:秒数
* 使用示例:player.j2s_getVideo(50)

j2s_getCurrentTime

* 说明:获取视频播放当前时间
* 返回值:秒数

事件

s2j_onPlayStart

* 说明:播放开始时触发,播放过程中只触发一次

s2j_onVideoPlay

* 说明:播放开始时触发,播放过程中触发多次

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

音视频切换功能

开启

1、描述:开通视频转音频的用户可在后台开启生成音频文件,开启后,在对视频文件转码时,会额外生成一份音频文件,在播放器上可进行视频/音频的切换。

2、设置----->视频设置----->生成音频文件设置。
播放器设置----->创建/修改----->皮肤设置选择:简雅蓝/高贵金/清新绿
b68615ddgy1fmcufedt1xj20jz0b9408
播放器中的音视频切换功能展示
b68615ddgy1fmez3s5xbqj20m60d9gp8

参数

参数 类型 默认值 取值 说明
priorityMode String video video/audio 有音频时,优先播放模式
audioMode Boolean true true/false 有音频时,是否显示音频

接口

接口名 参数类型 参数 说明
方法 getCurrentMode() String video/audio 获取当前播放模式,视频模式或音频模式
setMode(value) String video/audio 设置当前播放模式,视频模式或音频模式
事件 onChangeMode(value) String vid, currentSelectMode, preSelectMode 切换播放模式时触发,currentSelectMode为新选择的模式,preSelectMode为之前选择的模式

示例

var mode = player.getCurrentMode();
console.log(mode) // video/audio
player.setMode('video');
window.onChangeMode = function(vid, currentSelectMode, preSelectMode){
console.log(vid, currentSelectMode, preSelectMode);
}
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...