记录一下，使用西瓜视频播放器xgplayer，在播放器外面加了个 select 去切换不同的地址
```
<el-select v-model="currentUrl" size="small" style="width: 30%;float:right;margin-right:5%;margin-top:-1%" @change="handleChange">
<el-option
v-for="item in urlList"
:key="item.id"
:label="item.name"
:value="item.url">
</el-option>
</el-select>
```
<div id="xgplayer1"></div>
// 这是 定义了一个播放器。vue中可以使用 ref
```
import Player, { Events } from 'xgplayer'
import HlsPlugin from 'xgplayer-hls'
```
```
player: null,
urlList: [
{ id:0,name: '9:01-9:10', url: 'https://speech-recording-1252177232.cos.ap-guangzhou.myqcloud.com/644b89599028aa0094a5b3ac/8103318f0f0744d09385abefc80a4f96/9497208c-0e70-4fd8-9d7d-f0275aae9235/index.m3u8'},
{ id:1,name: '10:20-10:10', url: 'http://220.161.87.62:8800/hls/0/index.m3u8'},
{ id:2,name: '11:20-12:10', url: 'https://static.tuputech.com/lts/image/original/lts-1/LTS-Bucket-UnitTest/video/recording/index.m3u8' }
],
currentUrl: '', // 当前播放视频的URL
currentIndex: null
```
// 初始化播放器
initVideoBack() {
this.$nextTick(() => {
const config = {
el: document.querySelector('#xgplayer1'),
isLive: false,
// fluid: true,
playsinline: true,
url: this.currentUrl,
autoplay: true,
height: '100%',
width: '100%',
volume: 0.1,
plugins: [
HlsPlugin
] // 第二步
}
this.player = new Player(config)
this.player.on(Events.ERROR, (error) => {
console.log(error, '123123') // xgplayer 中的 Errors 对象
})
// 播放器结束时候调用
this.player.on(Events.ENDED, () => {
this.playNext()
})
})
},
```
playNext() {
if (this.currentIndex === 0) { // 已经是第一个视频，所以播放最后一个
this.currentUrl = this.urlList[this.urlList.length - 1].url
this.player.switchURL(this.currentUrl)
} else {
this.currentIndex--; // 播放上一个视频
// 这块需要播放上一个视频啊。因为默认是最后一个
this.currentUrl = this.urlList[this.currentIndex].url;
this.player.switchURL(this.currentUrl)
}
},
```
handleChange(val) {
this.currentUrl = val
this.player.switchURL(this.currentUrl)
}，
// 因为我这个是一个弹窗的，所以是在弹窗关闭的时候，调用销毁播放器
```
handleClose() {
this.$emit('closeViewBack');
this.player.destroy() // 销毁播放器
this.player = null
},
```
//这次是要求有m3u8的播放列表，先是尝试 使用播放器的自定义插件，但是最后发现，播放列表有了，但是与播放器联动不了，使用 switchURL, 或许是可以的。之后会在尝试一下，这个还需要 将数据放到store里面，做成共享数据，因为插件是一个vue组件，这个实现起来太复杂了，而且开发时间有限。所以还是没有去改造 就是在播放器外面加了个 select 去切换不同的地址
