第三方直播云平台（保利威和阿里云）直播集成demo网站首页 技术杂谈

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

阿酷tony 2024-06-17 10:29:51

简介第三方直播云平台（保利威和阿里云）直播集成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>