跑马灯

功能介绍

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

因此,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...

直播 JavaScript SDK 使用文档

概述

该SDK是用于web端接入POLYV直播服务,包括云课堂和直播助手发起的直播的web端观看,POLYV聊天室服务,兼容PC以及移动端观看。

快速开始

第一步:引入直播SDK

<script src="https://player.polyv.net/livesdk/polyv-live.min.js"></script>

第二步:创建初始化ppt与讲师画面元素

<div id="ppt" style="width:500px;height:300px;"></div>
<div id="player" style="width:500px;height:300px;"></div>

第三步:创建SDK实例

var liveSdk = new PolyvLiveSdk({
  channelId: channelId,
  sign: sign, // 频道验证签名
  timestamp: timestamp, // 毫秒级时间戳
  appId: appId, // polyv 后台的appId
  user: {
    userId: userId,
    userName: 'polyv-test',
    pic: '//livestatic.videocc.net/assets/wimages/missing_face.png'
  }
});

第四步:监听频道信息读取完成事件,初始化播放器

// 监听频道信息并初始化播放器
liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
  liveSdk.setupPlayer({
    pptEl: '#ppt',
    el: '#player',
    type: 'auto'
  });
});  

API

PolyvLiveSdk 是用于创建SDK实例的类

类方法

PolyvLiveSdk.getChannelInfo(channelId: string, appId: string, sign: string, timestamp: number): Promise

获取频道信息

PolyvLiveSdk.previewPPT(config: previewConfig): PreviewPPT

预览指定的ppt
参数说明

