ayra-vue-player v1.1.8

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内属性

方法

事件