<hlsPlayer :rowData="rowData" ref="child" />
<videoPlayer :rowData="rowData" ref="childTwo" />

1.安装video.js依赖

npm install --save video.js

2.全局引入

import Video from 'video.js'
import 'video.js/dist/video-js.css'

3.使用 （封装组件）

实现效果：

 音频组件：

<template><Modalv-model="modals"width="400":styles="{height:'400px',overflow:'hidden'}"scrollablefooter-hideclosable:title="titleFrom":mask-closable="false":z-index="1"@on-cancel="handleReset"><div><aplayer :playerOptions="aOption" v-if="isAudio"></aplayer><vplayer :playerOptions="vOption" style="height: 300px;" v-if="!isAudio"></vplayer></div></Modal>
</template><script>
import {aplayer,vplayer} from 'vue-hls-player'
export default {name: "hlsPlayer",props:{rowData:Object,default:null},comments:{aplayer,vplayer},data(){return {modals:false,isAudio:true,titleFrom:'媒体',aOption:{type: "application/x-mpegURL",src: 'http://ph1vqefl0.bkt.clouddn.com/hlsnature2',preload: false,autoplay: false,isLoop: false,controls: 'progress,current,durration',},vOption:{type: "application/x-mpegURL",src: 'http://ph1vqefl0.bkt.clouddn.com/hlsnature2',preload: false,autoplay: false,isLoop: false,playsinline: false,poster: 'https://oimdztrab.qnssl.com/Frp4SyVe5PosdkUKRaE-krjK7B5z',controls: 'progress,current,durration,volume',crossOrigin: false}}},watch:{rowData(node){ this.aOption['src'] = node.playUrl;}},created() {},methods:{handleReset(){}}
}
</script><style scoped></style>

 视频组件：

<template><Modalv-model="modals"width="400":styles="{height:'400px',overflow:'hidden'}"scrollablefooter-hideclosable:title="titleFrom":mask-closable="false":z-index="1"@on-cancel="handleReset"><div><video-playerclass="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player></div></Modal></template><script>
export default {name: "videoPlayers",props:{rowData:Object,default:null},data () {return {modals:false,titleFrom:'媒体',// 视频播放playerOptions: {playbackRates: [0.7, 1.0, 1.5, 2.0],autoplay: false,muted: false,loop: false,preload: 'auto',language: 'zh-CN',aspectRatio: '16:9',fluid: true,sources: [{type: "",src: 'http://vjs.zencdn.net/v/oceans.mp4'}],poster: "",// width: document.documentElement.clientWidth,notSupportedMessage: '此视频暂无法播放，请稍后再试',controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true  //全屏按钮}}}},watch:{rowData(node){ this.playerOptions['sources'][0]['src'] = node.playUrl;this.playerOptions['poster'] = node.opusUrl; }},created() {// this.playerOptions['sources'][0]['src'] = '接口地址';},methods:{handleReset(){}}
}
</script><style scoped>
.video-js .vjs-icon-placeholder {width: 100%;height: 100%;display: block;
}
</style>

4.详细使用教程

(1)引入

import hlsPlayer from "@/components/uplayVideo/hlsPlayer";
import videoPlayer from "@/components/uplayVideo/videoPlayer";

（2）注册

 components: {hlsPlayer,videoPlayer,},

（3）页面中使用

（4）绑定事件（在这里我是通过插槽绑定在表格上的）

 为了方便复制也为你准备了现成的CV  但是不要忘了修改请求头 slot: "content",这里需要自己加上  

<template slot-scope="{ row }" slot="content"><div @click="audioClick(row)"><span>{{ row.content }} </span></div></template>

（5）方法函数

audioClick(row) {this.rowData = {};if (row.contentType == 6) {this.rowData.playUrl = row.content;this.$refs.child.modals = true;} else if (row.contentType == 1) {this.rowData.playUrl = row.content;this.rowData.opusUrl = row.showUrl;this.$refs.childTwo.modals = true;}},

函数详解

this.rowData = {};  是防止组件封装的watch  监听不到

 if (row.contentType == 6)  是判断你当前点击的元素是什么类型，比如作者这里就有mp3 mp4  音频和视频两种资源，这个都是通过你表格的当前行row 这个属性去判断的，如果您发现后端提供给你的数据没有判断类型的东西，请与后端进行沟通

 this.rowData.playUrl = row.content;  是把你当前的视频音频地址传入子组件

 this.$refs.child.modals = true;  是通过父传子的方式控制子组件的显示隐藏的

作者封装组件时默认都是统一做了隐藏