interface previewConfig {
  el: DOMSeletor;  // 需要显示预览ppt的dom选择器
  autoId: number|string;  // pptId
  type: string;  // ppt类型
  width?: number|string;  // ppt宽,默认100%
  height?: number|string; // ppt高,默认100%
  pptNav?: boolean; //是否显示ppt控制控件,默认`true`  
  pptNavBottom?: string`; //ppt控制栏距离底部距离,例:`pptNavBottom: '50px'` 
}

实例方法
PreviewPPT.nextPPTPage(): void 使ppt切换到下一页,跟随模式下不能切到讲师未讲解的ppt
PreviewPPT.prevPPTPage(): void 使ppt切换到上一页

实例事件
success: 实例创建成功
error: 预览失败
pptStatusChange: 当前页改变,与liveSdk.player 上的事件一致

返回值 PreviewPPT
示例代码

var previewPPT = PolyvLiveSdk.previewPPT({
  el: '#previewPPT',
  autoId: 123,
  type: 'new',
});

previewPPT.on('success', function() {
  console.log('预览成功');
});

previewPPT.on('error', function(err) {
  console.log('预览失败', err);
});

// 销毁ppt预览实例
//previewPPT.destroy()
  • 当前频道的ppt列表可通过接口获取 -> 接口文档
  • 接口请求中的参数 status 建议设置 normal,请求成功处理的ppt

类属性

PolyvLiveSdk.emotionLists: { url: string; title: string: position: string }[]

polyv 表情数据列表
全部表情 sprites 图片地址: https://livestatic.polyv.net/assets/images/em/default.png

// 返回数据
[
  {
    url: '//livestatic.polyv.net/assets/images/em/2.png',
    title: '撇嘴',
    position: '-48px 0px' // sprites图位置
  }
]

PolyvLiveSdk.emotionSearch: object

键值对为 [表情title]: 表情url 的对象

实例设置

channelId: string

频道id, 支持云课堂/直播助手/大班课发起的直播

sign: string

POLYV 频道信息获取接口用到的签名 签名规则
请用channelId、timestamp、appId 三个字段拼接sign

timestamp: number

POLYV 频道信息获取接口用到的时间戳
- 注意:该时间戳需要与服务器端获取的签名一样

appId: string

POLYV账号 appId,从 POLYV 后台获取

user: { userId: string; userName: string; pic: string; }

用户信息设置,以下参数必须设置且不能为空
* user.userId: string : 用户id
* user.userName: string : 用户昵称
* user.pic: string : 用户头像,必须为是http/https/ // 开头链接

{
    userId: '自定义id', // 用户id
    userName: 'polyv-test', // 用户昵称
    pic: '//livestatic.videocc.net/assets/wimages/missing_face.png' // 用户头像
}

chat: boolean

是否连接聊天室,默认为true,在直播模式下如果调用直播播放器必须连接聊天室,所以即使设置为false,在初始化直播播放器时会自动连接聊天室,回放模式下可以不连接

param4?: stringparam5?: stringkey1?: stringkey2?: stringkey3?: stringcode?: string

播放器统计参数,param1、param2,param3被预设为userId和userName以及直播状态,所以设置无效

socket: SocketIOClient.Socket

SDK 支持传入外部传入 polyv 聊天室 socket ,传入后SDK不在连接socket,请在外部socket实例创建后就初始化SDK实例并把socket传入
注意若使用聊天室sdk或者自行连接聊天室的情况必须传入该设置,不然会导致重复登录聊天室
示例代码(以polyv聊天室SDK为例)

var chatroom = new PolyvChatRoom({
  roomId: channelId,
  userId: userId,
  nick: userName,
  pic: pic,
  userType: 'slice'
});

var liveSDK = new PolyvLiveSdk({
  channelId: channelId,
  appId: appId,
  sign: sign,
  timestamp: timestamp,
  socket: chatroom.chat.socket,
  user: {
    userId: userId,
    userName: userName,
    pic: pic
  }
});

updatePageview: boolean

是否更新在线人数,默认为false, 设置后每当调用实例polyv的观看页上的累计观看人数会增加一个

lang: 'zh_CN'|'en'

设置播放器语言,默认为'zh_CN'

实例方法

setupPlayer(config: object)

初始化播放器,必须在频道信息事件触发后调用
参数:config 播放器配置对象

示例代码:

var config = {
    pptEl: '#ppt',
    el: '#player',
    type: 'auto',
    autoplay: false,
    audioMode: false,
    width: '100%',
    height: '100%',
    pptWidth: '100%',
    pptHeight: '100%',
    controllerPosition: 'ppt',
    controller: true,
    pptNav: true,
    // 回放模式需要fileId、url、sessionId
    fileId: undefined,
    url: undefined,
    sessionId: undefined
}
// 监听频道信息并初始化播放器
liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
  liveSdk.setupPlayer(config);
});  

参数说明:
pptEl?: DOMSelectors:ppt文档元素选择器,非云课堂可不填
el: DOMSelectors:讲师区域元素
width?: string|number:讲师区域宽,默认'100%'
height?: string|number:讲师区域高,默认'100%'
pptWidth?: string|number:ppt区域宽,默认'100%'
pptHeight?: string|number:ppt区域高,默认'100%'
type?: 'auto'|'live'|'vod'|'record': 播放器播放类型,'auto'(根据频道实际设置自动选择播放类型)、'live'(直播)、'vod'(回放)、'record'(暂存), 默认'auto',选择'auto'后,播放器会以直播->回放列表视频->第一个暂存视频(优先级由大到小)的优先级播放
pptType?: 'vod'|'record': 设置ppt类型,用于type: 'vod'模式下指定ppt类型,可选'record''vod',在使用指定暂存场景回放场次时可设置为'record',回放列表可不设置,若调用player.switchVod切换回正常回放列表的场次需传入'vod'修改为回放列表类型,默认为'vod'
播放指定暂存示例

liveSdk.setupPlayer({
  // ...
  type: 'vod',
  pptType: 'record',
  fileId: fileId,
  url: url,
  sessionId: sessionId,
  // ...
});
`vodType?: 'playback'|'vod'`: 设置播放回放类型,用于`type: 'vod'`模式下回放播放列表类型(`playback`-回放列表,`vod`-点播列表),设置为`vod`后将使用点播播放器播放,使用点播vid播放,流量将统计到点播平台,所以vid为必填值,若设置`type: 'auto'`,如果当前播放的是回放则按点播列表播放  
`vodToken?: ((vid: string, next: (data: VodToken) => void) => void) | VodToken`: 点播加密视频校验参数,若确认播放的点播视频存在加密视频则需要传入校验参数,可参考 [播放加密视频](https://dev.polyv.net/2020/videoproduct/v-player-sdk/v-player-sdk-web/v-player-sdk-web-feature/play-encrypted-video/)  
示例  
```javascript
// 一次有效,若使用liveSdk.player.switchVod()切换视频需要重新设置
vodToken: {
    playsafe: '....', //点播pc h5的token,pc端加密必传
  ts: '...', // web加密移动端必传,pc端可不传
  sign: '...', // web加密移动端必传,pc端可不传
}

//or

// 设置type:auto请设置,vod可选,设置后在sdk调用点播播放器是会调用改方法获取相应签名来播放
vodToken: function(vid, next){
    // 拿这个vid去请求相应签名
  var res = http.get('/你的接口', {vid: vid}).done(res: function(res) {
    next({
        playsafe: res.token,
      sign: res.sign,
      ts: res.ts
    })
  })
}

autoplay?: boolean:是否自动播放,默认false ,移动端因为浏览器限制,可能不生效
audioMode?: boolean:讲师画面以音频模式播放(只在移动端生效), 默认false
controller?: boolean:是否显示控制栏, 因为设备兼容问题,在移动端中建议显示控制栏,默认true
controllerPosition?: 'ppt'|'player':控制栏显示在哪个区域 'ppt'(ppt区域)、'player'(讲师区域), 默认ppt,因为考虑兼容的问题,该设置只在桌面端生效
fixedController?: boolean:固定显示控制栏,设置后控制栏不跟随鼠标离开隐藏, 默认false,该设置只在桌面端生效
pptNav?: boolean:是否显示ppt控制控件,默认true
pptNavBottom?: string:ppt控制栏距离底部距离,例:pptNavBottom: '50px'
pptPlaceholder?: boolean:是否在直播模式并且当前暂无直播时在ppt区域显示占位图,默认false
fileId: string: ppt数据id,回放模式必填
url: string: 回放视频链接,回放模式必填
sessionId: string:回放场次id,回放模式必填
vid: string: 回放id,回放模式下传入该参数可不传fileIdurlsessionId
barrage?: boolean: 是否开启弹幕,默认 false
defaultBarrageStatus?: boolean: 播放器加载时弹幕转台是否显示开启,默认 true
switchPlayer?: boolean: 是否在控制栏显示ppt与player切换按钮,用于实现主副屏切换,需要监听player实例的'switchPlayer' 事件做处理,移动端不响应该事件,默认false
controllerEl?: HTMLElement: 控制栏区域,设置后控制栏不跟随ppt与播放器的位置,设置后点击全屏会将控制栏所在元素全屏,可以实现全屏后同时显示ppt与讲师,该设置只在桌面端生效
useH5Page?: boolean: 开启微信端H5page设置,默认为false
fullscreenEl?: HTMLELement: 可设置点击控制栏全屏按钮进入全屏的元素(仅在桌面端非IE的场景下生效),也可以使用liveSdk.player.setFullscreenEl(el?: HTMLElement): void更新设置,el为空时则使用默认值
theme?: PlayerTheme 设置部分播放器样式

interface PlayerTheme { 
  playerBackgroundImage?: string|false;  // 讲师背景图,false 去掉默认背景图
  playerBackgroundColor?: string; // 讲师背景颜色(css颜色,如'red'、'#ffffff'、'rgb(0,0,0)'),注意设置后可能被背景图遮挡, 
  pptBackgroundImage?: string; // ppt背景图 
  pptBackgroundColor?: string; // ppt背景颜色 
}

showPPTFullscreenButton?: boolean: 是否在ppt中显示全屏按钮(移动端生效),默认为false,注意:该全屏效果只是实现页面全屏,可能会与页面本身样式有冲突导致全屏时样式异常,所以开发时如果用到该功能注意看看有没有样式冲突,有的话可监听 liveSdk.player.on('PPTFullscreenChange') 事件进行调整
warmUpImg?: string: 设置暖场图片(目前只在移动端生效)

liveSdk.reloadPlayer(): void

重新加载播放器,目前支持播放器播放类型为live场景的使用,比如当前客户端没有推流,用户打开了页面,过一段时间后客户端开始推流可以调用该方法刷新播放器

liveSdk.setupPlayer({
  // ... 
  type: 'live'
  // ...
});

// 监听流状态变化刷新播放器
liveSdk.on(PolyvLiveSdk.EVENTS.STREAM_UPDATE, function() {
  liveSdk.reloadPlayer();
});

liveSdk.switchVod(sessionData: object)

换回放场次,用于切换具体播放场次视频
参数:sessionData 需要播放场次的场次数据
示例代码

// data数据是该场次数据,可通过liveSdk.getPlaybackLists(...) 获取
liveSdk.switchVod({
  fileId: data.videoId,
  url: data.url,
  sessionId: data.channelSessionId,
  // pptType: 'record' 暂存场次的回放可设置该参数
});
//or 
liveSdk.switchVod({
  vid: data.videoPoolId
});

liveSdk.getPlaybackLists(page: number, pageSize: number, type: 'playback'|'vod' = 'playback): Promise

获取回放列表
示例代码:

liveSdk.getPlaybackLists(1, 5)
.then(function(data) {
    console.log(data);
});

参数:
page: number: 页数
pageSize: number: 每页条数
type: 'playback'|'vod': 请求回放列表('playback')或点播列表'vod', 点播列表需要用点播播放器播放

liveSdk.getChapterLists(fileId: string, type: string): Promise

获取章节列表
参数:
fileId: string: ppt数据id
type: string:章节类型, playback(回放)、record(暂存)
- @return Promise

liveSdk.send(message: string, callback?: (data: string) => void): void

发送聊天消息
参数:
message: string:聊天内容

liveSdk.sendQuestion(message: string): void

向讲师发送问答私聊信息
参数:
message: string: 私聊信息

liveSdk.sendAnswer(option: string, questionId: string, callback: Function): void

发送答题卡回答内容
参数:
option: string: 答题卡答案A/ABC
questionId: string: 答题卡题目id
callback: Function: 发送成功回调

liveSdk.sendCustomMessage(messsage: object, callback?: (data: Object) => void): void

发送自定义消息,聊天室会广播这些信息,由用户自行定义数据结构
message.EVENT?: string : 自定义事件名称
message.version?: string : 自定义版本号
message.emitMode?: 0|1: 是否广播给发送人,默认为0(不广播给发送人)
message.data?: object: 自定义数据
message.tip?: string?: 自定义消息提示,默认值:发送了自定义消息

示例代码

liveSdk.sendCustomMessage({
  EVENT: 'customA',
  data: '自定义信息'
});

liveSdk.sendLike(times: number): void

发送点赞消息
参数:
times: number: 点赞数

liveSdk.getHistoryMessage(): liveSdk

获取历史聊天记录,默认10条,配合PolyvLiveSdk.EVENTS.HISTORY_MESSAGE事件使用,收到事件可忘聊天列表前面增加数据

// 点击查看更多
var more = true;
$more.on('click', function() {
  if (!more) return;
  // 消息返回后在 `PolyvLiveSdk.EVENTS.HISTORY_MESSAGE` 中返回信息
  liveSdk.getHistoryMessage();
})

// 监听历史内容更新
liveSdk.on(PolyvLiveSdk.EVENTS.HISTORY_MESSAGE, function (event, data, begin, end) {
  console.log(event, data, begin, end);
  // 渲染数据
  render(data);
  if (data.length < 10) {
    $more.text('已经没有更多历史消息');
    more = false;
  }
});

liveSdk.destroy(disconnectSocket: boolean = true): void

销毁播放器示例
参数:
disconnectSocket: bolean: 是否断开socket

liveSdk.toSign(checkinId: string, callback: Function): void

发送签到
参数:
checkinId: string: 签到id
callback: Function: 发送签到回调

liveSdk.sendQuestionnaireAnswer(questionnaireId: string, answer: [], callback: Function): void

发送问卷答案
参数:
questionnaireId: string: 问卷Id
answer: []:答案列表, 与文档 ANSWER_QUESTIONNAIRE中的result一致
callback: Function: 发送回调
示例代码:

liveSdk.sendQuestionnaireAnswer('fdp9u1x022', [
  // ...
  {
  questionId: '48e5afd460', answer: 'B'
  },
  // ...
])

liveSdk.getCloudClassRoomStatus(): Promise

仅在开启直播录制时有效(详情可咨询技术支持)
查询当前频道直播状态
示例代码:

liveSdk.getCloudClassRoomStatus()
.then(function(resp) {
  if (resp.status === 'success') {
    // liveStart(开始上课)、liveRecovery(恢复)、liveSuspend(暂停)、liveFinish(结束)
    console.log('当前直播状态为:' + resp.data.status);
  }
});

liveSdk.setNick(newName: string): void

修改昵称,可监听PolyvLiveSdk.EVENTS.SET_NICK_STATUS事件获取修改状态
示例代码:

// 调用该方法设置新的昵称
liveSdk.setNick('新的昵称');

// 监听修改状态
liveSdk.on(PolyvLiveSdk.EVENTS.SET_NICK_STATUS, function(event, resp) {
    if (resp.status === 'success') {
      // 修改成功,需要页面记录设置的昵称以便下次进来用同样的昵称
        console.log(`修改昵称成功,新的昵称为:${resp.nick}`)    
    } else {
        console.log(`修改昵称失败 ${resp.message}`)
    }
});

实例 player 对象

liveSdk.player: 调用 setupPlayer 后创建的播放器实例,可用于控制播放器播放相关交互

对象属性

liveSdk.player.currentTime: number: 当前播放的进度
liveSdk.player.duration: number: 视频时长
liveSdk.player.playbackRate: number: 当前倍速
liveSdk.player.volume: number: 当前音量
liveSdk.player.cameraStatus: boolean: 当前讲师摄像头是否被关闭
liveSdk.player.paused: boolean: 当前是否是暂停播放状态
liveSdk.player.supportFullScreen:boolean: 是否支持全屏
liveSdk.player.fullScreen:FullScreen:播放器全屏实例,里面封装了进入全屏以及退出全屏的方法,可对于页面任意DOM操作
liveSdk.player.lines: number:当前频道有多少条线路,需要在loadedmetadata时间后访问
liveSdk.player.line: number:当前播放的线路 0/1
liveSdk.player.currentPPTPage: number:当前展示的ppt页码,若当前显示PDF或者白板则返回1
liveSdk.player.totalPPTPages: number: 当前使用的ppt总页数,若当前使用PDF或者白板则返回1
liveSdk.player.barrageStatus: boolean:当前弹幕状态
liveSdk.player.levels: number: 当前的码率数移动端暂不支持
liveSdk.player.level: number: 当前的清晰度,0/1/2递增,如果频道只有一个码率则返回0,移动端暂不支持

#####全屏示例说明
liveSdk.player.fullScreen.request($dom: HTMLElement): void:将指定元素进入全屏状态移动端中只在video中生效,具体需要看浏览器支持度
liveSdk.player.fullScreen.exit(): void:退出全屏状态

对象方法

liveSdk.player.setVolume(volume: number): void: 设置播放器音量,范围[0, 1]
liveSdk.player.play(): void:恢复播放视频
liveSdk.player.pause(): void:暂停播放视频
liveSdk.player.togglePlay(): void:交替恢复暂停播放视频
liveSdk.player.resize(): void:刷新ppt尺寸,播放期间如果对ppt容器尺寸有改变ppt尺寸可能异常,在改变尺寸后调用该方法恢复正常尺寸
liveSdk.player.seek(time:number): void:请求到指定播放进度
liveSdk.player.setRate(rate: number): void:切换倍速,可选0.5、1、1.25、1.5、2 (移动端受设备限制,不支持切换倍速)
liveSdk.player.switchCamera(hide: boolean): void:关闭或显示讲师摄像头
liveSdk.player.switchLine(line: number): void:切换当前线路,line由number 0递增,代表线路1、线路2...
liveSdk.player.switchPPTDocMode(control: boolean): boolean:直播时切换ppt模式,设置true ppt可由用户自己控制ppt内容,不跟随客户端控制(自由模式),反之。调用返回是否切换成功(跟随模式)
liveSdk.player.nextPPTPage(): void 使ppt切换到下一页,跟随模式下不能切到讲师未讲解的ppt
liveSdk.player.prevPPTPage(): void 使ppt切换到上一页
liveSdk.player.sendBarrage(text: string, color: string): void: 发送弹幕text为弹幕内容,color为弹幕颜色,如'#ffffff';
liveSdk.player.hideBarrage(): void: 隐藏弹幕
liveSdk.player.showBarrage(): void: 恢复弹幕显示
liveSdk.player.toggleBarrage(): void: 交替隐藏弹幕
liveSdk.player.resizeBarrage(): void: 刷新弹幕尺寸,播放器尺寸更新时调用
liveSdk.player.switchLevel(level: number): 切换清晰度,由0 递增
liveSdk.player.changePPTNavVisible(hide: boolean): 隐藏显示PPT翻页控件
liveSdk.player.setFullscreenEl(el?: HTMLElement): void: 更新全屏元素设置,el为空时则使用默认值

对象事件

playing: 恢复播放
pause: 暂停播放
timeupdate: 播放进度更新
loadedmetadata: 视频加载成功可以准备播放,可对播放器进行play()、pause()等操作
ended:播放结束
ratechange:倍速改变
volumechange:音量改变
lineChanged:线路改变
barrageStatusChange: 弹幕状态改变,返回true(开启弹幕)、false(关闭弹幕)
switchPlayer: 点击控制栏切换按钮触发,可用于切换ppt与讲师位置,切换样式需自身去实现
levelChanged: 清晰度改变,返回切换后清晰度

liveSdk.player.on('lineChanged', function(line) {
  console.log(line); // 0/1...
});

error:视频播放错误
switchMainScreen:切换主副屏播放器回调,初始化播放器时会收到一次回调是当前初始值

liveSdk.player.on('switchMainScreen', (main) => {
    console.log('切换主讲位置,当前主屏为', main); // 'player'|'ppt'
  })

mutedAutoplay:静音自动播放回调,因为受限于浏览器自动播放策略,在不支持自动播放的时候会采取静音自动播放策略,这时会触发该事件,可用于对用户进行相应提示,让用户恢复音量

示例代码

liveSdk.player.on('playing', function() {
  console.log('恢复播放');
});
liveSdk.player.on('pause', function() {
  console.log('暂停播放');
});
PPT操作相关事件

whiteboardOpened: 讲师打开白板
whiteboardClosed: 讲师关闭白板,恢复为PPT
pptStatusChange: ppt状态改变,包括当前页数改变(ppt更换、ppt与白板切换 ),翻页,注意白板状态时不能翻页
示例代码

liveSdk.player.on('pptStatusChange', function(data) {
  /*
  {
    page: 3,  // 当前是第几页
    total: 30, // 当前ppt总页数
    type: 'ppt' // ('ppt'|'whiteboard') 当前显示类型,ppt或白板
  }
  */ 
  console.log(data);
});

PPTFullscreenChange: ppt全屏状态变化,设置showPPTFullscreenButton: true后才会触发
示例代码

liveSdk.player.on('PPTFullscreenChange', function(fullscreen) {
  console.log(fullscreen ? '进入ppt全屏' : '退出ppt全屏');
});
弹幕使用说明
  • 需要自行监听聊天室的聊天消息事件,并调用liveSdk.player.sendBarrage方法发送弹幕
  • 弹幕显示在控制栏所在播放器,移动端固定显示在讲师画面那里
  • 若播放器尺寸发生变化需要调用liveSdk.player.resizeBarrage()刷新弹幕

实例事件

事件方法

liveSdk.on(event: string, func: Function)

事件监听方法
event: string: 绑定事件名称
func: (event: string, data: object): void:事件回调函数

liveSdk.once(event: string, func: Function)

绑定事件,只触发一次
event: string: 绑定事件名称
func: (event: string, data: object): void:事件回调函数

liveSdk.off(event: string, func: Function)

解除事件绑定
event: string: 绑定事件名称
func: Function: void:事件回调函数

liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, function(event, data){});

事件列表

PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT(event: string, data: ChannelDetail)

