第三方直播云平台（保利威和阿里云）直播集成文档整理。

保利威：

保利威帮助中心

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>

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;

播放器API（播放器属性）

参数名	类型	默认值	说明
wrap	string / HTMLElement	-	页面上存在需要载入播放器的DOM元素或css选择器
width	number / string	100%	播放器的宽度
height	number / string	auto	播放器的高度
uid	string	-	用户id，即账号信息中的userId
vid	string	-	频道id
coverImg	string	-	自定义暖场图
autoplay	boolean	-	是否自动播放，默认跟随直播后台设置。注意：自动播放失败PC、移动端均有可能不成功，原因查看常见问题-自动播放
isAutoChange	boolean	false	自动切换直播/回放(最新直播暂存)
vodsrc	string	-	回放视频的播放链接url
hasControl	boolean	false	是否显示控制栏预设皮肤。为false则使用各浏览器默认皮肤。注意：仅支持移动端。由于系统浏览器劫持，强制使用该浏览器默认皮肤，部分浏览器设置皮肤不生效。
skin_type	string	-	皮肤样式：设置'black'使用深色皮肤。注意：仅支持移动端
language	number	0	播放器语言，0为中文，1为英文
df	number	-	多码率默认视频清晰度,0 标清,1 高清,2 超清
banMultirate	boolean	false	禁用多码率功能
banMuteTips	boolean	false	隐藏静音提示, 详细查看常见问题-自动播放-静音播放注意：仅支持PC端
banRightMenu	boolean	false	是否禁用右键菜单
banRate	boolean	false	禁用倍速功能
danmuEnable	boolean	false	为true开启弹幕，需要配合后台开关
showDanmu	boolean	-	是否显示弹幕
banDanmuBtn	boolean	-	禁用弹幕按钮
skinConfig	object	-	皮肤设置 streamStop: 直播流停止时显示的图片地址 streamStopTxt: 直播流停止时显示的文本 streamPause: '直播流暂停时显示的图片地址 bgColor: '背景颜色 playBtnImg: 播放按钮图片地址 showPlayBtn: 是否显示播放按钮 showFullScreen: 是否显示全屏按钮 showProgress: 是否显示进度条
webPageFullScreen	boolean	false	是否使用网页全屏注意：仅支持移动端
fullScreenOrientation	string	landscape\|none	网页全屏方向注意：仅支持移动端

播放器API（播放器接口）

接口名	参数	回调参数	说明
j2s_resumeVideo			播放视频
j2s_pauseVideo			暂停视频
j2s_stopVideo			停止播放
j2s_seekVideo	time:number		视频(回放)指定位置播放
j2s_setVolume	volume:number		设置播放器声音，取值0-1
j2s_getCurrentTime		time:number	获取视频当前时间
j2s_showBarrage			开启弹幕
j2s_hideBarrage			隐藏弹幕
j2s_addBarrageMessage	data:Object		发送弹幕，详情查看功能使用说明 - 弹幕
j2s_changeLevel	hd:number		0/1/2 流畅/高清/超清
j2s_changeRate	rate:number		1.0/1.25/1.5/2.0
changeLine(line)	line:number		0/1 线路1/线路2

阿里云：

引入Web播放器SDK，官网：快速接入_视频点播-阿里云帮助中心

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

方法一：CDN方式引入
- 引入自适应模式的js文件
  
  该js文件同时包含了Flash和H5跨终端自适应的逻辑。引入该js文件后，播放器SDK会自行适配播放模式。在项目前端页面文件中的<head>标签处引入Web播放器SDK的JS文件和CSS文件，示例如下：
```
<head><link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />  //（可选）如果您的使用场景需要用到H5模式的播放器，则需引用此css文件。<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js"></script>  //（必须）引入js文件。
</head>
```
  说明引入自适应模式的js文件后，如需自定义播放模式，设置useFlashPrism=true表示Flash模式，设置useH5Prism=true表示H5模式。
- 引入单模式的js文件
  
  如果您只是想使用其中一种播放技术，也可以只引用对应技术的js文件，从而获得更小的文件体积。
- H5模式，在项目前端页面文件中的<head>标签处引入Web播放器SDK的JS文件和CSS文件，示例如下：
```
<head><link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />  //（必须）H5模式播放器，需引用此css文件。<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script>  //（必须）引入H5模式的js文件。
</head>
```
  Flash模式，在项目前端页面文件中的<head>标签处引入Web播放器SDK的JS文件，示例如下：
```
<head><script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-flash-min.js"></script>  //（必须）引入Flash模式的js文件。
</head>
```
  方法二：npm方式引入
- 提供挂载元素。
  
  在<body>标签处添加一个用以挂载播放界面的<div>节点，示例如下：
```
<body><div id="J_prismPlayer"></div>
</body>
```
- 实例化播放器。
  - Web播放器SDK支持2种直播播放方式，URL播放和加密播放。各播放方式的代码示例请参见直播视频播放。
  在<script>标签中添加如下示例代码：

使用URL播放方式播放直播视频，需要将播放器的source属性设置为直播拉流地址，同时将isLive属性设置为true。播放地址可以是第三方直播地址或阿里云直播服务中的拉流地址。阿里云直播拉流地址可以通过直播控制台的地址生成器生成。详情请参见阿里云直播地址生成器。

直播URL播放示例

