播放加密视频

保利威视频加密采用私有的加密算法,提供包括加密转码、安全传输、解密播放等一体化的视频安全方案。通过对视频数据本身进行高强度的加密,视频文件即使被下载到本地也无法直接播放和传播,可有效防止视频泄露和盗版问题,详见:视频加密

为了方便开发者快速集成,我们将解密播放相关逻辑都封装到了播放器内部,与播放普通视频相比,在播放器端,开发者只需多传入播放凭证参数即可实现加密视频的播放。

开发指引

加密视频,需使用播放凭证方式进行播放,播放器需要传递的参数如下:

名称 类型 说明
playsafe String/Function PC端播放加密视频所需的授权凭证,业务方服务端通过创建 Playsafe Token接口获取并返回给播放器。
playsafeUrl String 获取PC端播放加密视频凭证的接口URL(与playsafe参数二选一
ts Number 移动端H5播放加密视频需传入的13位毫秒级时间戳
sign String 移动端H5播放加密视频所需的签名,生成规则为点播账号的secretkey、vid、ts的值按字母顺序拼接后进行md5计算后的值,由业务方服务端生成并返回给播放器。

注:playsafe或playsafeUrl参数用于PC端解密播放,ts、sign用于移动端H5播放器解密。如果PC和移动端使用同一份播放器代码,则三个参数都需要传值。

播放器代码示例:

<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',   
    playsafe:'81814fed-bdd0-4506-bec1-ebc8093148c5-hfevwsfxcsbcocx', 
  //playsafeUrl:'https://myDomain.com/token', // 业务方自定义的获取播放凭证接口URL,与playsafe参数二选一
    ts:'1568131545000',
    sign:'88313661ba7ded642c7b557b0a364b4b'
});

//切换加密视频时,需要重新获取播放凭证。如果初始化播放器时使用了playsafeUrl参数,则播放器会自动获取新的凭证,无需传playsafe参数。
player.changeVid({
  vid: '88083abbf5bcf1356e05d39666be527a_9', //需要切换的视频vid
  playsafe: '81814fed-bdd0-4506-bec1-ebc8093148c6-hfevwsfxcsbcocx', //新获取的playsafe token
  sign: '88313661ba7ded642c7b557b0a364b4c', //新获取的sign和ts参数
  ts: '1568131545001'
});
</script>

Web页面播放加密视频前,需要先访问业务方自己的服务端授权验证接口(可以在这里加上自有业务的授权验证逻辑,例如是否登录、是否购买课程等, 建议使用HTTPS)。如果业务上允许播放,则通过创建 Playsafe Token接口获取播放凭证(或者在服务端生成sign、ts参数),并返回给Web端播放器。

服务端生成播放凭证代码示例:

PHP 代码:

// 接口中应附带自有业务的授权验证逻辑,如判断是否登录、是否购买课程等

// 以下为生成播放凭证的代码示例
function get_client_ip() {
  if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
    $ipaddress = $_SERVER['HTTP_CLIENT_IP'];
  } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
      $ipaddress = $_SERVER['HTTP_X_FORWARDED_FOR'];
  } else {
      $ipaddress = $_SERVER['REMOTE_ADDR'];
  }
    return $ipaddress;
}

$userId = 'your userId';       // 保利威点播账号的userId
$secretkey = 'your secretkey';     // 保利威点播账号的secretkey
$videoId = '88083abbf5bcf1356e05d39666be527a_8';  // 视频vid
$ts = time() * 1000;      // 时间戳
$viewerIp = get_client_ip();  // 观众ip
$viewerId = '12345';      // 观众id
$viewerName = 'testUser';  // 观众昵称, 若值为中文需要urlencode('张三')
$extraParams = 'HTML5';  // 自定义扩展参数
$disposable = false // true 表示 token 仅一次有效。false 则表示在有效期内可以多次验证。默认为 false。

