web视频播放组件（easyplayer）和音频组件播放封装（vue-aplayer）

<template>
  <!-- 采用easyplayer.js -->
  <div :style="esayvideowidth">
    <easy-player :video-url="videoUrl" :poster="videoImg" :autoplay="false" />
  </div>
</template>
<script>
import EasyPlayer from '@easydarwin/easyplayer'
import 'videojs-contrib-hls'
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    EasyPlayer
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['esayurl', 'esayvideowidth'],
  data() {
    return {
      videoUrl: this.esayurl,
      videoImg: require('@/assets/3.jpg')
    }
  }
}
</script>

<template>
  <div :style="audiowidth">
    <!--music：当前播放的音乐。 list：播放列表 ：showlrc：是否显示歌词-->
    <aplayer :music="videoUpload.music" />
  </div>
</template>
<script>
import aplayer from 'vue-aplayer'
export default {
  components: {
    aplayer
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['audiourl', 'audiowidth'],
  data() {
    return {
      videoUpload: {
        progress: false,
        progressPercent: 0,
        successPercent: 0,
        music: {
          title: '音乐播放器',
          author: ' ',
          // eslint-disable-next-line no-undef
          url: this.audiourl,
          pic: require('@/assets/music/audioBg.png')
          // lrc: '[00:00.00] (,,•́ . •̀,,) 抱歉，当前歌曲暂无歌词'
        }
      }
    }
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
</style>

<template>
  <!-- vue-video-player -->
  <div class="videoBox">
    <videoDisplay />
    <EsayVideo :esayurl="'/api/manager/file/materail/2021/0710/210710153208424119054.mp4'" :esayvideowidth="'width:800px;margin:1%;'" />
    <AudioPlay :audiourl="'/api/manager/file/materail/2021/0715/210715171331958135001.mp3'" :audiowidth="'width:300px;margin:1%;'" />
  </div>
</template>
<script>
import videoDisplay from '@/components/video/index'
import EsayVideo from '@/components/video/esayVideo'
import AudioPlay from './audio.vue'
// import { manager } from '@/api/base'
// const URL = process.env.VUE_APP_BASE_API + manager
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    videoDisplay,
    // eslint-disable-next-line vue/no-unused-components
    AudioPlay,
    // eslint-disable-next-line vue/no-unused-components
    EsayVideo
  },
  data() {
    return {
      // audiourl: URL + '/file/materail/2021/0715/210715171331958135001.mp3',
      // esayurl: URL + '/file/materail/2021/0710/210710153208424119054.mp4'
    }
  },
  mounted() {
    console.log(this.audiourl)
  }
}
</script>