<template>
|
<div class="container">
|
<div class="videoBox">
|
<video
|
@canplay="getDuration"
|
@timeupdate="updateTime"
|
ref="audio"
|
controls
|
controlsList="nodownload"
|
autoplay
|
:src="videoSrc"
|
>
|
<!-- <source :src="videoSrc" type="video/mp4" ref="myPlayer" /> -->
|
</video>
|
</div>
|
<div class="calssInfo">
|
<el-tabs type="border-card">
|
<el-tab-pane label="课程简介">
|
<div class="tabItem" v-loading="descriptionLoading">
|
<div
|
class="richTextBox"
|
v-html="description.autism_introduction"
|
></div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="章节目录">
|
<div class="tabItem" v-loading="catalogueLoading">
|
<p v-for="(item, index) in catalogue" :key="index" class="selected">
|
{{ item.name }}
|
</p>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getImage } from "@/assets/js/toolClass";
|
|
export default {
|
props: {
|
query: {
|
type: Object
|
},
|
idPath: {
|
type: String
|
}
|
},
|
data() {
|
return {
|
videoSrc: "",
|
description: "",
|
catalogue: "",
|
descriptionLoading: true,
|
catalogueLoading: true
|
};
|
},
|
created() {
|
this.getData();
|
this.getCatalogue();
|
},
|
methods: {
|
// 获取详情
|
getData() {
|
this.descriptionLoading = true;
|
let query = {
|
path: this.query.LinkPath,
|
fields: {
|
autism_introduction: [],
|
autism_totalDuration: []
|
},
|
filterList: {
|
"Id=": this.query.id
|
}
|
};
|
this.MG.resource.getItem(query).then((res) => {
|
this.description = res.datas[0];
|
this.descriptionLoading = false;
|
});
|
},
|
// 获取目录
|
getCatalogue() {
|
this.catalogueLoading = true;
|
let query = {
|
path: this.idPath,
|
fields: {
|
autism_video: [],
|
autism_introduction: [],
|
autism_totalDuration: []
|
},
|
filterList: {
|
"SysType=":"Cmsitem"
|
}
|
};
|
this.MG.resource.getItem(query).then((res) => {
|
this.catalogue = res.datas;
|
this.aliVod(this.catalogue[0].autism_video);
|
this.catalogueLoading = false;
|
});
|
},
|
// 获取加速地址
|
aliVod(md5) {
|
let query = {
|
md5: md5,
|
appRefCode: this.config.appRefCode
|
};
|
this.MG.file.getAliVod(query).then((res) => {
|
if (res) {
|
this.videoSrc = res;
|
} else {
|
this.videoSrc = getImage(md5);
|
}
|
});
|
},
|
getDuration() {
|
this.audio = this.$refs.audio;
|
this.duration = this.timeFormat(this.$refs.audio.duration);
|
},
|
timeFormat(number) {
|
let minute = parseInt(number / 60);
|
let second = parseInt(number % 60);
|
minute = minute >= 10 ? minute : "0" + minute;
|
second = second >= 10 ? second : "0" + second;
|
return minute + ":" + second;
|
},
|
updateTime() {
|
if (!this.$refs.progress) return;
|
this.currentDuration = this.timeFormat(this.audio.currentTime);
|
//如果不是正在移动 和 没有暂停播放就执行
|
if (!this.isMoveIn || !this.audio.paused) {
|
// 设置当前时间
|
let MoveX =
|
this.$refs.progress.clientWidth *
|
(this.audio.currentTime / this.audio.duration);
|
//播放时更新距离
|
this.$refs.currentProgress.style.width = MoveX + "px";
|
this.$refs.circle.style.left =
|
MoveX - this.$refs.circle.clientWidth / 2 + "px";
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.videoBox {
|
height: 657px;
|
width: 100%;
|
margin-top: 20px;
|
}
|
video {
|
width: 100%;
|
height: 100%;
|
}
|
.calssInfo {
|
margin-top: 20px;
|
height: 290px;
|
background-color: #e4e4e4;
|
margin-bottom: 20px;
|
padding: 30px;
|
}
|
.tabItem {
|
height: 220px;
|
.selected {
|
font-size: 14px;
|
color: #0079fe;
|
}
|
}
|
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
background-color: rgba(0, 121, 254, 1);
|
color: #fff !important;
|
}
|
/deep/ .el-tabs__item {
|
font-size: 16px;
|
}
|
</style>
|