/* 将参数 $userId、$secretkey、$videoId、$ts、$viewerIp、$viewerIp、$viewerId、$viewerName、$extraParams按照ASCKII升序 key + value + key + value ... +value 拼接
*/
$concated =  'extraParams'.$extraParams.'ts'.$ts.'userId'.$userId.'videoId'.$videoId.'viewerId'.$viewerId.'viewerIp'.$viewerIp.'viewerName'.$viewerName;
// 首尾加上secretkey值
$plain = $secretkey.$concated.$secretkey;
// 取大写MD5
$sign = strtoupper(md5($plain));

// 然后将下列参数用post请求  https://hls.videocc.net/service/v1/token 获取 token
$url = 'https://hls.videocc.net/service/v1/token';
$data = array('userId' => $userId, 'videoId' => $videoId, 'ts' => $ts, 'viewerIp' => $viewerIp, 'viewerName' => $viewerName, 'extraParams' => $extraParams, 'viewerId' => $viewerId, 'sign' => $sign);
$options = array(
    'http' => array(
        'header'  => "Content-type: application/x-www-form-urlencodedrn",
        'method'  => 'POST',
        'content' => http_build_query($data)
    )
);
$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);

// 获取接口返回结果中的token值, 并传给播放器播放加密视频
$token = json_decode($result)->data->token;
echo $token;

如果播放器使用playsafeUrl参数的方式,则需输出json格式:

// 已省略获取token的代码...
$token = json_decode($result)->data->token;
$code = json_decode($result)->code; // 响应代码,200为成功,403为ts过期或签名错误,400为参数错误(例如缺少 userId 或 videoId)
$message=json_decode($result)->message;
$status=json_decode($result)->status;
if($code == 200){
    $array = Array("code"=>$code,'status'=>$status,'message'=>$message,"data"=>$token);
}else{
    $array = Array("code"=>$code,'status'=>$status,'message'=>$message,"data"=>json_decode($result)->data);
}
$Json = json_encode($array);
echo $Json; //输出json

playsafeUrl返回结果示例:

// 请求成功
{
    "code": 200,
    "status": "success",
    "message": "",
    "data": "973d7731803940a1b14fdc93941f493c"
}
// 请求失败(签名错误)
{
    "code": 403,
    "status": "error",
    "message": "sign_invalid",
    "data": "sign parameter invalid."
}

playsafeUrl可能存在跨域问题,解决方案请参考:跨域访问设置

如果需要在移动端H5播放Web加密视频,则需返回sign和ts参数给播放器:

// php
$vid = "88083abbf5bcf1356e05d39666be527a_8"; // 视频vid
$secretkey= "your secretkey"; // 保利威点播账号的secretkey
$ts=time()*1000;  // 10位的秒级时间戳,后面加多3个0,最后为13位的数值
$sign = md5($secretkey.$vid.$ts); 
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

授权播放和跑马灯

屏幕录像是最难防范的一种视频盗版方式,保利威播放器提供的防录屏跑马灯功能,通过设定文字内容(一般是观众的身份ID信息)在视频上不规则滚动,以此来警示盗版者,达到视频版权保护的效果。

另外在用户网站中,除了通过登录信息(cookies)验证观众是否有权限访问视频播放页面外,还可以通过保利威播放器验证观众是否有播放某一个视频的权限,从而实现对观众权限的双重验证。

防录屏跑马灯的视频介绍:防录屏神器–跑马灯(视频)

实现流程

image-20200831160621474

实现步骤

一、管理后台设置

  1. 登录云点播管理后台,点击 【设置】【视频设置】,进入视频设置页面。
  2. 在授权播放和防录屏跑马灯接口设置栏中,填写业务方的接口服务URL。
    image-20200831161317380

