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-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"
}, },

View File

@ -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

View File

@ -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>

19309
yarn.lock

File diff suppressed because it is too large Load Diff