播放加密视频

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

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

开发指引

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

名称 类型 说明
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...

跨域访问设置

一、什么是跨域?

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。广义的跨域包括:

  1. 资源跳转:A链接、重定向、表单提交
  2. 资源嵌入:<link><script><img><video>等Dom标签以及样式表中的background:url( )、@font-face( )等文件外链
  3. 脚本请求:Ajax请求、Dom和JavaScript对象的跨域操作等

而我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。同源策略(Same-origin policy)是浏览器最核心也最基本的一个安全策略,它限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。所谓同源是指协议、域名、端口三者相同,当一个请求URL的协议、域名、端口三者中任意一个与当前页面URL不同即为跨域。同源策略的限制如下:

  1. 无法读取非同源网页的Cookie、LocalStorage和IndexDB
  2. 无法获得非同源网页的Dom和Js对象
  3. 无法向非同源地址发送Ajax请求

二、跨域解决方案

常见的跨域解决方案有:

  • 通过jsonp跨域
  • 跨域资源共享(CORS)
  • Nginx代理跨域
  • postMessage跨域
  • WebSocket协议跨域
  • ...

开发者应结合实际情况选择最适合的方案,下面将对与保利威视频播放服务相关的跨域问题解决方案进行介绍。

1、通过jsonp跨域

<script><img>等一些获取资源的HTML标签是没有跨域限制的,基于此原理,网页可通过添加一个<script>,向服务器请求 JSON 数据,服务器收到请求后将数据放在一个指定名字的回调函数的参数位置传回来。

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持GET请求。

原生实现:

<script src="http://www.domain2.com:8080/login?user=admin&callback=handleCallback"></script>
// 向服务器test.com发出请求,该请求的查询字符串有一个callback参数,用来指定回调函数的名字

// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function handleCallback(res){
        // 处理获得的数据
        console.log(res);
    }
</script>

服务端返回数据如下:

handleCallback({"status":true,"user":"admin"})

jQuery Ajax:

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

Vue.js:

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

2、跨域资源共享(CORS)

跨域资源共享(Cross-Origin Resource Sharing)是W3C标准,目前所有浏览器都支持该功能(IE8/9需要使用XDomainRequest对象来支持CORS),CORS也已经成为主流的跨域解决方案。详见Http访问控制CORS的详解

  • 普通跨域请求:只需服务端设置Access-Control-Allow-Origin即可,前端无需设置
  • 带cookie跨域请求:前后端都需要进行设置

前端设置:

1.) 原生Ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

2.) jQuery Ajax

$.ajax({
   url: 'http://www.domain2.com:8080/login',
   type: 'get',
   data: {},
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息,但不会含cookie
});

3.) vue-resource

Vue.http.options.credentials = true

4.) axios

axios.defaults.withCredentials = true

服务端设置:

服务器端对于CORS的支持,主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

1.) Java后台

/*
 * 导入包:import javax.servlet.http.HttpServletResponse;
 * 接口参数中定义:HttpServletResponse response
 */

// 允许跨域访问的域名:若有端口需写全(协议+域名+端口),若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 

// 允许前端带认证cookie:启用此项后,上面的域名不能为'*',必须指定具体的域名,否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 

// 提示OPTIONS预检时,后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

2.) PHP后台

<?php
 header("Access-Control-Allow-Origin:*");

3、Flash播放器的跨域配置

Flash播放器在请求授权播放和跑马灯接口时,需要配置允许跨域请求。配置方式为:添加crossdomain.xml文件到播放域名的根目录下。

crossdomain.xml文件内容:

<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy>
    <allow-access-from domain="*"/>
    <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
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...

属性和接口说明

播放器属性

名称 类型 默认值 说明
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依然可用)。
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_skin_progress Boolean false 是否隐藏播放器控制栏的进度条
ban_seek String off 是否禁止拖拽进度条,取值:{on,off}。
注:Android系统下各厂商浏览器表现不一致,该参数可能不生效。
ban_seek_by_limit_time String off 是否禁止拖拽进度至视频未播放到的位置,取值:{on,off}。为on时只可在已播放过的进度范围内拖拽(向前拖拽)。
ban_preview_video Boolean false 是否禁止鼠标在进度条悬浮时显示预览画面的缩略图。
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 / / 销毁播放器实例

播放器事件

名称 说明
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 基于视频版权保护考虑,播放器会禁止加密视频在某些自带录屏功能的浏览器上播放。请更换其它浏览器。
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
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...