播放器在请求授权接口时,会自动适配以下情况:

  1. 当填写的是完整的URL时,播放器会直接请求,例如:http://mywebsite.com/interface/validate。
  2. 当填写的是不带协议头的接口地址时,播放器会根据当前页面的请求协议自动补全。例如填写的是://mywebsite.com/interface/validate,当前页面使用https协议访问,那么实际请求的是:https://mywebsite.com/interface/validate。
  3. 当填写的是不带协议头和HOST的接口地址时,播放器会根据当前页面的请求协议和HOST自动补全。例如填写的是:/interface/validate 或 interface/validate,当前页面的域名是mywebsite2.com,且页面使用http协议访问,那么实际请求的是:http://mywebsite2.com/interface/validate。

二、业务方服务端实现

1、播放器端请求

当管理后台设置授权播放和跑马灯接口后,Polyv播放器在播放视频时会首先请求后台设置的接口,请求的方式为GET,并且会附带vid、code、t、callback这四个参数,例如:https://www.mywebsite.com/validate?vid=e2e84a73837363106d8d257f60e55c4c_e&code=&t=1457938821973&callback=polyvObject16209048491895664483_1457938783908&_=1457938784101。

其中code为播放器嵌入代码中的参数,值可以自定义;t为播放器产生的随机数。播放器示例代码如下:

<script src='https://player.polyv.net/script/player.js'></script>
<div id='player'></div>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
    code: 'myCodeValue'  // 用户可自定义参数值,也可以不设置此参数,那么在请求接口时该参数值为空。参数值为中文时需要做base64URLSafe。
});
</script>

由于H5播放器通过Ajax方式请求用户接口,需要跨域请求,因此需要callback参数。而Flash播放器是通过跨域文件实现跨域,所以不需要callback参数,请求接口时只会提交vid、code和t三个参数。Flash播放器实现跨域请参考跨域访问设置

2、服务端接口实现

业务方服务端接口如果只需实现授权验证的功能,只需返回 status、username、sign三个参数给播放器验证即可。

服务端实现的PHP示例如下:

// validate.php
<?php
$username = "elvis"; // 用户昵称, 若值为中文需要urlencode('张三'),可从session获取
$secretkey = "secretkey"; // 登录保利威管理后台,点击 【设置】 → 【API接口】获取
$vid=$_GET["vid"];
$t = $_GET["t"];
$code = $_GET["code"];

if($username=="elvis"){ 
  $status = 1; // 业务方可自定义授权验证逻辑
}else {
  $status = 2;
}
if(!empty($_GET["callback"])){
  $callback = $_GET["callback"];
}else{
  $callback = '';
}

$sign=md5("vid=$vid&secretkey=$secretkey&username=$username&code=$code&status=$status&t=$t");
$array=Array("status"=>$status,"username"=>$username,"sign"=>$sign);
$Json = json_encode($array);

if($callback!=''){ //PC H5播放器会提交callback参数
  echo $callback."(".$Json.")";
} else{ //Flash播放器不提交callback参数
  echo "(".$Json.")";
}
?>

其中,sign的计算规则为:拼接vid、secretkey、username、code、status、t参数做MD5计算:

Plain ="vid=" + vid + "&secretkey=" + secretKey + "&username=" + username + "&code=" + code + "&status=" +status + "&t=" + t
sign = MD5.hash(Plain);

以下为接口返回示例:

  polyvObject16208229674372271079_1478765178186({
  "status":1,
  "username":"elvis",
  "sign":"1cca74bd55c6076091ed84807065e5b7"
  })
// 不提交callback参数时
{
  "status":1,
  "username":"elvis",
  "sign":"2c2bfb00314da7d768d50a7d1e93bd9f"
}

如果除了授权验证,还需实现跑马灯功能,则接口需要返回跑马灯相关的参数。

服务端实现的PHP示例如下:

