From 9ac777f949d43dc38f2e004aad83a70ef9dda061 Mon Sep 17 00:00:00 2001 From: bai <1643359946@qq.com> Date: Fri, 5 May 2023 23:52:51 +0800 Subject: [PATCH] =?UTF-8?q?2023=E5=B9=B45=E6=9C=885=E6=97=A5=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E7=9B=B4=E6=92=AD=E9=A1=B5=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/site/common/video/videojs/util.ts | 1 + src/views/site/common/video/videojs/video.vue | 9 +- .../site/common/video/videojs/viewPage.vue | 227 ++++++++++++++---- src/views/site/tingKeZuJi/list.vue | 4 +- 4 files changed, 185 insertions(+), 56 deletions(-) diff --git a/src/views/site/common/video/videojs/util.ts b/src/views/site/common/video/videojs/util.ts index 77ee755..2527079 100644 --- a/src/views/site/common/video/videojs/util.ts +++ b/src/views/site/common/video/videojs/util.ts @@ -16,6 +16,7 @@ export function getDefOptions(object) { fluid: true, liveui: true, hotkeys: false, + caches: true, // playbackRates: [1,2,3,4,5,8,10,20], trechIrder: ['flash'], // sources: [{ diff --git a/src/views/site/common/video/videojs/video.vue b/src/views/site/common/video/videojs/video.vue index 8db0be8..20cd68a 100644 --- a/src/views/site/common/video/videojs/video.vue +++ b/src/views/site/common/video/videojs/video.vue @@ -5,7 +5,6 @@ :id="props.videoId" playsinline="true" class="video-js" - controls preload="auto" poster="//vjs.zencdn.net/v/oceans.png" > @@ -37,6 +36,10 @@ const player = ref(); const emit = defineEmits(['loadEnd']); onMounted(() => { + init(); +}); + +function init(){ let option = {}; if(props.src){ option = { @@ -55,10 +58,10 @@ onMounted(() => { // }); }); player.value = playerMain; - -}) +} defineExpose({ + init, player }); diff --git a/src/views/site/common/video/videojs/viewPage.vue b/src/views/site/common/video/videojs/viewPage.vue index dd401e0..12c9ebd 100644 --- a/src/views/site/common/video/videojs/viewPage.vue +++ b/src/views/site/common/video/videojs/viewPage.vue @@ -1,50 +1,69 @@ @@ -52,6 +71,7 @@ import { defHttp } from '/@/utils/http/axios'; import { ref, reactive, onMounted } from 'vue'; +import headerPage from '/@/views/site/common/header.vue'; import bVideo from '/@/views/site/common/video/videojs/video.vue'; import addModalPage from '/@/views/site/tingKeZuJi/components/addModal.vue'; import { nextTick } from 'vue'; @@ -59,8 +79,11 @@ import { useRoute } from 'vue-router' import { getUserId } from '/@/views/site/utils/index'; const mainVideo = ref(); +const bVideoRefs = ref([]); const tingKeZuJiAddModal = ref({}); +const curentPlayerVideo = ref({}); +const kcCardBoxTitle = ref(''); const mainVideoCardBoxTitle = ref(''); const tableData = ref([]) const isError = ref(false); @@ -74,8 +97,9 @@ const route = useRoute(); enum Api { list = '/jiaoshi/kcZhihuijiaoshi/list', querySuibi = '/kc/kcKetangSuibi/list', - addSuibi = '/kc/kcKetangSuibi/add' + addSuibi = '/kc/kcKetangSuibi/add', // editSuibi = '/kc/kcKetangSuibi/edit' + getKtangInfo = '/ktgl/kcKetangbiao/queryById' } /** @@ -85,6 +109,7 @@ enum Api { const list = (params) => defHttp.get({ url: Api.list, params }); const querySuibi = (params) => defHttp.get({ url: Api.querySuibi, params }); const addSuibi = (params) => defHttp.post({ url: Api.addSuibi, params }); +const getKtangInfo = (params) => defHttp.get({ url: Api.getKtangInfo, params }); // const editSuibi = (params) => defHttp.post({ url: Api.editSuibi, params }); onMounted(() => { @@ -94,22 +119,54 @@ onMounted(() => { list({ pageSize: -1, sfyx: '0', jsbh: route.query.id }).then(res => { let list = (res?.records) ?? []; tableData.value = list; + tableData.value.forEach(x => x.isShow = true);//默认展开 nextTick(() => { changeLive(tableData.value[0]); + tableData.value.forEach(x => x.isShow = false);//关闭 }) }); getSuibi(); + getKcxx(); }else{ isError.value = true; } }); +/** + * 子页加载完成后回调 + * @param player + */ + function loadEnd(player){ + nextTick(() => { + player.on('play',() => { + setTimeout(() => { + player.pause(); + },1000); + }) + }) +} + +function initVideo(key){ + nextTick(() => { + let ref = bVideoRefs.value[key]; + console.log(`🚀 --------------------------------------------------🚀`); + console.log(`🚀 ~ file: viewPage.vue:158 ~ nextTick ~ ref:`, key,bVideoRefs,ref); + console.log(`🚀 --------------------------------------------------🚀`); + ref.init(); + }) +} + function changeLive(item:any){ let mainVideo = document.querySelector('#mainVideo'); mainVideo?.player?.src([{ type:'application/x-mpegURL',src: item.pullUrl }]) + mainVideoCardBoxTitle.value = item.jsmc+item.xm; + + curentPlayerVideo.value = item; + } function getSuibi(){ + //查询随笔 let param = { userId: getUserId(), ketangbiaoId: route.query.ktId, @@ -122,6 +179,18 @@ function getSuibi(){ }); } +function getKcxx(){ + //查询课程信息 + //route.query.ktId + let param = { + id: route.query.ktId + } + getKtangInfo(param).then(res => { + // console.log(res); + kcCardBoxTitle.value = res.kcmc; + }); +} + function saveSuibi(){ //addSuibi editSuibi // if(model.value.id){ @@ -133,6 +202,53 @@ function saveSuibi(){ \ No newline at end of file diff --git a/src/views/site/tingKeZuJi/list.vue b/src/views/site/tingKeZuJi/list.vue index a552d4b..4580068 100644 --- a/src/views/site/tingKeZuJi/list.vue +++ b/src/views/site/tingKeZuJi/list.vue @@ -15,11 +15,11 @@ 已评分：{{ item.score }}分 填写评价 - + - 查看随笔 + 查看听课笔记