  • 频道信息获取完成
  • data为频道信息
    carbon (2)

PolyvLiveSdk.EVENTS.PLAYBACK_INIT(event: string, data: object)

  • 回放章节初始化完成
  • data: 场次数据
{
    sessionId: '123',
    fileId: '123'
  }

PolyvLiveSdk.EVENTS.STREAM_UPDATE(event: string, status: 'live'|'end')

  • 流状态更新,可用来判断当前有无直播在推流
  • status (live|end)

PolyvLiveSdk.EVENTS.SPEAK(event: string, data: object)

  • 非本人的用户发言
  • data:聊天信息
    ```javascript
    {
    EVENT: 'speak',
    content: 'test', // 聊天具体内容
    currentUser: false, // 是否为当前用户
    custom: false, // 是否是自定义消息
    formatTime: '2019-07-02 14:12',
    id: '65975130-9c90-11e9-94b0-fd61e3983999', // 消息id
    reward: false,
    time: 1562047960506,
    user: { // 用户信息
    banned: false,
    channelId: '275682',
    clientIp: '61.144.146.199',
    nick: 'polyv',
    pic: '//livestatic.videocc.net/v_314/assets/wimages/missing_face.png',
    roomId: '275682',
    sessionId: 'f8qnsda4zq',
    uid: 'Ph4UtYfnxQo7pZK6AkbP',
    userId: '1562047951865',
    userType: 'slice',
    }
    }

### `PolyvLiveSdk.EVENTS.SEND_MESSAGE(event: string, data: object)` - 本人的发言 - data: 与`PolyvLiveSdk.EVENTS.SPEAK`一致 ### `PolyvLiveSdk.EVENTS.S_QUESTION(event: string, data: object)` - 发送提问消息回调 - data:提问数据 ```javascript { EVENT: 'S_QUESTION', content: '1+1=多少', currentUser: true, custom: false, reward: false, roomId: '275682', user: { // ... 用户信息 } }

PolyvLiveSdk.EVENTS.T_ANSWER(event: string, data: object)

  • 管理员或讲师回答提问
  • data:回答的数据
{
  EVENT: 'T_ANSWER'
  content: '等于2'
  roomId: '275682'
  s_userId: '1559030433536', // 被回答用户id
  user: {
    // ... 用户信息
  }
}

PolyvLiveSdk.EVENTS.CUSTOM_MESSAGE(event: string, data: object)

  • 收到自定义消息
  • data:具体数据结构由用户自行定义

PolyvLiveSdk.EVENTS.REMOVE_HISTORY

  • 清除聊天记录,页面可收到该消息后清除页面聊天内容

PolyvLiveSdk.EVENTS.REMOVE_CONTENT(event: string, data: object)

  • 清除某一条聊天信息,页面可收到该消息后清除相应聊天内容
  • data:被删除消息内容
{
  EVENT: 'removeContent',
  id: '65975130-9c90-11e9-94b0-fd61e3983999', // 被删除消息的id
  roomId: '275682'
}

PolyvLiveSdk.EVENTS.HISTORY_MESSAGE(event: string, data: object)

  • 获取历史聊天信息完成
  • data:历史聊天信息,内容为speak事件内容组成的数组

PolyvLiveSdk.EVENTS.PROHIBIT_TO_SPEAK

  • 发言失败,可能由于聊天室为连接但发送聊天消息等发送错误触发

PolyvLiveSdk.EVENTS.ADD_SHIELD

  • 当前用户被禁止发言

PolyvLiveSdk.EVENTS.REMOVE_SHIELD

  • 当前用户被恢复发言

PolyvLiveSdk.EVENTS.LOGIN(event: string, data: object)

  • 频道内用户登录事件
  • data: 用户信息
// 用户加入信息
{
  EVENT: 'login',
  onlineUserNumber: 3,
  timeStamp: 1562051459569,
  user: {
    // 用户信息
  }
}

PolyvLiveSdk.EVENTS.LOGOUT(event: string, data: object)

  • 频道内用户退出事件
  • data: 用户信息
{
  EVENT: 'loginOut',
  channelId: '275682',
  onlineUserNumber: 2,  //当前在线人数
  roomId: '275682',
  timeStamp: 1562051345281,
  uid: 'LVexVHpKvK0KOU_0Ak4L',
}

PolyvLiveSdk.EVENTS.LOGIN_REFUSE(event: string, data: object)

  • 频道内有用户被踢出房间,包含用户以及本身
  • data: 被踢用户数据
{
  EVENT: 'LOGIN_REFUSE',
  data: {referField: '1559030433537', type: 'userId'}
}

PolyvLiveSdk.EVENTS.SIGN_IN(event: string, data: object)

  • 收到讲师发起签到消息
  • 可调用 liveSdk.toSign 方法发送签到
  • 签到数据
{
  EVENT: 'SIGN_IN',
  data: {
    checkinId: '07ff9330-9c99-11e9-8aa1-37da87', // 签到id
    createTime: 1562051668963,
    limitTime: '30', // 签到时间,页面需要根据这个时间显示倒计时,结束后不允许再签到
    message: '各位同学开始签到了' // 签到提示文案
  }
  roomId: '275682'
}

PolyvLiveSdk.EVENTS.STOP_SIGN_IN

  • 收到讲师停止签到消息,收到后不允许发送签到

PolyvLiveSdk.EVENTS.BULLETIN

  • 收到公告消息
  • data:公告消息
{
  EVENT: 'bulletin',
  content: '公告内容'
}

PolyvLiveSdk.EVENTS.REMOVE_BULLETIN

  • 删除公告消息

PolyvLiveSdk.EVENTS.START_QUESTIONNAIRE(event: string, data: object)

  • 收到问卷消息, 回答后可使用liveSdk.sendQuestionnaireAnswer 方法发送答案
  • data: 问卷内容
  • 问卷消息内容,与polyv 聊天室 START_QUESTIONNAIRE 事件数据一致 查看

PolyvLiveSdk.EVENTS.STOP_QUESTIONNAIRE

  • 讲师停止问卷
  • data: 消息内容

PolyvLiveSdk.EVENTS.GET_TEST_QUESTION_CONTENT(event: string, data: object)

  • 答题卡: 获取问题内容
  • data: 答题卡消息,可查阅 文档 答题卡部分

PolyvLiveSdk.EVENTS.GET_TEST_QUESTION_RESULT

  • 答题卡: 获取答题结果

PolyvLiveSdk.EVENTS.STOP_TEST_QUESTION

  • 答题卡: 停止答题

PolyvLiveSdk.EVENTS.ON_PAUSE_RECORD

  • 直播录制暂停(课间休息)

PolyvLiveSdk.EVENTS.ON_START_RECORD

  • 恢复录制(休息结束,恢复直播)

PolyvLiveSdk.EVENTS.ON_EXIT_RECORD

  • 退出录制(下课)

PolyvLiveSdk.EVENTS.FINISH_CLASS

  • 讲师点击下课按钮下课

PolyvLiveSdk.EVENTS.SET_NICK_STATUS

  • 修改昵称状态回调

PolyvLiveSdk.EVENTS.LIKES(event: string, data: object)

  • 点赞事件
  • data: 用户信息
// 用户加入信息
{
  EVENT: 'LIKES',
  count: 1, // 收到点赞数
  nick: '用户123', // 用户昵称
  userId: '1234567', // 用户id
  user: {
    // 用户信息
  }
}

示例代码

请前往 Github 查看。(注: 目前的示例代码为beta版本)

兼容性说明

  • 支持主流现代浏览器chrome、firefox、safari等
  • 支持 >= IE9
  • 支持移动端
  • IE以及低版本chrome(<49)使用flash播放
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

微信观看小程序SDK(推荐)

产品介绍

概述

POLYV微信观看小程序SDK以组件的方式提供了直播播放、点播播放、文档绘制等功能,供用户灵活组合自己的业务逻辑。

功能特性

功能 表述
视频 支持直播视频和点播视频观看,暂不支持点播加密视频
文档 PPT、白板以及画笔展示,暂不支持动效PPT
连麦 支持1V4语音和视频连麦功能(连麦需要开通live-player和live-pusher组件)
聊天 支持在线文本表情聊天

阅读对象

本文档为技术文档,需要阅读者:
- 拥有基本的小程序开发能力
- 准备接入polyv视频云或已接入的客户
- 对polyv视频云使用方法有基础的了解

使用步骤

开发准备

获取Access Key

登录保利威直播后台 - 云直播 - 开发设置 - 身份认证

微信接口白名单配置

request合法域名
https://miniapp.agoraio.cn
https://uni-webcollector.agora.io
https://router.polyv.net
https://api.polyv.net
https://prtas.videocc.net
https://rtas.videocc.net
使用连麦功能需加上以下域名:
https://miniapp-1.agoraio.cn
https://miniapp-2.agoraio.cn
https://miniapp-3.agoraio.cn
https://miniapp-4.agoraio.cn

socket合法域名
wss://chat.polyv.net
wss://miniapp.agoraio.cn

配置微信直播权限

sdk播放直播使用了微信live-player,需要先通过类目审核,再在小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。

SDK使用方法

sdk提供了自定义组件polyv提供一套完整的业务逻辑,供用户开箱即用。也提供了player播放组件、ppt文档组件、chatroom聊天室组件等供用户灵活组合自己的业务逻辑。

在使用之前需要在app.js的onLaunch中调用setApp方法

方法一(推荐):传入verifyUrl验证接口

import plv from '*/polyv-sdk/index';
onLaunch() {
    plv.setApp({
        apiId: '',
        verifyUrl: ''
    });
}

verifyUrl校验接口详情参考demo

方法二:传入polyv云直播的access key

由于在小程序代码中apiSecret是明文显示,存在小程序被反编译风险。故建议使用方法一

import plv from '*/polyv-sdk/index';
onLaunch() {
    plv.setApp({
        apiId: '',
        apiSecret: ''
    });
}

组件的使用

一、使用polyv组件。可参考demo的watch
  1. 拷贝sdk代码到自己的项目中,在使用到sdk的page的json文件中引入组件

    {
     "usingComponents": {
       "polyv": "*/polyv-sdk/components/polyv/polyv"
     }
    }
    
  2. 在wxml中使用polyv组件
    <view>
    <polyv />
    </view>
    
  3. 在页面的onload中调用init方法,在onUnload中调用destroy方法

    init方法初始化观看,获取频道详情、初始化socket事件等。

    import plv from '*/polyv-sdk/index';
    // onLoad
    onLoad() {
       const options = {
         channelId: '', // 频道ID
         openId: '', // 用户openId
         userName: '', // 用户名
         avatarUrl: '' // 用户头像
         userid:""//2.0.0及以上版本的demo需要使用userid设置学员唯一id
       };
       plv.init(options);
    }
    // onUnload
    onUnload() {
      plv.destroy();
    }
    
二、灵活组合组件。可参考demo的watch2
  1. 在使用到sdk的page的json文件中引入组件

    {
     "usingComponents": {
       "player": "*/polyv-sdk/components/player/player",
        "ppt": "*/polyv-sdk/components/ppt/ppt",
        ...
     }
    }
    
  2. 在wxml中使用组件,传入必要的参数。
    <view>
    <player
        videoOption="{{ videoOption }}"
           bind:onLiveStatusChange="playerLiveStatusChange"
       />
    <ppt />
    </view>
    
  3. 在页面的onload方法中调用init方法。
    import plv from '*/polyv-sdk/index';
    Page({ 
       onLoad() {
           const options = { ... };
           plv.init(options)
               .then(data => {
                const { detail, chat } = data;
                   // 处理业务逻辑
               })
               .catch(err => {
                // 异常处理
               });
       },
       onUnload() {
           plv.destroy();
       }
    });
    

组件详解请参考demo中doc文件

demo

demo下载地址

FAQ

  • 使用Polyv组件需要注意什么?
    (1)不要在自定义组件中执行wx.navigateTo等跳转到pages页面。因为该情况下polyv下的player自定义组件attached/detached触发异常,导致观看日志数据异常。

change log

2.1.1

更新时间: 20201204
- 支持显示问卷结果
- 其他问题修复

2.1.0

更新时间: 20201118

Features

  • 完善sdk单独集成互动功能组件文档、增加demo(watch2)

2.0.7.1

更新时间: 20201009

bugfix

  • 修复video组件下ppt画笔不显示问题

2.0.7

更新时间: 20200929

bugfix

  • 修复ppt画笔不显示问题

2.0.6

更新时间: 2020.09.11

Features

  • 互动数据增加param4和param5

2.0.5

更新时间:2020.08.11

Features

  • 修复全屏观看直播,直播结束后观看端显示异常

2.0.4

更新时间:2020.07

Features

  • 聊天室角色登录增加token鉴权
  • 增加是否显示播放器弹幕和播放器皮肤组件参数(详情和示例请参考项目内部文档)
  • 项目内部文档更新
  • 其他问题修复

2.0.0

更新时间: 2020.06

Features

  • 支持1V4连麦
  • 增加播放器皮肤(暂停、刷新、多线路、全屏)
  • 增加弹幕功能
  • 增加回放倍速播放
  • 增加问卷功能

1.2.0

Features

  • 兼容云课堂客户端激光笔、箭头功能
  • 修改翻页按钮和页面显示ui
  • 增加ppt文档和播放器位置切换按钮
  • 增加ppt全屏和横屏功能
  • 小程序支持聊天室多房间

1.1.0

Features

  • 增加video组件直播选项

  • 增加答题卡、公告、签到、限制播放、白天皮肤功能

  • 新增回放列表&点播列表

  • 新增SDK初始化参数选项 verifyUrl

Performance Improvements

  • 优化PPT动态时延处理

  • 修改聊天室禁言及踢人操作

1.0.0

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

直播观看小程序开发

播放界面


开发前准备

1.小程序微信开发者后台设置-开发设置-服务器域名中配置 [request合法域名]


开始开发


1.获取频道直播播放地址

index.wxml

<view class="video-box">
    <live-player id="polyvLiveVideo" class="vp-v" src="{{video.src}}" autoplay></live-player>
</view>

index.js

//引用polyvlive.js
import polyvLive from '../../utils/polyvlive.js';

//设置频道信息
var liveUid = "e3wx706i3v";
var liveVid = "103915";
var liveVideoContext = wx.createLivePlayerContext('polyvLiveVideo');

polyvLive.getVideo({
    uid: liveUid,
    vid: liveVid,
    videoContext: liveVideoContext,
    success: (videoInfo) => {
      // set video src and poster
      this.setPlayerSrc(videoInfo);
    },
    error: (res) => {
      //console.log(res.error);
    },
    onStartLive: ()=>{
      // set latest video src
      this.setNewPlayerSrc();
    }
});

setNewPlayerSrc() {
    polyvLive.getNewVideo((videoInfo)=>{
        this.setPlayerSrc(videoInfo);
    });
}

setPlayerSrc(videoInfo) {
    this.setData({
        video: {
            src: videoInfo.flvSrc,
            poster: videoInfo.poster
        }
    });
}

选项说明

uid

类型:String
说明:直播账户id

vid

类型:String
说明:直播频道id

videoContext

类型:String
说明:视频组件控制,详情查看

params

类型:object
说明:播放日志参数,可设置值并且直播后台观看日志查询中显示对应字段名称如下

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

success(videoInfo)

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

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

参数 参数说明
src 视频m3u8播放地址,获取成功后设置为video组件的src
flvSrc 视频flv播放地址,获取成功后设置为live-player组件的src
poster 视频封面
title 视频标题
waitImage 暖场图片/暖场视频,以返回链接后缀判断图片/视频类型
logoImage logo图片地址
logoHref logo的点击跳转链接
logoPosition logo位于播放器位置
logoOpacity logo透明度

error(res)

类型:Function
说明:获取视频信息失败时触发

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

参数 参数说明
code 错误状态码
error 错误详细说明

onApiStatus(status)

类型:Function
说明:获取视频直播/结束状态

参数:status
参数类型:String
参数说明:

参数 参数说明
live 直播正在进行
end 直播结束

onStartLive ()

类型:Function
说明:直播从结束状态切换至开始状态触发

2.绑定播放进度变化
//事件处理函数
timeUpdate: function(e) {
    //bind timeUpdate Event
    polyvLive.timeUpdate(e);
}

ps:注意播放进度绑定事件中e参数为必须项 (若使用live-player组件则不需绑定)

3.销毁播放器
//页面处理函数
onUnload() {
    polyvLive.destroy();
}

注意事项

使用live-player组件有类目限制,需要先通过类目审核
1536218165(1)
然后需要在小程序管理后台,“设置”-“接口设置”中自助开通该组件权限
1536218076(1)

sdk默认使用live-player组件,使用flv拉流地址

setPlayerSrc(videoInfo) {
    this.setData({
      video: {
        src: videoInfo.flvSrc, // videoInfo.flvSrc返回flv地址
        poster: videoInfo.poster
      }
    });
  }

如果所用小程序组件为video,则需要设置播放地址为m3u8

<view class="video-wrap">
    <view class="video-box">
        <video id="polyvLiveVideo" class="vp-v" src="{{video.src}}" controls autoplay></video>
    </view>
</view>
setPlayerSrc(videoInfo) {
    this.setData({
      video: {
        src: videoInfo.src, // videoInfo.src返回m3u8地址
        poster: videoInfo.poster
      }
    });
  }

小程序直播sdk下载

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