You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.9 KiB
64 lines
1.9 KiB
<template>
|
|
<div class="video-box">
|
|
<video v-if="srcList[0].endsWith('.mp4')" width="100%" height="100%" controls loop autoplay muted :poster="poster">
|
|
<source :src="srcList[0]" type="video/mp4">
|
|
</video>
|
|
<el-carousel v-if="!srcList[0].endsWith('.mp4')" :interval="6000">
|
|
<el-carousel-item v-for="src in srcList" :key="src">
|
|
<img width="100%" height="100%" :src="src">
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchShowFileList } from '@/api/library'
|
|
export default {
|
|
name: 'Video',
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
poster: 'https://qiniu.aiyxlib.com/1658104787005.jpg',
|
|
srcList: ['']
|
|
}
|
|
},
|
|
created() {
|
|
this.getShowFile()
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
getShowFile() {
|
|
const params = {
|
|
libcode: '1201'
|
|
}
|
|
// this.src = 'D://uploadFile/9f904de6-0f5e-498e-8e5d-b7e14ea15496.mp4'.replace('D://', 'http://127.0.0.1:8888/')
|
|
|
|
FetchShowFileList(params).then(res => {
|
|
if (res.errCode === 0) {
|
|
// this.src = res.data[0].filePath.replace('D://', 'http://172.16.0.23:8888/')
|
|
this.srcList = res.data.map(x => x.filePath.replace('D://', 'http://172.22.0.23:8888/'))
|
|
// this.srcList = res.data.map(x => x.filePath.replace('D://uploadFile', 'http://localhost:8080/static/'))
|
|
// console.log(22222, this.srcList)
|
|
// this.src = 'D://uploadFile/11503339-b829-4357-8379-d2b49106431f.mp4'.replace('D://', 'http://127.0.0.1:8888/')
|
|
// this.src = 'http://127.0.0.1:8888/uploadFile/9f904de6-0f5e-498e-8e5d-b7e14ea15496.mp4'
|
|
} else {
|
|
this.$message.error('接口错误')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~@/assets/styles/index.scss";
|
|
.el-carousel__container {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
.el-carousel.el-carousel--horizontal {
|
|
height: 100%;
|
|
}
|
|
</style>
|