feat: 添加视频组件

This commit is contained in:
cgd_mac 2021-12-22 09:12:42 +08:00
parent b1f14fa1b9
commit 9a1675e59e
4 changed files with 9676 additions and 9695 deletions

View File

@ -39,6 +39,7 @@
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.1.2",
"vue-svg-component-runtime": "^1.0.1",
"vue-video-player": "^5.0.2",
"vuex": "^3.1.1",
"wangeditor": "^3.1.1"
},

View File

@ -20,6 +20,7 @@ import moment from 'moment'
import { FormModel } from 'ant-design-vue'
import { hasBtnPermission } from './utils/permissions'
Vue.use(FormModel)
Vue.prototype.hasPerm = hasBtnPermission

View File

@ -7,17 +7,18 @@
<div style="width:100%">
<a-row>
<a-col :span="6" :push="18">
<!-- 这里放文件名称...... -->
<div>
<h1 style="margin-bottom:18px;">文件名称</h1>
<h1>哈哈哈</h1>
</div>
</a-col>
<a-col :span="18" :pull="6">
<a-col :span="14">
<!-- 这里面对应放视频 -->
<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-row>
</div>
@ -25,29 +26,52 @@
</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: {},
components: { videoPlayer },
data() {
return {
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() {
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)
this.courseware = res;
this.courseware = res
})
},
methods: {
//
goback() {
this.$router.push({ path: '/course/CourseList', query: {} })
},
},
}
}
}
</script>
<style lang="less" scoped>
.vjs-custom-skin {
width: 100%;
}
</style>

19309
yarn.lock

File diff suppressed because it is too large Load Diff