feat: 添加视频组件
This commit is contained in:
parent
b1f14fa1b9
commit
9a1675e59e
|
@ -39,6 +39,7 @@
|
||||||
"vue-quill-editor": "^3.0.6",
|
"vue-quill-editor": "^3.0.6",
|
||||||
"vue-router": "^3.1.2",
|
"vue-router": "^3.1.2",
|
||||||
"vue-svg-component-runtime": "^1.0.1",
|
"vue-svg-component-runtime": "^1.0.1",
|
||||||
|
"vue-video-player": "^5.0.2",
|
||||||
"vuex": "^3.1.1",
|
"vuex": "^3.1.1",
|
||||||
"wangeditor": "^3.1.1"
|
"wangeditor": "^3.1.1"
|
||||||
},
|
},
|
||||||
|
|
|
@ -20,6 +20,7 @@ import moment from 'moment'
|
||||||
import { FormModel } from 'ant-design-vue'
|
import { FormModel } from 'ant-design-vue'
|
||||||
import { hasBtnPermission } from './utils/permissions'
|
import { hasBtnPermission } from './utils/permissions'
|
||||||
|
|
||||||
|
|
||||||
Vue.use(FormModel)
|
Vue.use(FormModel)
|
||||||
Vue.prototype.hasPerm = hasBtnPermission
|
Vue.prototype.hasPerm = hasBtnPermission
|
||||||
|
|
||||||
|
|
|
@ -7,17 +7,18 @@
|
||||||
|
|
||||||
<div style="width:100%">
|
<div style="width:100%">
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :span="6" :push="18">
|
<a-col :span="14">
|
||||||
<!-- 这里放文件名称...... -->
|
|
||||||
<div>
|
|
||||||
<h1 style="margin-bottom:18px;">文件名称</h1>
|
|
||||||
<h1>哈哈哈</h1>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="18" :pull="6">
|
|
||||||
<!-- 这里面对应放视频 -->
|
<!-- 这里面对应放视频 -->
|
||||||
<h1>视频视频视频</h1>
|
<!-- <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-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
|
@ -25,29 +26,52 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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'
|
import { coursewareDeatil } from '@/api/course/courseware'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
components: { videoPlayer },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
queryParam: { id: this.$route.query.coursewareId },
|
queryParam: { id: this.$route.query.coursewareId },
|
||||||
courseware:[] //课件详情
|
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() {
|
created() {
|
||||||
let parameter = {}
|
let parameter = {}
|
||||||
console.log("11111",this.queryParam);
|
coursewareDeatil(Object.assign(parameter, this.queryParam)).then(res => {
|
||||||
coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
|
|
||||||
console.log(res)
|
console.log(res)
|
||||||
this.courseware = res;
|
this.courseware = res
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//返回
|
//返回
|
||||||
goback() {
|
goback() {
|
||||||
this.$router.push({ path: '/course/CourseList', query: {} })
|
this.$router.push({ path: '/course/CourseList', query: {} })
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.vjs-custom-skin {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue