跑马灯

功能介绍

视频如今已应用在各行各业中。可是,视频版权问题依然是困扰大多数人的难题。而录屏,是视频防盗中最难防范的一个环节。如何去防录屏,这成为了人们普遍关心的问题。

因此,POLYV针对性定制了一款增强防录屏效果的视频功能—视频跑马灯功能。

跑马灯功能,可以根据个人喜好进行设置跑马灯的具体效果,使该功能在保证防录屏的前提下还不影响,访客的观看体验与视频的整体美观。

还可以通过使用POLYV提供的接口,通过设定,可以实现设定文字在视频上不规则的跑动,如客户可以通过代码获取到访客的ID后,将ID以跑马灯的方式展现在视频的上方,这样可以大大的增加盗版者的录屏成本,同时还能够强力的震慑盗版者。

后台设置

直播后台 --> 选择频道 --> 播放器管理 --> 防录屏跑马灯

固定值和登录用户名

可设置参数

参数 说明
跑马灯内容 显示的跑马灯内容,登录用户名需要设置param2参数
字体大小 跑马灯内容字体大小,不建议设置小于12号字体
字体颜色 跑马灯内容字体颜色,16进制数值
透明度 跑马灯内容透明度,最大是99%
显示方式 跑马灯显示方式,滚动是自屏幕右方至左方一直滚动 闪烁是屏幕内随机位置闪烁
双跑马灯 开启后,额外加载一个内容相同的跑马灯,该跑马灯肉眼不可见,可经过特殊处理后显示,用于溯源。
自定义缩放 开启后,跑马灯内容可以随播放器大小的缩放而缩放
  • 外嵌播放时用登录用户名需要设置param2参数,否则会报错
  • 固定值和登录用户名可以快速设置显示跑马灯,但是安全性不及自定义跑马灯,对防录屏有较高要求请使用自定义跑马灯和开通防录屏功能

效果

固定值固定值

自定义跑马灯

如果需要用自定义跑马灯,则需要在直播后台设置跑马灯链接,如:http://www.mywebsite.com/validate.php

  • 后端返回json
    用户的http协议接口(如 http://www.mywebsite.com/validate.php )代码示例:
// validate.php
<?php
$username= "elvis";// 用户昵称, 若值为中文需要urlencode('张三'),从session获取
$vid = $_GET["vid"];    
$uid = $_GET["uid"];    
$t = $_GET["t"];    
$code = $_GET["code"];  // 可选
$callback = isset($_GET["callback"])?$_GET["callback"]:null; //未提交callback时则设为空
$msg='播放错误(测试)';          
$fontSize=50;     
$fontColor='0xFFFF00';  
$speed=50;
$filter='on';
$setting=3;
$alpha=0.9;
$filterAlpha=0.9;
$filterColor='0xFF0000';
$blurX=2;
$blurY=2;
$interval=2;
$lifeTime=5;
$tweenTime=5;
$strength=100;
$show='on';
$str="vid=".$vid."&uid=".$uid."&username=".$username."&code=".$code."&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($str);    //加密规则,md5加密,
$array = Array("show"=>$show,"sign"=>$sign,"username"=>$username,"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);    
$validateJson = json_encode($array);

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

注:接口如返回中文内容,请修改编码为UTF-8编码

以下为接口的返回示例:

{
  "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"
}

参数解释:

参数名 代表意义 参数可选 参数类型 是否必需项 默认值
username 用户名,可以是学员的id,也可以是任意定义的值,不可为空 String
sign 通过MD5加密算法计算得到32位小写的值 String
msg 跑马灯错误时提示信息 String
fontSize 跑马灯文字字体大小 Integer 30
fontColor 跑马灯文字字体颜色 包含三个 8 位 RGB 颜色成分的数字;例如,0x000000 为黑色 String 0x000000 黑色
speed 跑马灯文字移动指定像素所需时间 Integer 单位:(秒/10) 200
filter 是否描边 “on” :描边 “off”:不描边 String off
setting 跑马灯样式 1:自屏幕右方至左方一直滚动 2:屏幕内随机位置闪烁 3:自屏幕右方至左方一直滚动,渐隐渐现 4:上下15%的视频区域之间滚动 5:上下15%的视频区域随机闪现文字 6:样式 1 的增强型,加密效果更好,推荐使用 7:样式 2 的增强型,加密效果更好,推荐使用 Integer 1
alpha 跑马灯文本透明度 范围:0.1~1 Float 1
filterAlpha 跑马灯描边透明度 范围:0~1 Float 1
filterColor 跑马灯描边颜色 包含三个 8 位 RGB 颜色成分的数字;例如,0x000000 为黑色 String 0x000000 黑色
blurX 跑马灯描边水平模糊量 范围:0~255 Integer 2
blurY 跑马灯描边垂直模糊量 范围:0~255 Integer 2
interval 跑马灯文本隐藏间隔时间 Integer (单位:秒) 5
lifeTime 跑马灯文本显示时间 Integer (单位:秒) 3
tweenTime 跑马灯文本渐隐渐现时间 Integer (单位:秒) 1
strength 跑马灯描边强度 范围:0~255 Integer 4
show 是否显示跑马灯,默认显示 String off

参数详解

sign
sign的计算规则为:将以下参数的值拼凑起来的字符串做MD5计算,签名需要以下全部参数拼接,未设置值的也要参与。

  $str="vid=".$vid."&uid=".$uid."&username=".$username."&code=".$code."&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($str);
  例如:当vid="vid",uid="uid",username="suki",code="abc",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=vid&uid=uid&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位小写的值:8e0cdbf64c0ce98d0ef76e845f70418c
  • 播放器调用

当网页调用POLYV播放器播放视频时,js通过ajax方式去请求用户的接口,需要跨域请求,会带上vid、uid、code、t这3个参数(如,http(s)://www.mywebsite.com/validate.php?vid=vid&uid=uid&code=abc&t=143020010115550947)。

其中code为播放代码中的参数,值为自定义(如下所示,可以不在播放代码中添加此参数,则该参数的值默认为空);t为播放器产生的随机数。

示例代码:

<script src='https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js'></script>
<div id='player'></div>
<script>
var player = polyvLivePlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    uid: 'uid',
    vid: 'vid',
    code : 'myCodeValue'
});
</script>

跨域

  • 为了让PC端的Flash能够跨域请求用户接口,还需要用户在自己的网站域名根目录下增加crossdomain.xml文件。
  • H5播放器存在跨域问题,可以在php添加以下配置解决
  header("Access-Control-Allow-Origin: *");

请参考播放器跨域

tips

  • 移动web端全屏播放时,会导致跑马灯失效
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

弹幕

功能介绍

POLYV播放器拥有弹幕功能,可以增加观看视频时的互动性

功能API

参数

参数名 类型 默认值 说明
danmuEnable boolean false 是否开启弹幕功能
showDanmu boolean true 弹幕状态,false时一开始关闭
banDanmuBtn boolean false 为true时不显示弹幕按钮

参数设置示例

var player = polyvLivePlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  uid:'uid',
  vid:'vid',
  danmuEnable: true,
});

