# ayra-vue-player

> Vue component with player

Latest version **1.1.8** (published 2020-07-17) · 0 weekly downloads

## Install

```sh
npm install ayra-vue-player
pnpm add ayra-vue-player
yarn add ayra-vue-player
bun add ayra-vue-player
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2020-07-17 |
| First published | 2020-07-08 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 1 |
| Unpacked size | 73.3 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Author | konglingnan |
| Maintainers | konglingnan |

## Links

- npm: https://www.npmjs.com/package/ayra-vue-player
- npm.io page: https://npm.io/package/ayra-vue-player

## Dependencies (1)

- [axios](https://npm.io/package/axios.md) ^0.19.2

## Recent versions

- 1.1.8 (latest) — 2020-07-17
- 1.1.7 — 2020-07-08

## README

# ayra-vue-player

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

 <!-- [使用文档Wiki地址](http://wiki.intra.xiaojukeji.com/pages/viewpage.action?pageId=339089756)  -->
 
## 安装

```bash
$ npm install ayra-vue-player
```

## 使用示例

##### main.js
```javascript
import Player from 'ayra-vue-player';
import 'ayra-vue-player/lib/index.css'
Vue.use(Player)
```

##### template部分
```html
<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 部分
```javascript
<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 | <table><tr><th>参数</th><th>类型</th><th>描述</th></tr><tr><td>liveId</td><td>string</td><td>直播id</td></tr></table> | 播放


#### 事件

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

---
_Source: https://npm.io/package/ayra-vue-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._