// validate.php
<?php
$username = "elvis"; // 用户昵称, 若值为中文需要urlencode('张三'),可从session获取
$secretkey = "secretkey"; // 登录保利威管理后台,点击 【设置】 → 【API接口】获取
$vid=$_GET["vid"];
$t = $_GET["t"];
$code = $_GET["code"];
$fontSize="40";
$fontColor="0xFFE900";
$speed="200";
$filter="on";
$setting="3";
$alpha="1";
$filterAlpha="1";
$filterColor="0x3914AF";
$blurX="2";
$blurY="2";
$tweenTime="1";
$interval="5";
$lifeTime="3";
$strength="4";
$show="on";
$msg="Errormessage!";

if($username=="elvis"){ // 业务方可自定义授权验证逻辑
 $status = 1;
}else {
 $status = 2;
}

if(!empty($_GET["callback"])){
 $callback = $_GET["callback"];
}else{
 $callback = '';
}

$sign=md5("vid=$vid&secretkey=$secretkey&username=$username&code=$code&status=$status&t=$t&msg=$msg&fontSize=$fontSize&fontColor=$fontColor&speed=$speed&filter=$filter&setting=$setting&alpha=$alpha&filterAlpha=$filterAlpha&filterColor=$filterColor&blurX=$blurX&blurY=$blurY&interval=$interval&lifeTime=$lifeTime&tweenTime=$tweenTime&strength=$strength&show=$show");
$array = Array("status"=>$status,"username"=>$username,"sign"=>$sign,"msg"=>$msg,"fontSize"=>$fontSize,"fontColor"=>$fontColor,"speed"=>$speed,"filter"=>$filter,"setting"=>$setting,"alpha"=>$alpha,"filterAlpha"=>$filterAlpha,"filterColor"=>$filterColor,"blurX"=>$blurX,"blurY"=>$blurY,"tweenTime"=>$tweenTime,"interval"=>$interval,"lifeTime"=>$lifeTime,"strength"=>$strength,"show"=>$show,);
$Json = json_encode($array);

if($callback!=''){
 echo $callback."(".$Json.")";
} else{
 echo $Json;
}
?>

其中,sign的计算规则为(参数必须按照示例中的顺序拼接):

Plain = "vid=" + vid + "&secretkey=" + secretKey + "&username=" + username + "&code=" + code + "&status=" + status + "&t=" + t + 
"&msg=" + msg + "&fontSize=" + fontSize + "&fontColor=" + fontColor + "&speed=" + speed +"&filter=" +filter + "&setting=" + setting + 
"&alpha=" + alpha + "&filterAlpha=" + filterAlpha  + "&filterColor=" + filterColor + "&blurX=" + blurX + "&blurY=" + blurY + 
"&interval=" + interval + "&lifeTime=" + lifeTime + "&tweenTime=" + tweenTime + "&strength=" + strength + "&show=" +show;
sign = MD5.hash(Plain);

例如:当vid="8f8482aaab11dd5f45f183a9192a04c5_8",secretkey="AiDQw1mAmi",username="suki",code="abc",status="1",t="143020010115550947",msg="Errormessage!",fontSize="40",fontColor="0xFFE900",speed="200",filter="on",setting="3",alpha="1",filterAlpha="1",filterColor="0x3914AF",blurX="2",blurY="2",interval="5",lifeTime="3",tweenTime="1",strength="4",show="on"时,
拼凑起来去MD5计算的字符串为:
vid=8f8482aaab11dd5f45f183a9192a04c5_8&secretkey=AiDQw1mAmi&username=suki&code=abc&status=1&t=143020010115550947&msg=Errormessage!&fontSize=40&fontColor=0xFFE900&speed=200&filter=on&setting=3&alpha=1&filterAlpha=1&filterColor=0x3914AF&blurX=2&blurY=2&interval=5&lifeTime=3&tweenTime=1&strength=4&show=on
则sign为MD5计算后32位小写的值:3b07f56f29b7fd728bf20020442338e7

以下为接口返回示例:

