企业直播界面标准化布局如何轻松呈现？

保利威直播

于 2023-05-22 16:49:52 发布

阅读量160

点赞数

分类专栏：企业直播直播WebSDK 文章标签：实时音视频音视频 javascript

本文链接：https://blog.csdn.net/sinat_33049251/article/details/130808118

版权

直播WebSDK 同时被 2 个专栏收录

22 篇文章

订阅专栏

企业直播

13 篇文章

订阅专栏

直播界面布局呈现

今天来介绍一下，如何从【直播画面呈现】入手，打造高颜值、高品质的视频连线效果。

人名条、品牌LOGO、问题条、嘉宾背景以及字体像素大小都会直接影响到视频连线画面的观感，从而影响到整体的美观度。但是，如果让企业为每一次视频连线都进行一次“个性化设计”，无疑会带来很多设计成本，而且对一些不常用的元素也很难兼顾到位。

针对这一难题，我们准备了一套【标准化的视频连线布局模板】，能很好地支撑多人连麦场景，满足企业开展日常业务的需求。我们在客户端产品默认自带这种布局模版，一键选定即可实现布局的设定。

▲视频连线布局模板

例如，在专家对谈、行业研讨、产品发布等场景中，企业可将模板一键复用，仅需更改文本信息，就能直接对外使用，大大提升业务开展效率。

直播快速集成代码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>

我的文章推荐：