ai视频一期功能提交

This commit is contained in:
sunli_tydic
2025-12-09 15:36:41 +08:00
parent 9379aad28f
commit 311ec096eb
5 changed files with 31 additions and 3 deletions

View File

@@ -41,6 +41,17 @@
<script> <script>
import { mapGetters, mapMutations } from 'vuex' import { mapGetters, mapMutations } from 'vuex'
export default { export default {
props: {
// 视频链接对应的content Id
blobId: {
type: String,
default: ''
},
isDrag:{
type: Boolean,
default: true,
},
},
name: 'ai-script', name: 'ai-script',
data() { data() {
return { return {
@@ -55,7 +66,8 @@ export default {
computed: { computed: {
...mapGetters([ ...mapGetters([
'currentTime', 'currentTime',
'selectableLang' 'selectableLang',
'duration'
]), ]),
}, },
mounted: function() { mounted: function() {
@@ -162,6 +174,14 @@ export default {
}, },
// 跳转到指定时间点 // 跳转到指定时间点
scrollToTime(time) { scrollToTime(time) {
// console.log('scrollToTime', time , this.blobId, localStorage.getItem('videoProgressData'), this.duration)
if(!this.isDrag && this.duration){
var t = localStorage.getItem('videoProgressData')
var arr = t&&JSON.parse(t) || {}
if(arr[this.blobId] < time/this.duration || !arr[this.blobId]){
return
}
}
console.log('跳转到时间点:', time); console.log('跳转到时间点:', time);
this.$emit('changeCurrentTime', time); this.$emit('changeCurrentTime', time);
// 设置用户滚动状态,避免自动滚动干扰 // 设置用户滚动状态,避免自动滚动干扰

View File

@@ -358,7 +358,8 @@ export default {
} }
setInterval(() => { setInterval(() => {
console.log('当前状态:',this.currentProgress,this.isDrag,this.videoDom.currentTime , this.videoDom.duration) this.SET_duration(this.videoDom.duration);
console.log('当前状态:',localStorage.getItem('videoProgressData'),this.currentProgress,this.isDrag,this.videoDom.currentTime , this.videoDom.duration)
// 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行 // 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行
if(!this.isDrag){ if(!this.isDrag){
var time = localStorage.getItem('videoProgressData') var time = localStorage.getItem('videoProgressData')
@@ -413,6 +414,7 @@ export default {
//if() //if()
//console.log(this.videoDom.readyState,'this.videoDom.readyState'); //console.log(this.videoDom.readyState,'this.videoDom.readyState');
}, 1000); }, 1000);
// 视频dom监听器用于控制鼠标的显示 // 视频dom监听器用于控制鼠标的显示
this.videoDom.addEventListener("mousemove", () => { this.videoDom.addEventListener("mousemove", () => {
this.isCursorStatic = false; this.isCursorStatic = false;
@@ -457,6 +459,7 @@ export default {
SET_currentLang: 'video/SET_currentLang', SET_currentLang: 'video/SET_currentLang',
SET_currentTime: 'video/SET_currentTime', SET_currentTime: 'video/SET_currentTime',
SET_selectableLang: 'video/SET_selectableLang', SET_selectableLang: 'video/SET_selectableLang',
SET_duration: 'video/SET_duration',
}), }),
//当视频由于需要缓冲下一帧而停止,解决一直计时的问题 //当视频由于需要缓冲下一帧而停止,解决一直计时的问题
onWaiting(){ onWaiting(){

View File

@@ -34,5 +34,6 @@ const getters = {
currentLang:state => state.video.currentLang, currentLang:state => state.video.currentLang,
currentTime:state => state.video.currentTime, currentTime:state => state.video.currentTime,
courseInfo:state => state.video.courseInfo, courseInfo:state => state.video.courseInfo,
duration:state => state.video.duration,
} }
export default getters export default getters

View File

@@ -127,6 +127,7 @@ const state = {
currentLang: '', // 当前选中语言 currentLang: '', // 当前选中语言
currentTime: -1, // 当前视频时间 currentTime: -1, // 当前视频时间
courseInfo: {}, courseInfo: {},
duration: 0, // 视频时长
} }
const mutations = { const mutations = {
@@ -152,6 +153,9 @@ const mutations = {
SET_courseInfo: (state, info) => { SET_courseInfo: (state, info) => {
state.courseInfo = info state.courseInfo = info
}, },
SET_duration: (state, duration) => {
state.duration = duration
},
} }
const actions = { const actions = {

View File

@@ -652,7 +652,7 @@
<!-- ai播放器相关 --> <!-- ai播放器相关 -->
<!-- ai文稿 --> <!-- ai文稿 -->
<div class="ai-script" v-if="contentData.contentType == 10 && tab == 3"> <div class="ai-script" v-if="contentData.contentType == 10 && tab == 3">
<ai-script ref="aiscript" @changeCurrentTime="changeCurrentTime"></ai-script> <ai-script ref="aiscript" :blobId="blobId" :isDrag="curriculumData.isDrag" @changeCurrentTime="changeCurrentTime"></ai-script>
</div> </div>
</div> </div>
</div> </div>