<script>var player = new Aliplayer({id: 'J_prismPlayer',source: '<your play URL>',//播放地址，可以是第三方直播地址，或阿里云直播服务中的拉流地址。isLive: true,//是否为直播播放。},function(player){console.log('The player is created.')});
</script>

RTS URL播放示例

<script>
var player = new Aliplayer({id: 'J_prismPlayer',source: '<your play URL>',//播放地址，使用超低延时直播（RTS）地址，协议是artc://。rtsFallbackSource: '<your play URL>',//（可选）RTS的降级地址（如HLS地址或FLV地址）。isLive: true,//是否为直播播放。// rtsVersion: 'x.x.x', //可以手动指定RTS SDK的版本。
},function(player){console.log('The player is created.')
});
//当RTS降级时触发，参数reason为降级的原因，fallbackUrl为降级到的地址。
player.on('rtsFallback', function(event) {console.log(' EVENT rtsFallback', event.paramData);
})
</script>

MR虚拟直播

MR直播实例(混合现实直播)高品质企业直播
企业年会直播来个虚拟舞台场景如何？
MR直播(混合现实直播)做一场高品质企业培训
MR场景直播-帮助企业高效开展更有意思的员工培训
企业多会场视频直播（主会场、分会场直播）实例效果
虚拟直播（虚拟场景直播）要怎么做？

无延迟直播

无延时直播/超低延时直播画面同步性测试（实测组图）
搞定企业视频直播：硬件设备、直播网络环境和设备连接说明
无延时/无延迟视频直播实例效果案例
OBS无延迟视频直播完整教程（组图）
毫秒级超低延时直播产品实测（PRTC直播/webRTC直播）

视频加密与安全

企业培训视频如何防止被下载和盗用？
在线教育机构视频加密防下载和防盗用的方法有哪些可以借鉴
上新：视频加密功能增加防录屏(随机水印)功能
两种实现视频倍速播放的方法（视频播放器倍速1.5x/2x）
教育培训机构教学课程内容视频加密是如何做的？

在线导播台

在线导播台（网页导播台）混流效果
OBS Studio导播台多画面使用实测
软件导播台多画面切换支持多人连麦实测（实测组图）

第三方直播云平台（保利威和阿里云）直播集成demo相关推荐

阿里云、保利威的点播有什么区别，哪个更好？
谢邀,居然碰到个咨询云服务的知友哈哈,有缘就答了互联网教育从业者,二线城市,开了家线上小培训公司,接触和使用过阿里云和保利威视频云,目前公司点播直播保利威和阿里两边都有用. 简单了解楼主情况,我这人 ...
职教视频云：保利威、百家云与巨头对垒
配图来自Canva可画作为当下备受青睐的转型赛道之一,职业教育正在开启新的发展窗口,结合直播来打造玩法更多.互动更全的云课堂成为了众多职业教育玩家抢占先机的竞争高地. 面对职业教育线上化趋势,越来越 ...
“影视级”直播呈现，保利威1号演播厅与企业共建行业直播新标准 | 爱分析调研
前言:3月22日,保利威举办了2023春季线上发布会,推出首个企业级直播基地--"1号演播厅".会上重磅发布了<2023中国企业直播应用标准>并启动"企业直播 ...
阿里云，腾讯云，保利威视，金山云，七牛云的视频云方案的不同之处。
前几年,国内的视频云竞争确实超级火爆,以公共云为代表的阿里云.腾讯云等大力投入视频云研发及市场推广,都取得了不错的成绩:金山云.七牛云等也纷纷推出了自家的视频云平台. 阿里云由于初期承诺只做底层,而视 ...
【科创人独家】保利威董事长谢晓昉：不做无效直播，帮助企业打通直播营销全链路
保利威是国内视频云行业的领导品牌,专注企业直播.点播,成立多年以来深耕在线教育和企业培训领域,服务过包括中央电视台.建设银行.工商银行.彭博社.太平洋保险.新东方.好未来.中信证券等知名企业在内,多达 ...
保利威助力2022东亚海洋合作平台青岛论坛直播成功举办
保利威助力2022东亚海洋合作平台青岛论坛直播成功举办! 6月21日-23日,由自然资源部.山东省人民政府主办的2022东亚海洋合作平台青岛论坛隆重举办,来自全球的近400位嘉宾.1000多家企业参会 ...
技术赋能教育直播，保利威玩转“5G+AI”
更多精彩内容请关注我们俗话说,人无远虑,必有近忧. 直播作为在线教育的重要手段之一,近几年在我国快速崛起,2018年出现了一个发展高潮.无论是1对1还是1对多,也无论职业教育还是传统的管理培训,在线 ...
讲好元宇宙故事保利威开启MR直播新时代
关注云报洞察深一度一位女士,眼中充满好奇,身体却稍显犹豫,最终还是坐在了绿幕为背景的双人沙发上,不知道接下来会发生什么? 另一边,一个工作人员好像在机器前调试着什么,瞬间一块显示屏上"神 ...
保利威Service+战略发布会「服务+技术」开启私域直播新纪元
植物生长离不开营养元素的供给,只有当肥料与水充分地「溶合」,才能被植物所吸收,茁壮成长. 在围绕技术+服务构建起来的SaaS体系中,这个道理同样适用. 3月22日,保利威Service+战略发布会如期 ...

第三方直播云平台（保利威和阿里云）直播集成demo