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

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

保利威：

保利威帮助中心

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导播台多画面使用实测
• 软件导播台多画面切换支持多人连麦实测（实测组图）