{
  "status":1,
  "username":"elvis",
  "sign":"6ab63590797e513d1b6c46b407413478",
  "msg":"Errormessage!",
  "fontSize":"40",
  "fontColor":"0xFFE900",
  "speed":"200",
  "filter":"on",
  "setting":"3",
  "alpha":"1",
  "filterAlpha":"1",
  "filterColor":"0x3914AF",
  "blurX":"2",
  "blurY":"2",
  "tweenTime":"1",
  "interval":"5",
  "lifeTime":"3",
  "strength":"4",
  "show":"on"
}

三、接口返回参数说明

参数名 类型 必填 默认值 说明
status Integer / 是否允许播放:1 允许 2 禁止
username String / 观众名称,也会用于跑马灯显示的文字内容。如果是中文需要做URLEncode
sign String / 接口签名,用于校验返回内容是否被篡改
show String off 当参数值为“on”时表示显示跑马灯,默认不显示
setting Integer 1 跑马灯滚动的样式:1 从右到左滚动 2 随机位置闪烁 3 从右到左闪烁滚动
speed Integer 200 跑马灯文字从右侧移至左侧所需时间,单位:1/10秒
lifeTime Integer 3 跑马灯文字显示时间,单位:秒
interval Integer 5 跑马灯文字隐藏间隔时间,单位:秒
tweenTime Integer 1 跑马灯文字渐隐渐现时间,单位:秒
fontSize Integer 30 跑马灯文字的字体大小
fontColor String 0x000000 跑马灯文字颜色,使用十六进制颜色值表示,如0xFF0000,默认为黑色
alpha Float 1 跑马灯文字透明度,取值范围0.01~1,参数值不能小于0.01
filter String off 跑马灯文字是否描边,on 描边 off 不描边
filterAlpha Float 1 文字描边透明度,取值范围0~1
filterColor String 0x000000 文字描边颜色,使用十六进制颜色值表示,如0xFF0000,默认为黑色
strength Integer 4 描边强度,取值范围0~255
blurX Integer 2 描边水平模糊量,取值范围0~255
blurY Integer 2 描边垂直模糊量,取值范围0~255
msg String / 自定义错误提示信息
  1. 当接口只做授权验证用途时,只需返回 status、username和sign三个参数,跑马灯相关参数可不返回。
  2. 请确保接口返回数据是utf-8编码,注意 status参数是整型,不能是字符串类型。
  3. 目前跑马灯功能不支持在移动端H5播放器上使用。
  4. 请尽量不要对播放器样式或\标签进行修改
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

广告设置

Polyv Web播放器支持在视频中插入广告,广告类型有:

  1. 片头广告:在视频开始前播放
  2. 片尾广告:在视频结束后播放
  3. 暂停广告:在视频暂停时显示
  4. 弹窗广告:在视频播放的某个指定时间点弹窗显示

保利威云点播平台支持通过以下两种方式来设置广告:

方式一:通过点播管理后台设置

  1. 登录云点播管理后台,点击 【广告管理】【添加广告】,进入广告设置页面。
  2. 在广告设置页面,您可以

    • 选择广告类型:片头、暂停、弹窗、片尾。
    • 设置广告的标题和描述信息。
    • 上传广告素材,支持JPEG,GIF,PNG,FLV, MP4格式,素材文件大小不超过500MB。
    • 为广告添加链接地址,点击跳转到指定页面。
    • 选择需要播放广告的视频分类。
    • 设置广告时长、是否允许跳过、跳过按钮的文案、以及在什么时间出现跳过按钮。
    • 设置广告投放的日期、时间段以及广告状态。

    image-20200827145254814

点击这里查看视频教程

方式二:通过播放器参数设置

除了在管理后台设置广告外,您还可以通过播放器参数进行更加灵活的控制。当管理后台和播放器参数都设置时,以播放器参数为准。

广告参数设置的代码示例如下:

