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

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

使用只需要传相应的参数就可以使用，比较方便快捷。

easyplay使用教程：https://blog.csdn.net/qq_44891434/article/details/118525941

vue-aplayer使用教程：https://aplayer.netlify.app/docs/guide/options.html#autoplay

视频子组件编写

<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-componentsEasyPlayer},// eslint-disable-next-line vue/require-prop-typesprops: ['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-typesprops: ['audiourl', 'audiowidth'],data() {return {videoUpload: {progress: false,progressPercent: 0,successPercent: 0,music: {title: '音乐播放器',author: ' ',// eslint-disable-next-line no-undefurl: 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-componentsvideoDisplay,// eslint-disable-next-line vue/no-unused-componentsAudioPlay,// eslint-disable-next-line vue/no-unused-componentsEsayVideo},data() {return {// audiourl: URL + '/file/materail/2021/0715/210715171331958135001.mp3',// esayurl: URL + '/file/materail/2021/0710/210710153208424119054.mp4'}},mounted() {console.log(this.audiourl)}
}
</script>

效果图展示