Luo-vue-aliplayer NPM

Luo-Vue-AliPlayer

Vue 2.x Video Player Components and Classes Based on vue-aliplayer.

Install

npm install luo-vue-aliplayer -S

Usage

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

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

or:

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

Props

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

获取播放时最大进度

methods: { timeupdate (e) { console.log(e.maxProgress); }, }

setProps

<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

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

export default {
  methods: {
    play() {
      console.log('play callback')
    }
  }
}

如何获取播放对象：

- 第一种方式

<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);
    }
  }
}

如何调用方法：

- 第一种方式

<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);
    });
  }
}

事件如何传参：

- 第一种方式

<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);
      }
    }
}