Vue 阿里视频播放

安装阿里云视频播放器 npm i vue-aliplayer-v2 --save
https://www.npmjs.com/package/vue-aliplayer-v2

<template>
  <div>
    <div v-if="options" class="aliplayer">
      <vue-aliplayer-v2 id="J_prismPlayer" ref="VueAliplayerV2" :options="options" />
    </div>
  </div>
</template>

<script>
import BoxHead from '@/components/common/BoxHead';
import Masking from '@/components/common/Masking';
import { h5GetAliPlayerConfig } from '@/apis/common';
import VueAliplayerV2 from 'vue-aliplayer-v2';
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { VueAliplayerV2: VueAliplayerV2.Player, BoxHead, Masking },
  layout: 'empty-client',
  props: {
    playOptions: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      videoConfig: null
    };
  },
  computed: {
    options () {
      if (this.videoConfig) {
        return {
          width: '100%',
          height: '100%',
          autoplay: true,
          vid: this.videoConfig.videoId,
          playauth: this.videoConfig.playAuth,
          cover: this.videoConfig.coverURL,
          encryptType: 1,
          defaultDefinition: 'HD'
        };
      } else {
        return false;
      }
    }
  },
  mounted () {
    this.goVideo(this.$route.query.videoId, this.$route.query.lessonId);
  },
  methods: {
    async goVideo (videoId, lessonId) {
      // 录播 和 直播的OSS回放  axios拦截器的配置，实例中使用  $http 
      const res = await this.$http.post( "获取阿里云视频播放的配置的接口" + '?videoId=' + videoId + '&loginToken=' + 				localStorage.getItem('Token'));
      if (res.data.code === 200) {
        this.videoConfig = res.data.data;
      } else {
        this.videoConfig = null;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.aliplayer {
    width: 99vw;
    height: 99vh;
}
</style>
	

//通过路由的方式跳转到阿里播放器页面，阿里播放器需要videoOssId
 const { href } = this.$router.resolve({
  path: '/h5Aliplayer',
  query: {
    videoId: videoOssId || this.courseInfo.videoOssId
  }
});
if (videoOssId || this.courseInfo.videoOssId) {
  this.$router.push(href);
}