|
@@ -73,9 +73,10 @@
|
|
|
</div>
|
|
</div>
|
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="2" tab="字幕">
|
|
<a-tab-pane key="2" tab="字幕">
|
|
|
- <div style="height: 900px; overflow-y: auto">
|
|
|
|
|
|
|
+ <a-input v-model:value="subtitleVal" allowClear placeholder="请输入" />
|
|
|
|
|
+ <div style="height: 900px; overflow-y: auto" class="mt-2">
|
|
|
<div v-if="subtitle">{{ subtitle }}</div>
|
|
<div v-if="subtitle">{{ subtitle }}</div>
|
|
|
- <div v-for="(item, idx) in danmuObj.srtInfoList" :key="idx">
|
|
|
|
|
|
|
+ <div v-for="(item, idx) in subtitleList" :key="idx">
|
|
|
<div>{{ item.startTime }}~{{ item.endTime }}</div>
|
|
<div>{{ item.startTime }}~{{ item.endTime }}</div>
|
|
|
<div style="cursor: pointer; padding: 10px 0" @click="videoSpeed(item)">{{ item.text }}</div>
|
|
<div style="cursor: pointer; padding: 10px 0" @click="videoSpeed(item)">{{ item.text }}</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -205,24 +206,29 @@
|
|
|
timeStamp1.value = parseInt(e.target.currentTime) //播放进度 (秒)
|
|
timeStamp1.value = parseInt(e.target.currentTime) //播放进度 (秒)
|
|
|
biNum.value = Math.floor((timeStamp1.value / allTime.value) * 10000) / 100 //暂时没用到
|
|
biNum.value = Math.floor((timeStamp1.value / allTime.value) * 10000) / 100 //暂时没用到
|
|
|
currentTime.value = e.target.currentTime
|
|
currentTime.value = e.target.currentTime
|
|
|
- if (newsschedule.value <= currentTime.value) {
|
|
|
|
|
- //请求接口获取的参数就是判断当前观看的时长是否小于当前时间 小于当前时间就禁止拖动进度条
|
|
|
|
|
|
|
+ if (videoJumpTime.value) {
|
|
|
|
|
+ videoJumpTime.value = false
|
|
|
|
|
+ newsschedule.value = currentTime.value
|
|
|
|
|
+ } else {
|
|
|
|
|
+ if (newsschedule.value <= currentTime.value) {
|
|
|
|
|
+ //请求接口获取的参数就是判断当前观看的时长是否小于当前时间 小于当前时间就禁止拖动进度条
|
|
|
|
|
|
|
|
- if (e.srcElement.currentTime - currTime.value > 3) {
|
|
|
|
|
- //这里拖动进度条时间 - 当前观看的时长 > 3秒 这边判定它为拖动进度条
|
|
|
|
|
- e.srcElement.currentTime = currTime.value > maxTime.value ? currTime.value : maxTime.value
|
|
|
|
|
- let newsVal = initialtime.value
|
|
|
|
|
- if (newsVal) {
|
|
|
|
|
- videoContext.value.currentTime = newsVal
|
|
|
|
|
|
|
+ if (e.srcElement.currentTime - currTime.value > 3) {
|
|
|
|
|
+ //这里拖动进度条时间 - 当前观看的时长 > 3秒 这边判定它为拖动进度条
|
|
|
|
|
+ e.srcElement.currentTime = currTime.value > maxTime.value ? currTime.value : maxTime.value
|
|
|
|
|
+ let newsVal = initialtime.value
|
|
|
|
|
+ if (newsVal) {
|
|
|
|
|
+ videoContext.value.currentTime = newsVal
|
|
|
|
|
+ }
|
|
|
|
|
+ //当前用户记录观看时间 大于 实施播放时间
|
|
|
|
|
+ if (currTime.value > newsVal) {
|
|
|
|
|
+ videoContext.value.currentTime = currTime.value
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log('快进了')
|
|
|
}
|
|
}
|
|
|
- //当前用户记录观看时间 大于 实施播放时间
|
|
|
|
|
- if (currTime.value > newsVal) {
|
|
|
|
|
- videoContext.value.currentTime = currTime.value
|
|
|
|
|
- }
|
|
|
|
|
- console.log('快进了')
|
|
|
|
|
|
|
+ currTime.value = e.srcElement.currentTime
|
|
|
|
|
+ maxTime.value = currTime.value > maxTime.value ? currTime.value : maxTime.value
|
|
|
}
|
|
}
|
|
|
- currTime.value = e.srcElement.currentTime
|
|
|
|
|
- maxTime.value = currTime.value > maxTime.value ? currTime.value : maxTime.value
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -234,7 +240,9 @@
|
|
|
const askEdit = (e) => {
|
|
const askEdit = (e) => {
|
|
|
rightNenuRef.value.selectBtn({ key: 7, type: 4 }, e)
|
|
rightNenuRef.value.selectBtn({ key: 7, type: 4 }, e)
|
|
|
}
|
|
}
|
|
|
|
|
+ const videoJumpTime = ref(false)
|
|
|
const videoSpeed = (e) => {
|
|
const videoSpeed = (e) => {
|
|
|
|
|
+ videoJumpTime.value = true
|
|
|
currentTimenew.value = e.startTime
|
|
currentTimenew.value = e.startTime
|
|
|
}
|
|
}
|
|
|
//获取字幕内容,发送一个get请求
|
|
//获取字幕内容,发送一个get请求
|
|
@@ -259,7 +267,6 @@
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
danmuObj.value.srtInfoList = textList
|
|
danmuObj.value.srtInfoList = textList
|
|
|
- console.log('解析之后的字幕内容', textList)
|
|
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
subtitle.value = '字幕解析失败'
|
|
subtitle.value = '字幕解析失败'
|
|
|
}
|
|
}
|
|
@@ -282,7 +289,6 @@
|
|
|
const forumData = computed(() => {
|
|
const forumData = computed(() => {
|
|
|
let item = findNodeByKey(classTimeList.value, selectedKeys.value[0])
|
|
let item = findNodeByKey(classTimeList.value, selectedKeys.value[0])
|
|
|
return {
|
|
return {
|
|
|
- postType: 2,
|
|
|
|
|
id: selectedKeys.value[0],
|
|
id: selectedKeys.value[0],
|
|
|
title: item?.name,
|
|
title: item?.name,
|
|
|
videoUrl: btoa(encodeURIComponent(videoRef.value?.src))
|
|
videoUrl: btoa(encodeURIComponent(videoRef.value?.src))
|
|
@@ -295,8 +301,8 @@
|
|
|
const subtitle = ref()
|
|
const subtitle = ref()
|
|
|
const getVideoTime = () => {
|
|
const getVideoTime = () => {
|
|
|
classCentre.theLastDetail().then((data) => {
|
|
classCentre.theLastDetail().then((data) => {
|
|
|
- initialtime.value = parseFloat(data.endTime)/1000
|
|
|
|
|
- currentTimenew.value = parseFloat(data.endTime)/1000
|
|
|
|
|
|
|
+ initialtime.value = parseFloat(data.endTime) / 1000
|
|
|
|
|
+ currentTimenew.value = parseFloat(data.endTime) / 1000
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
getVideoTime()
|
|
getVideoTime()
|
|
@@ -340,7 +346,7 @@
|
|
|
classCentre
|
|
classCentre
|
|
|
.classPlanAdd({
|
|
.classPlanAdd({
|
|
|
startTime: parseFloat(initialtime.value),
|
|
startTime: parseFloat(initialtime.value),
|
|
|
- endTime: Math.round(videoRef.value.currentTime*1000),
|
|
|
|
|
|
|
+ endTime: Math.round(videoRef.value.currentTime * 1000),
|
|
|
progress: Math.round(progress),
|
|
progress: Math.round(progress),
|
|
|
hourId: selectedKeys.value[0],
|
|
hourId: selectedKeys.value[0],
|
|
|
stayTime: outNowTimesStr.value - nowTimesStr
|
|
stayTime: outNowTimesStr.value - nowTimesStr
|
|
@@ -362,6 +368,17 @@
|
|
|
})
|
|
})
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
+ // 模糊查询函数
|
|
|
|
|
+ const subtitleVal = ref()
|
|
|
|
|
+ const subtitleList = computed(() => {
|
|
|
|
|
+ return danmuObj.value.srtInfoList?.filter((item) => {
|
|
|
|
|
+ if (subtitleVal.value) {
|
|
|
|
|
+ return item.text.includes(subtitleVal.value)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return true
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
</script>
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
<style scoped lang="less">
|
|
|
.classTitle {
|
|
.classTitle {
|