<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',
    adSkip: true, //是否显示跳过广告的按钮,默认为false
    adMatter: [{ // 广告参数详细配置
        location: 1, //广告位置: 1 片头广告,2 暂停广告,3 片尾广告,4 弹窗广告
        adtype: 1,  //广告资源类型: 1 图片广告,2 视频广告,3 swf广告(flash播放器生效)
        matterurl: 'https://myDomain.com/ad.mp4', //广告资源URL
        addrurl: 'http://www.polyv.net/', //广告点击跳转链接
        timesize: 5, //广告时长,单位:秒
        cataid: 1560331332756, //需播放广告的视频分类ID,默认为1
        poplocation: 1, //弹窗广告位置(1 右下角,2 右上角,3 左下角,4 左上角)
        popuptime: 45,//弹窗广告出现的时间(移动端无效),单位:秒
        skiptime: 1, //广告跳过按钮出现时间
        skipenabled: true,//是否显示跳过按钮
        skipbutton: '跳过'//跳过按钮提示文案
    }]
});
</script>

说明:

  1. 如果设置了adSkip参数,则不会读取adMatter数组里面的skipenabled参数。
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

播放器Logo设置

Logo是企业形象的符号化体现,设置播放器Logo便于观众对企业品牌的识别、记忆,从而有效帮助企业品牌的树立和传播。

保利威云点播平台支持通过以下两种方式来设置播放器Logo:

方式一:通过点播管理后台设置

  1. 登录云点播管理后台,点击 【播放器】选择已创建的播放器(或新建播放器)【修改】,进入播放器设置页面。
  2. 在播放器Logo栏中,进行自定义设置。您可以:
    • 上传一张图片作为播放器Logo
    • 查看当前Logo图片
    • 为Logo添加链接地址,点击跳转到指定页面
    • 设置Logo不透明度和显示位置

image-20200827110817629点击这里查看视频教程

方式二:通过播放器参数设置

除了在管理后台设置播放器Logo以外,您还可以通过播放器参数进行更加灵活的控制。当管理后台和播放器参数都设置时,以播放器参数为准。

Logo参数设置的代码示例如下:

<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',   
    logo: {
      logo_width: 200, //Logo宽 默认 'auto'
      logo_height: 'auto', //Logo高 默认 'auto'
      logo_url: 'http://www.polyv.net/test.png', // Logo图片URL
      logo_pos: 2, //Logo显示位置,取值范围为:{0,1,2,3,4},分别代表:隐藏、左上、右上、左下、右下
      logo_link: 'http://www.polyv.net/', // 点击Logo的跳转链接 (选填)
      logo_alpha: 50, //Logo透明度,取值范围:(0,100)
      logoOffset: '40,50',//Logo偏移量,单位:百分比。坐标原点为播放器左上角,只在Logo位置为左上、右上时生效
      logo_resize: true //默认值为false,为true时会根据播放器窗口大小动态调整Logo的尺寸,若设置了logo宽高则该参数不生效
   }
});
</script>

说明:

  1. Logo图片支持的格式有:jpeg、png、gif,为了更好的显示效果,建议使用png格式的图片。
  2. Logo图片尺寸小于200*200时会显示原始尺寸,大于200*200像素时会被等比缩放。
  3. Logo与水印的实现机制不同:
    1. Logo是将图片添加到播放器窗口,不会对视频源文件产生影响。Logo可随时更换、调整显示位置或关闭。
    2. 水印是在视频转码时将图片“压”进视频流中,成为了视频的一部分。修改水印设置只对新上传的视频生效,不能对已发布视频的水印做任何修改。
  4. 移动端H5播放器由于系统或浏览器限制,在部分情况下无法显示Logo:
    • iOS设备在全屏播放视频时,会强制使用系统播放器,此时无法显示播放器Logo。
    • Android设备下大多数的国内浏览器厂商都会在视频播放时挟持标签,由浏览器内置播放器播放视频(且视频层级最高无法叠加页面元素),这种情况下也无法显示播放器Logo。
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

观众信息设置与统计

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'时只可在已播放过的进度范围内拖拽(向前拖拽)。
};
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...