数字生活小程序
小程序
介绍开发设计运营

LivePlayer 直播播放器 APP
该方法或组件支持移动端小程序调用
 PC
该方法或组件支持桌面端小程序调用

视频直播播放器

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import { LivePlayer } from '@21cnfe/vui'
Vue.component('LivePlayer', LivePlayer)

代码演示

LivePlayer 直播播放器 livePlayer
基本用法： 
<div class="player_cpntainer">
  <p class="name">1宫格</p>
  <div class="box">
    <live-player class="player" :options="options" />
  </div>
  <p class="name">2宫格</p>
  <div class="box">
    <live-player class="player" :options="options" />
    <live-player class="player" :options="options" />
  </div>
</div>
data () {
  return {
    options: {
      address: 'player.html',
      appId: '123456',
      streamSrc: 'demo.m3u8',
      camName: 'live',
      camId: '',
      userId: '',
      type: 0,
      width: '100%',
      height: '200px'
    }
  }
}

API

options 参数说明

属性 说明 类型 默认值 是否必填
address 播放器地址，实际具体地址请到播放器开放平台的管理后台获取（播放器能力对接请发起邮件申请：liangcy181@chinatelecom.cn） String '' 是
appId 授权 appId，合作方申请的播放器授权 appId String '' 是
streamSrc 监控直播源或回放地址，当使用插件播放器播放直播视频时，建议使用 RTSP 协议地址，无插件的原生播放器只支持 HLS 协议直播 String '' 是
count 要进行播放的总宫格数量,例如：需要实现高达 16 宫格视频播放， 则值为 16，直播时需要传入。播放 HLS 流时，小于 4 默认采用无插件播放模式 String ‘’ 否
camName 监控摄像头名称，用于播放时显示对应的摄像头名称 String '' 否
camId 监控摄像头 id（保留，暂未用） String '' 否
userId 用户 id，如手机号码等，用于采集统计、排障（保留，暂未用） String '' 否
playerType 用户自己定义默认使用的播放器类型。 默认 1 ：插件播放器；0：无插件播 放器（四宫格以下HLS流使用）；2： 针对HLS流，自动识别 H.264 编码进行 硬解码播放 Number 1 否
controlBarAutoHide 是否显示底部控制工具栏， 0 隐藏， 1 自动隐藏，2 显示 Number 1 否
disableContextMenu 禁用右键菜单, （后续版本开放）右键点击播放器时， 禁用菜单。默认 0 ; 禁用：1；启用：0 String 0 否
watermark 视频水印, 目前支持在天讯插件播放器中添加视频水印。 String ‘’ 否
poster 播放器 logo, 播放器未播放显示的logo，http链接地 址，建议使用 encodeURIComponent()方法进行转义 String ‘’ 否
width 播放器窗口宽度 String 100% 否
height 播放器窗口高度 String 200px 否
allowfullscreen 播放器窗口可全屏显示 Boolean false 否
  1. 1. LivePlayer 直播播放器 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用
    1. 1.1. 引入方式
    2. 1.2. 代码演示
    3. 1.3. API
      1. 1.3.1. options 参数说明