ayra-vue-player

此组件为基于vue的flash播放器组件， 功能包括播放、暂停、音量控制、全屏、关灯模式、水印、观看质量数据采集。

安装

$ npm install ayra-vue-player

使用示例

main.js

import Player from 'ayra-vue-player';
import 'ayra-vue-player/lib/index.css'
Vue.use(Player)

template部分

<template>
    <div class="app">
        <Player ref="player"
                :option="playerOptions"
                @playerPlay="playerPlay"
                @playerPause="playerPause"
                @onPlayerEmpty="onPlayerEmpty"
                @onPlayerFull="onPlayerFull"
                @onPlayerTimer="onPlayerTimer"
                @onPlayerError="onPlayerError"
                @onPlayerSizeChange="onPlayerSizeChange"
                @onLightControl="onLightControl"
                >
        </Player>
    </div>
</template>

script 部分

<script>
export default {
  name: 'App',
  data () {
    return {
      playerOptions: {
        waterMarkText: 'abc',   // 水印内容
        user: 'test',           // 用户域帐号
        lightControl: false,    // 是否启用关灯模式控制
        volumeControl: true,    // 是否启用音量控制
      }
    }
  },
  mounted () {
    // 生产
    this.$refs.player.play('liveId')
    // 预发
    // this.$refs.player.prePlay('preLiveId')
    // 测试
    // this.$refs.player.testPlay('testLiveId')
  },
  methods: {
    playerPlay() {
      console.log('player - play')
    },
    playerPause() {
      console.log('player - pause')
    },
    onPlayerEmpty(time) {
      console.log('player - time: ', time)
    },
    onPlayerFull(time) {
      console.log('player - time: ', time)
    },
    onPlayerTimer(kbps) {
      console.log('player - bandwidth: ', kbps + ' kbps')
    },
    onPlayerError(error) {
      console.log('player - error: ', error)
    },
    onPlayerSizeChange() {
      console.log('player - player size change')
    },
    onLightControl(isLightOff) {
      console.log('player - is light off: ', isLightOff)
    },
  }
}
</script>

说明

options内属性

属性 | 类型 | 描述

•         | :-:     | :-

waterMarkText | string | 水印内容 user | string | 用户域账号 lightControl | boolean | 是否启用关灯模式控制 volumeControl | boolean | 是否启用音量控制

方法

方法 | 参数 | 描述

• | :-: | :- play | 参数类型描述liveIdstring直播id | 播放

事件

事件 | 描述 | 备注

•               |   :-              | :-

playerPlay | 播放开始 | playerPause | 播放暂停 | onPlayerEmpty | buffer为空 | 可用于判断卡顿，time为自视频开始播放到触发此事件的时间（单位：ms） onPlayerFull | buffer不为空 | 可用于判断卡顿停止，time为自视频开始播放到触发此事件的时间（单位：ms） onPlayerTimer | 获取播放实时码率 | 每300ms触发 onPlayerError | 播放异常 | 若无直播无流地址触发（若直播时间已开始，但触发此情况：{ errorCode: 4001, errorMessage: '未获取到视频流' }，有可能为还未开始直播推流或中途休息停止推流） onPlayerSizeChange | 播放器大小改变 | onLightControl | 关灯模式 | isLightOff为0/1，0为开灯，1为关灯（如使用关灯模式，需根据此事件自行处理样式）