soc-web-player-sdk v1.0.2

IvsWebPlayer

介绍

基于华为视屏云平台的网页播放器插件，前端组件主要基于vuejs框架封装的umd风格的插件包，

软件架构

支持华为视频云平台ivs 3000、ivs3800、ivs 1800，暂时不支持其它平台。后续可能会扩展其它厂商

安装教程

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm install ivs-web-player --save

CDN

目前可以通过 leiyangc gitee 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="./ivs-web-player.css">
<!-- 引入组件库 -->
<script src="./ivs-web-player.min.js"></script>

本组件是基于vuejs开发如果您当前是cdn引入时最好cdn的方式引入vue.js

使用说明

main.js

import "ivs-web-player/lib/ivs-web-player.css";
import IvsWebPlayer from "ivs-web-player";

Vue.use(IvsWebPlayer);

vue 页面

插槽：底部工具栏插槽，可自定义播放器窗口底部内图标及文字信息

<template #toolSlot>

<template>
  <div class="home">
    <div class="player-container">
      <ivs-web-player :conf="config">
        <template #toolSlot>
          我是一个底部自定义插槽
        </template>
      </ivs-web-player>
    </div>
  </div>
</template>
<script>
 export default {
  name: "Home",
  components: {},
  data() {
    return {
      config: {
        ip: "xx.xx.xx.xx",
        userName: "xx",
        password: "xx@xx",
        port: 9900,
        theme:{
          primaryColor: 'rgba(20,121,241,1)',
          fontColor: 'rgba(255,255,255,0.7)'
        }
      },
    };
  },
};
</script>

属性

事件

config 对象

theme 对象

方法

param 对象

query 对象

注意：录像存储的时间节点为utc（零时区的时间）与当前用户所在时区有时差，根据当前时区去换算成零时区的时间节点传入。

示例

<template>
  <div id="app" class="app">
    <div class="app__header">IVSWEB播放器插件DEMO</div>
    <div class="app__content">
       <ivs-web-player ref="player" :conf="config"></ivs-web-player>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      player: null,
      downloadUrl: '',
      config: {
        ip: 'xx.xx.xx.xx',
        userName: 'xxx',
        password: 'xx@xx',
        port: 9900
      }
    };
  },
  mounted() {
    this.player = this.$refs.player;
  },
  methods: {
    startLiveVideo() {
      const camera={code='',name=''}
      this.player.playLive(param).then(res => {
        console.info('实况播放返回信息：', res);
      });
    },
    startRecVideo() {
      const camera={code='',name=''}
      this.player.playRec(camera).then(res => {
        console.info('录像回放返回信息', res);
      });
    }
  }
};
</script>

客户端插件补充说明

播放器组件会自动检测插件是否安装，以及插件的启动状态提示，请您参照提示进行操作即可。

ps:当前插件版本还处于测试阶段，软件已加入license ，需要作者进行许可授权，方可使用。联系电话：15724877571

版本更新

版本发行