ayra-vue-player

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	参数 类型 描述 liveId string 直播id	播放

事件

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