# luo-vue-aliplayer

> This is an extension of aliplayer

Latest version **1.0.18** (published 2020-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install luo-vue-aliplayer
pnpm add luo-vue-aliplayer
yarn add luo-vue-aliplayer
bun add luo-vue-aliplayer
```

## 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.0.18 |
| Published | 2020-04-30 |
| First published | 2019-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 119.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | make 2019 by luo |
| Maintainers | luo195289 |

## Links

- npm: https://www.npmjs.com/package/luo-vue-aliplayer
- npm.io page: https://npm.io/package/luo-vue-aliplayer

## Recent versions

- 1.0.18 (latest) — 2020-04-30
- 1.0.17 — 2019-12-25
- 1.0.16 — 2019-12-25
- 1.0.15 — 2019-06-27
- 1.0.14 — 2019-06-26
- 1.0.13 — 2019-06-26

## README

# Luo-Vue-AliPlayer

> Vue 2.x Video Player Components and Classes Based on [vue-aliplayer]().


## Install

```bash
npm install luo-vue-aliplayer -S
```

## Usage

```js
import { LuoVueAliplayerDom, AliPlayerComponent } from 'luo-vue-aliplayer';

export default {
  components: {
    'ali-player': LuoVueAliplayerDom
  }
}
```
or:

```js
import { LuoAliplayer } from 'luo-vue-aliplayer';

LuoAliplayer.then((player) => {
  new player({
    id: "id",
    source: "https://testvod.21tb.com/cdc9311751cb4860925cddafa33de03e/e489980b982d6cfff0e1b540aa2e1baf-ld-encrypt-stream.m3u8"
  });
});
```

## Web Player Ali Document (属性和事件以及方法跟aliplayer一一对应)

[Document](https://help.aliyun.com/document_detail/62941.html?spm=a2c4g.11186623.6.1043.6a391c4cu58CTQ)

## Props 

| 名称    | 类型 | 默认值 | 说明 |
| ---------- | ---- | ------- | ----------- |
| disableProgressBar | String |  | 1、left 禁止向左拖动进度条；2、right 禁止向右拖动进度条；3、all 禁止拖动进度条；|
| bodyBackgroundColor | String |  | 安卓播放后黑边问题，设置的背色 |

## 获取播放时最大进度
methods: {
  timeupdate (e) {
    console.log(e.maxProgress);
  },
}

## setProps

```js
<ali-player 
  id="id"
  source="https://testvod.21tb.com/cdc9311751cb4860925cddafa33de03e/e489980b982d6cfff0e1b540aa2e1baf-ld-encrypt-stream.m3u8"
  :useH5Prism="true"
  x5_type="h5"
  :isLive="is"
>
</ali-player>

export default {
  data () {
    return {
      is: false
    }
  }
}
```

## Events

```js
<ali-player @play="play"></ali-player>

export default {
  methods: {
    play() {
      console.log('play callback')
    }
  }
}
```
## 如何获取播放对象：

```js

- 第一种方式

<ali-player @play="play" @ready="ready"></ali-player>

export default {
  methods: {
    play (e) {
      console.log(e);
    },
    ready (e) {
      console.log(e);
    }
  }
}

- 第二种方式

<ali-player ref="player" @ready="ready"></ali-player>

export default {
  methods: {
    ready () {
      var player = this.$refs.player.instance;
      console.log(player);
    }
  }
}

- 第三种方式

<ali-player></ali-player>

import { LuoAliplayer } from 'luo-vue-aliplayer';
export default {
  mouted () {
    LuoAliplayer.then((e) => {
      console.log(e);
    });
  }
}

- 第四种方式

<ali-player @play="play($event, 1)"></ali-player>

export default {
  methods: {
    play (e, param) {
      console.log(e);
    }
  }
}

```

## 如何调用方法：
```js
- 第一种方式

<ali-player @play="play"></ali-player>

export default {
    methods: {
      play(e) {
        let time = e.getCurrentTime();
        console.log(time);
      }
    }
}

- 第二种方式

<ali-player ref="player" @ready="ready"></ali-player>

export default {
  methods: {
    ready () {
      let play = this.$refs.player.instance;
      let time = play.getCurrentTime();
      console.log(time);
    }
  }
}

- 第三种方式

import { LuoAliplayer } from 'luo-vue-aliplayer';

export default {
  created () {
    LuoAliplayer.then((player) => {
      let play = new player({
                  id: "id",
                  source: "https://testvod.21tb.com/cdc9311751cb4860925cddafa33de03e/e489980b982d6cfff0e1b540aa2e1baf-ld-encrypt-stream.m3u8"
                });
      let time = play.getCurrentTime();
      console.log(time);
    });
  }
}
```

## 事件如何传参：

```js

- 第一种方式

<ali-player @play="play(1)"></ali-player>

export default {
    methods: {
      play(param) {
        console.log(param);
      }
    }
}

- 第二种方式

<ali-player @play="play($event, 1)"></ali-player>

export default {
    methods: {
      play(e, param) {
        let time = e.getCurrentTime();
        console.log(time);
        console.log(param);
      }
    }
}

```

# License

This content is released under the [MIT](http://opensource.org/licenses/MIT) License.

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