78 lines
1.9 KiB
Vue
78 lines
1.9 KiB
Vue
<template>
|
|
<a-card :bordered="false" title="课件预览">
|
|
<template slot="extra">
|
|
<h4 style="margin-right: 15px; display:inline-block">课程类别</h4>
|
|
<a-button size="small" @click="goback">返回</a-button>
|
|
</template>
|
|
|
|
<div style="width:100%">
|
|
<a-row>
|
|
<a-col :span="14">
|
|
<!-- 这里面对应放视频 -->
|
|
<!-- <h1>视频视频视频</h1> -->
|
|
<video-player
|
|
class="vjs-custom-skin"
|
|
ref="videoPlayer"
|
|
:options="playerOptions"
|
|
:playsinline="true"
|
|
>
|
|
</video-player>
|
|
</a-col>
|
|
<a-col :span="10" style="flex-shrink: 0;">
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
import 'video.js/dist/video-js.css'
|
|
import 'vue-video-player/src/custom-theme.css'
|
|
import { videoPlayer } from 'vue-video-player'
|
|
import { coursewareDeatil } from '@/api/course/courseware'
|
|
|
|
export default {
|
|
components: { videoPlayer },
|
|
data() {
|
|
return {
|
|
queryParam: { id: this.$route.query.coursewareId },
|
|
courseware: [], //课件详情
|
|
playerOptions: {
|
|
// width: 800,
|
|
height: '360',
|
|
fluid: true,
|
|
autoplay: true,
|
|
muted: true,
|
|
language: 'en',
|
|
playbackRates: [0.7, 1.0, 1.5, 2.0],
|
|
sources: [
|
|
{
|
|
type: 'video/mp4',
|
|
src: 'http://vjs.zencdn.net/v/oceans.mp4'
|
|
}
|
|
],
|
|
poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg'
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
let parameter = {}
|
|
coursewareDeatil(Object.assign(parameter, this.queryParam)).then(res => {
|
|
console.log(res)
|
|
this.courseware = res
|
|
})
|
|
},
|
|
methods: {
|
|
//返回
|
|
goback() {
|
|
this.$router.push({ path: '/course/CourseList', query: {} })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.vjs-custom-skin {
|
|
width: 100%;
|
|
}
|
|
</style>
|