方法

方法名 参数 返回值 说明
j2s_addBarrageMessage string / 弹幕支持文字和图片,图片需要用[[...]]包含起来
setBarrageStatus boolean / 动态显示隐藏弹幕模块

方法调用示例

const str = 'ajskd[[http://www.mywebsite.com/1.jpg]]'
const danmuData = `[{"msg":"${str}","fontSize":24,"fontColor":"0xffffff","fontMode":"roll"}]`;
player.j2s_addBarrageMessage(danmuData);

player.setBarrageStatus(false);

方法详解

j2s_addBarrageMessage

参数名 取值 默认值 说明 是否必须项
msg / / 弹幕内容,图片需要用[[...]]包含起来
fontSize 12~ 30 字体大小
fontColor 16进制颜色值 0x000000 字体颜色
fontMode roll roll 出现方式
fontArea top/bottom / 出现区域
fontAreaPercent / 25% 出现区域百分比
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

快速集成

功能介绍

保利威直播提供快速集成的代码,帮助你实现直播播放器的快速调用

快速集成代码

js demo

<div id="player"></div>
<script src="//player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js"></script>
<script>
  var player = polyvLivePlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    uid:'uid',
    vid:'vid'
  });
</script>

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

需要兼容ie10以下的播放器,可以使用下面代码

<script src='https://player.polyv.net/livescript/liveplayer.js'></script>
<div id='player'></div>
<script>
var player = polyvObject('#player').livePlayer({
    width:'600',
    height:'450',
    uid :'uid',
    vid : 'vid'
});
</script>

vue demo

<template>
  <div id="player"></div>
</template>
<script>
export default {
  data() {
    return {
      playerJs: 'https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js',
      uid:'uid',
      vid:'vid'
    };
  },

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

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

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

react demo

import React from 'react';

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

  componentDidMount() {
    if(!window.polyvLivePlayer){
      this.loadScript('https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js')
      .then(() =>{
        this.loadPlayer();
      });
    }
  }

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

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

  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 播放器的高度
uid string - 用户id,即账号信息中的userId
vid string - 频道id,即频道号
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...