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

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

视频播放器

引入方式

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

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

代码演示

VideoPlayer 视频播放器 videoPlayer
基本用法： 
<div class="player_cpntainer">
  <video-player class="player" :options="options" />
</div>
data () {
  return {
    options: {
      address: 'player.html',
      appId: '123456',
      streamSrc: 'demo.mp4',
      width: '100%',
      height: '300px'
    }
  }
}

API

options 参数说明

属性 说明 类型 默认值 是否必填
address 播放器地址，实际具体地址请到播放器开放平台的管理后台获取（播放器能力对接请发起邮件申请：liangcy181@chinatelecom.cn） String '' 是
appId 授权 appId，合作方申请的播放器授权 appId String '' 是
streamSrc 监控直播源或回放地址，当使用插件播放器播放直播视频时，建议使用 RTSP 协议地址，无插件的原生播放器只支持 HLS 协议直播 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 否
poster 播放器 logo, 播放器未播放显示的logo，http链接地 址，建议使用 encodeURIComponent()方法进行转义 String ‘’ 否
watermark 视频水印, 目前支持在天讯插件播放器中添加视频水印。 String ‘’ 否
width 播放器窗口宽度 String 100% 否
height 播放器窗口高度 String 200px 否
allowfullscreen 播放器窗口可全屏显示 Boolean false 否
  1. 1. VideoPlayer 视频播放器 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用
    1. 1.1. 引入方式
    2. 1.2. 代码演示
    3. 1.3. API
      1. 1.3.1. options 参数说明