cy-player-vue2 v1.0.0

说明

• CyPlayer的Vue2移植版，具体使用说明参考Vue3版本文档
• Vue2版本去掉了option属性，相关属性被移到根标签上

安装

npm

npm install cy-player-vue2 --save

yarn

yarn add cy-player-vue2 

使用

• Expose内容可以通过expose事件获取，详细使用方式如下所示

<template>
  <div id="app">
    <CyPlayer
      :v-src="src"
      :width="width"
      :height="height"
      :quality="[
        {
          vQ: '720p',
          src: 'https://cdn.pixabay.com/video/2024/02/21/201308-915375262_small.mp4?download',
          // chosen: true,
        },
        {
          vQ: '480p',
          src: 'https://cdn.pixabay.com/video/2024/03/31/206294_small.mp4?download',
        },
      ]"
      @player-mounted="handleMounted"
      @before-player-destroy="handleBeforeDestroy"
      @play="handlePlay"
      @time-change="handleTimeChange"
      @expose="getExposedData"
    >
    </CyPlayer>
  </div>
</template>

<script>
import {CyPlayer} from 'cy-player-vue2';

export default {
  name: 'App',
  components:{
    CyPlayer
  },
  data() {
    return {
      // Expose
      exposedData: {
        videoElement: null,
        states: null,
        controller: null,
      },
      toggle: true,
      // src: 'https://cdn.pixabay.com/video/2024/03/31/206294_small.mp4?download',
      src: 'https://cdn.pixabay.com/video/2024/02/21/201308-915375262_small.mp4?download',
      themeColor: 'red',
      keepControllerShow: true,
      width: '1000',
      height: '650',

      // 测试选项
      options: {
        showToast: true,
        toastPlacement: 'center',
      },
    };
  },
  methods: {
    getExposedData(expose) {
      this.exposedData = expose;
    },
    handleMounted(v, c) {
      // console.log(v, c);
    },
    handleBeforeDestroy(v, c) {
      // console.log(v, c);
    },
    handlePlay(e) {
      // console.log(e);
    },
    handleTimeChange(e) {
      // console.log(e.currentPlayTime);
    },
    handleToast() {
      // this.showToast('test');
    },
    handleProgressMouseDown(e) {
      // console.log(e);
    },
  },
};
</script>